Since I dod not know where you are referring to ??
Is this effectively what you mean ??
It looks like Lottie has a direction of play.
setDirection(1). normal direction
setDirection(-1). reverse direction
But also looks like there is a bug.
To play in reverse you have to have loop set to true (That's the bug )
Reveres will not work if loop is false. Which defeats any attempt to rchange direction because we are stuck in a loop.
My work around is to add a on loop complete listener on the animation. Stop the animation, set animation completed to true, change the direction and start the animation again.
In the loadLottieFile() we add at the top
hypeDocument.customData.direction = 1
then at the bottom of the loadLottieFile()
hypeDocument.customData.animation.onLoopComplete = function(){
hypeDocument.customData.animation.stop()
hypeDocument.customData.animationCompleted = true;
console.log("COMPLETE")
switch(hypeDocument.customData.direction) {
case 1:
hypeDocument.customData.direction = -1
break;
case -1:
hypeDocument.customData.direction = 1
break;
}
hypeDocument.startTimelineNamed('bounce')
}
We also need to set loop to true.
loop: true,
The animation start is just a run javascript action on a timeline named bounce.
The play button also starts this time line.
( you could also just use hypeDocument.functions(). playLottieFile(hypeDocument, element, event)
instead )
The playLottieFile()
becomes
if (hypeDocument.customData.animationCompleted) {
hypeDocument.customData.animation.setDirection(hypeDocument.customData.direction);
hypeDocument.customData.animation.play();
hypeDocument.customData.animationCompleted = false;
}
The animation will appear to loop through forward - reverse - forward .... and so on.
If you want it to stop then just add some sort of counter to the loop complete callback function .
Play_lottie-fixed_mhv1.hype.zip (82.2 KB)