Start the next animation without waiting for the end of the previous one

[qqignatqq]

Hello. How to make the animation run without waiting for the end of the previous animation? I want to do my own animation as I scroll through the page and I need the blocks to appear alternately.

 

Here is my code:https://jsfiddle.net/h7qp5m64/1/
I thought that if I prescribed a negative start to the animation, it would work the way it should, but I didn't really get it right. In the beginning the animation goes very quickly. To see how it should work, you need to quickly scroll down the page and then there will be a normal animation.

 

 

[ZachSaucier]

2 hours ago, qqignatqq said:

How to make the animation run without waiting for the end of the previous animation?

You can set tweens to start at a particular position (ignoring others) by using a set value (like 1) in the position parameter. 

 

However, I think in this case it might make more sense to just use regular tweens (not a timeline). You can use a delay based on the index like I did in the demo below or you can use a staggerTo which pretty much does the same thing but calculates the index for you.

 

https://jsfiddle.net/Zeaklous/oba0jghf/

[ZachSaucier]

If you want to use a timeline, you can use the approach outlined here: 

 

[qqignatqq]

27 minutes ago, ZachSaucier said:

If you want to use a timeline, you can use the approach outlined here: 

 

Thank you so much for your help! You have helped me very much! I will use your example from jsfidddle.

By the way, congratulations on your 1000 likes! Mine was a thousand))))

[qqignatqq]

Hello again. Can you tell us how to implement the same animation in pure JavaScript? I'm trying to repeat the action, but it doesn't work. Help me, please.

The problem is the same as it was with gsap - the animation does not repeat itself if you click quickly several times.

var playShowMsg;
function myShow() {
clearTimeout(playShowMsg);
document.querySelector(".transition").classList.remove("showmsg")
playShowMsg = setTimeout(function(){document.querySelector(".transition").classList.add("showmsg");}, 0);
playShowMsg = setTimeout(function(){document.querySelector(".transition").classList.remove("showmsg")}, 2000);
}

 

https://jsfiddle.net/kf06dc5w/

[ZachSaucier]

Here you are attempting to set the same variable to two different setTimeouts, so the second one is overriding the first. Thus if someone clicks twice quickly, only the second one is cleared (not the first). To fix it, use two variables for the two setTimeouts and clear both.

 

FYI GSAP has a delayedCall method that's like setTimeout but stays synced with other animations and pauses playing if people switch tabs. I tend to use it over setTimeout.