Jump to content
Search Community

Restart animation with overlapping

TheALuminium test
Moderator Tag

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

Hi,

firstly - many thanks for great GSAP suite. I'm using it for first time and that's really easy to set up.

 

I have just one question about restart the animation/timeline. I have 2 timelines and both animate different element and that's just fine. Animation is good and if you refresh the page everything looks correct. But if you click on Repeat button animation starts in 0.5 seconds so you can't see, that text is not coming to content (to specific position - from 0% to x%) but appears in content (apperas in x%). I noticed that it relates to overlapping ( 4th parametr in method to() ) if I delete the overlapping (mine is "-=0.2") restart is fine but not the move of the text. It arrives from sides and stops (for a few miliseconds) and then continues correctly. But I need smooth move so I used the overlapping but it cause problem with restart...

 

I created a demo on CodePen - 

See the Pen tDGiz?editors=001 by anon (@anon) on CodePen


 

I dont know what to do with it and I would be thankful if you could help me.

 

Thank you.

 

P.S.: Sorry for my english :-\

Link to comment
Share on other sites

Hi and welcome to the GreenSock forums.

 

Thanks for providing the codepen, it was very helpful!!

 

This is basically an overwrite issue. Turns out that the first two tweens of the timelines are affecting the same object and the same properties, so when you overlap both instances GSAP gives control to the latest one, therefore the starting position for both elements changes. Finally, as you already noticed, when you don't overlap the tweens everything works normally.

 

A solution is remove the overlap or use the SlowMo ease function:

 

http://api.greensock.com/js/com/greensock/easing/SlowMo.html

 

It could be something like this:

var tl1 = new TimelineLite({paused:true});
	
tl1
  .to($('.title-js'), 0.5, {opacity: 1, ease:Power4.easeOut})
  .to($('.title-js'), 5, {left:"100%", ease:new SlowMo(0.8, 0.9)},0)
  .to($('.title-js'), 0.5, {opacity: 0, ease:Power4.easeInOut}, "-=0.5");

	var tl2 = new TimelineLite({paused:true});
	
tl2
  .to($('.title-js2'), 0.5, {opacity: 1, ease:Power4.easeOut})
  .to($('.title-js2'), 5, {right:"100%", ease:new SlowMo(0.8, 0.9)},0)
  .to($('.title-js2'), 0.5, { opacity: 0, ease:Power4.easeInOut}, "-=0.5");

$('#repeat').click(function()
{
  tl1.restart();
  tl2.restart();
});

You can see it here:

 

See the Pen BvIAs by rhernando (@rhernando) on CodePen

 

Rodrigo.

Link to comment
Share on other sites

Yup, Rodrigo is right again, the SlowMoEase was created to achieve this exact effect of merging multiple eases together. Definitely use that approach.

 

To clarify a bit more on why your original example wasn't working. When 2 tweens are trying to animate the same property of the same object it usually does not make sense to have 2 tweens fighting for control. The engine is optimized in such a way that when a conflict happens, the default overwrite mode (auto) takes care of killing the existing tween so that new tween "wins the battle".

 

When you tried to replay the timeline, the first tweens were killed when the overlap occurred, meaning they no longer existed.

 

If you want to leave your code exactly the way it is, you can either set overwrite:"none" on each conflicting (overlapping) tween in your timeline OR set the defaultOverwrite mode to "none" like so:

TweenLite.defaultOverwrite = "none"

demo: http://codepen.io/GreenSock/pen/fHCvh

 

Thanks for posting your question here with the demo. Welcome to the forums!

  • Like 2
Link to comment
Share on other sites

Thank you for quick reply, thank you for welcome and mainly thank you for advices from both of you. 

 

I haven't seen the documentation properly yet :-\ god damn it... I saw the SlowMoEase but I didn't realize that this Ease has some parameters...

 

So I'm sorry... I must read the documentation better for next time.

 

Code be with you... :)))

  • Like 1
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.
×
×
  • Create New...