Jump to content
GreenSock

AdventurousDeveloper

Exclude element ease on timeline reverse

Go to solution Solved by GreenSock,

Recommended Posts

Hi there!

 

Not sure if possible, but here we go....

 

In my codePen, I have a timeline where one element uses a bounce ease and the others use power1 eases. On timeline play everything plays as expected. On reverse the bounce animation plays in reverse which is to be also to expected. In my use case, the play bounce ease is visually perfect, it's just the reverse ease that doesn't look right.

 

My question - is there a way to exclude an element from the reverse timeline or is it possible change an elements ease to a different ease for reverse only? 

 

I hope my explanation makes sense 😬

See the Pen xxWZaPJ by AdventurousDeveloper (@AdventurousDeveloper) on CodePen

Link to comment
Share on other sites

  • Solution

No, that isn't easily feasible. You'd run into a logic problem anyway because imagine what would happen if you try to reverse the timeline when "bounce" one is 50% done. If you change the ease, it would render in a COMPLETELY different place (jump). See what I mean? 

 

But you could just create the animation dynamically like this: 

See the Pen NWYxOvX?editors=0010 by GreenSock (@GreenSock) on CodePen

 

I made them always go in the same order, but you can easily change that with conditional logic if you want. 

  • Thanks 1
Link to comment
Share on other sites

Makes complete sense! Thank you for taking the time to explain and your example! 

 

Cheers 👍

  • 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.
×