Jump to content
Search Community

Interupt timeline with other timeline? "smooth transition"

jesper.landberg 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,

 

See my attached PEN.

 

I want the in/out timelines to interup each other seemingly. If I do mouseup before the tlGrab is finished, I want tlRelease to play from the current position. Currently it gets messy and then basically doesnt work at all.

 

Tips, solutions?

 

See the Pen rqyQaN by ReGGae (@ReGGae) on CodePen

 

See the Pen by (@) on CodePen

Link to comment
Share on other sites

3 minutes ago, mikel said:

Hi @jesper.landberg,

 

If I understand you correctly ...

try using tlGrab.reverse() - by default it is playing in reverse from wherever the playhead currently is.

 

See the Pen NOpVmz by mikeK (@mikeK) on CodePen

 

Happy tweening ...

Mikel



Well yeah kind off... but what I dont like when doing reverse() is the reversing of the easing functions. I would want easeOut both directions, not easeIn which it is when doing reverse. Thats why I'm doing two timelines. Do you understand?:)

Link to comment
Share on other sites

33 minutes ago, mikel said:

Hi @jesper.landberg,

 

Take a look at this expert solution.

 

Here a fork:

 

See the Pen oaZroe by mikeK (@mikeK) on CodePen

 

Best regards

Mikel

 

Cool thanks, would it be possible to reverser the order of the stagger also? 0.075 -> -0.075

 

I think maybe this is more of an issue with the first tween/timeline getting overwritten? Is there any way to interupt, but not kill the other tween so it can be played again?

Link to comment
Share on other sites

Great solution, Mikel!

 

Jesper, if you want to mess with the stagger amount and do other customizations you probably have to create new timelines on each mouseup/mousedown.

 

You could go so far as determining the progress() of the mousedown animation to control the duration tweens in your mouseup animation.

 

For instance if you are only at progress(0.1) when you release the mouse you probably don't want the new animations to have the same duration as if the person released after that mousedown animation ran all the way through.

  • Like 3
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...