Jump to content

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

Continue animation from where it stopped

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

Hey guys,


I am new to all of this and trying really hard to create a banner where 3 lines of text stagger in ( from left to right ) then bounce and then slowly fade out.
Would also love the option to repeat this every so many seconds. I have explored the repeat -1 option, but cannot find the option to repeat an action every so many second. 


Question: How can i fade out from where the animation last ended? 
Thank you guys in advance and Gsap is Awesome! 

See the Pen aLbdgG by timdt (@timdt) on CodePen

Link to comment
Share on other sites

Hi @timdt :)


Welcome to the forum.


It sounds like you're looking for repeatDelay.



I'm not sure I understand the 'fade out' part of your question. Do you mean how do you fade all the element at the end? If that's the question, you can  tween the opacity or autoAlpha to 0.


Hopefully that helps. Happy tweening.


  • Like 2
Link to comment
Share on other sites


Hey thank you for your reply, 

what i meant was after the animation stops as you see in codepen. I want to grab the elements from where they stopped and then fade out ( disappear slowly) bij moving out to the right.


thanks :)




Link to comment
Share on other sites



Hey OSU thank you for your reply,

It's close @Carl made this for me in codepen and this is what i meant :)

See the Pen GMRaaq by GreenSock (@GreenSock) on CodePen


Interesting to see that the code's are different. Will study it and try to understand how it works and what differs from eachother. Going to take a good deep look into jquery today to try and understand all of this better so i can make some really awesomme stuff like you guys.




See the Pen GMRaaq by GreenSock (@GreenSock) on CodePen



Link to comment
Share on other sites

Hi @timdt


After seeing what you posted in your other thread, @Carl's solution is what I would do too. The demo I made is more for repeating an entire animation after a certain amount of time.


If you're not making interactive animations, like with click and hover events, you really don't need to dig too deep into using jQuery. I would say that your time might be better spent just learning how to sequence stuff with GSAP, and its callback system. That's not say you shouldn't learn jQuery. It's is very helpful if you're new to web development. 


  • Like 1
Link to comment
Share on other sites

@OSUblake Thanks for the explaining. Thats awesome! Then i will put some more time into the sequencing like you suggest.

I want to grow to a point where i am able to implement jquery into the banners also since i want to learn how to make animated and interactive banners.


  • Like 1
Link to comment
Share on other sites

Hello @timdt

If you want to learn quite a lot about GreenSock and what it can do, I strongly suggest https://ihatetomatoes.net/g101/ it's a free short course from Petr - he's a great guy, helped me a milion, made me actually like programming itself, same did the folks on this forum!
Happy tweening!

  • Like 2
Link to comment
Share on other sites

@Tasty Sites Amazing site! Really stoked about greensock. Still little bit hard. have completed it all today i'm going to make notes and try to recreate everything. Thanks

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.