Beginner Reverse Ease Question (Again..)

[SpaceMoney-01011000]

Greetings, and salutations!

I hope this day finds you well!

So, I'm still plodding away with JS and GSAP, and I'm a little stuck in the mud on a simple issue; dealing with an ease in reverse. I've seen a lot of solutions in the forums, but haven't been able to implement one that works (which can only be attributed to the gaps in my current knowledge).

Would anyone be kind enough to take a peek at what I'm doing, and perhaps point me in the right direction?

Nothing too complicated please (if possible). I'm still experiencing difficulties getting my head around JS and GSAP.

Kind regards,

X

See the Pen RwMepLO by scottonanski (@scottonanski) on CodePen

[GreenSock]

Thanks for providing a minimal demo. 

 

yoyoEase is for changing the ease only in the yoyo phase of a repeat. You don't have a repeat. 

 

It's logically impossible to smoothly change an ease on a regular reverse() because it'd jump if done mid-tween. For example, let's say you're animating x: 0 to x: 100 with an ease: "none". So halfway through it'd be at x: 50. Now let's say you reverse() but want to change the ease to "power2.out"  - well, halfway through that ease may be something like x: 87.425. So you'd suddenly see it JUMP to that spot even though the playhead position didn't change. See the problem? 

 

The reason yoyoEase can work is because it only happens when the animation is at the end/start (no inbetween states)

 

Typically in a scenario like yours, it's much better to just dynamically animate things rather than trying to always reuse the same instance of a single tween/timeline. Like this: 

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

 

Does that help? 

[SpaceMoney-01011000]

2 hours ago, GreenSock said:

Thanks for providing a minimal demo. 

 

yoyoEase is for changing the ease only in the yoyo phase of a repeat. You don't have a repeat. 

 

It's logically impossible to smoothly change an ease on a regular reverse() because it'd jump if done mid-tween. For example, let's say you're animating x: 0 to x: 100 with an ease: "none". So halfway through it'd be at x: 50. Now let's say you reverse() but want to change the ease to "power2.out"  - well, halfway through that ease may be something like x: 87.425. So you'd suddenly see it JUMP to that spot even though the playhead position didn't change. See the problem? 

 

The reason yoyoEase can work is because it only happens when the animation is at the end/start (no inbetween states)

 

Typically in a scenario like yours, it's much better to just dynamically animate things rather than trying to always reuse the same instance of a single tween/timeline. Like this: 

 

 

 

Does that help? 

Make perfect sense, and helped immensely! Thank you so much!

I saw this solution elsewhere, but I didn't quite understand how to make it work! I think I had stuff out of scope because the code from the solution was a bit different.  And ternary operations are still a bit confusing as well...

I'm so elated right now! I better get crackin'!

Big thanks!

[Cassie]

Glad you're having fun. Also - have you seen our getting started articles?
 

Also I noticed the stagewidth calculations and wondered if you knew you could use other units, like viewport widths. Maybe this will help!

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