Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
qqignatqq

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

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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.


 

 

Link to comment
Share on other sites

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/

  • Like 2
Link to comment
Share on other sites

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

 

Link to comment
Share on other sites

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))))

  • Like 1
  • Thanks 1
Link to comment
Share on other sites

  • 6 months later...

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/

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×