Animating Banner with repeat() and repeatDelay()

[tweeden36 0 Likes (Newbie)]

Hi,

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.

[ziraga 14 Likes (Newbie)]

can you explain what "refreshes hard" means?

[PointC 8,599 Likes (Superhero)]

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:

 

https://greensock.com/forums/topic/9002-read-this-first-how-to-create-a-codepen-demo/

 

Thanks and happy tweening.

[Oliver16Years 207 Likes (Specialist)]

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:

http://www.bannerhost.hu/nissan/qq/tenyears/HU/Nissan_QQ10_640x360_HU_SIZMEK/

[tweeden36 0 Likes (Newbie)]

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