Hey community!
I have a question: I have a more or less “complicated” or rather long animation timeline in my project. It shall start animating when viewportEnter() and stop when viewportLeave().
Summary: Stop animation effects when leaving section so that animation starts from beginning when re-entering the section.
The code for my animation follows the principle of having delays and waiting for the predecessor to be visible (viewportEnter) to start.
When leaving the current section and reentering the section later, I want the animation to start anew. In theory, I got this to work.
However, if scrolling down and scrolling up before the whole animation has finished, it somehow bugs and animates in a weird way.
I was hoping that simply hiding all elements is sufficent as e.g. containerBox.onviewportLeave(()=>{
$w(‘#1).hide();
$w(’#2).hide();
$w('#3).hide();
};
So “re-entering” the viewport leads to the animation to start from the beginning. As mentioned, this is not working when scrolling “fast”. Is there anyway to reset all current effects ? Like e.g.
containerBox.onviewportLeave(()=>{
$w(‘#1’).stop();
$w(‘#2’).stop();
$w(‘#3’).stop();
$w(‘#1’).hide();
$w(‘#2’).hide();
$w(‘#3’).hide();
};
Does anybody know how to deal with this?
I tried the timeline option but this does not provide an easy access to the cool animation effects neither does it solve the problem - this problem still remains with the timeline animation path.