Jump to content


Animating Banner with repeat() and repeatDelay()

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


I am animating a html5 rich media banner ad that has repeat() and repeatDelay(). The duration of the banner is 15 sec with a repeat of 2 times. The issue I am having is the second time it starts it refreshes hard. Is there a way to make the second repeat come in softer?

Can this be done? If not can the timeline be duplicated to run consecutively after each other to give the effect of a repeat? The total duration can be 45sec. I hope this makes sense and someone can help. Thank you.

Link to comment
Share on other sites

can you explain what "refreshes hard" means?

  • Like 2
Link to comment
Share on other sites

Hi tweeden36 :)


Welcome to the GreenSock forum.


I was wondering the same thing as ziraga. What exactly does 'refresh hard' mean?


If you could create a CodePen demo, we'd be happy to take a look for you. Please see this thread to learn more about making a demo:




Thanks and happy tweening.


  • Like 1
Link to comment
Share on other sites

I think I know the hard refresh problem.


You have 2 choices:

The first which is simple and reusable: Use a fader <div> which is acts like a curtain: fading out at the start of the animation and fading in at the end. 


The second is to tailor the end of you animation to end exactly the same as the anim begins. This way your repeat will be smooth.

In both cases You have to .add( function(){ myStopTimelineIfSecondRepeatFunciton(); } ) just before the end of the anim.


If the main timeline's last frame is not containing all the information what is considered good to stare at for a long time, You can make an ending timeline, and start it after You stopped the main timeline. This is what i call endFrame. Hard to build, not always worth it, I usually just stop at the last frame if my cliend don't ask for a specific endFrame with all the stuff on it.

This ad containing a simple fullscreen fader.div:

  • Like 4
Link to comment
Share on other sites

I was able to come up with a solution. Thanks for the interest.

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.