Jump to content


Passing an ease off to another element (simulated)

Moderator Tag
Go to solution Solved by OSUblake,

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

Seems like something that's actually not that hard to do, but I'm having trouble figuring out what to search for to identify my problem... (As evidenced by the weird topic title).


If you look at the codepen, you can see the top two bars both have the same animation, but by positioning them and applying maxwidth to them, you can get kindof get an effect where the ease has been "passed off" from one element to the other.


What I'm trying to figure out, is how to do this with other transitions that are not related to width or height (atm, I'm working with a transform.rotate that I would like to get this sort of behavior out of). I figure the solution should be as simple as wedging something like a Math.min(tween.currentVal, 50) into the animation process (maybe via the onUpdate callback?), but I just can't seem to find the entry-point for that.

See the Pen ObWEdV by relic180 (@relic180) on CodePen

Link to comment
Share on other sites

Hi daveRAI,


I think I understand what you mean by "passing off" the easing from one element to another I can't really visualise the same effect in a rotation animation.


Would it not be a case of just timing the start of the second tween into the end of the first tween and adjusting a repeat delay on the first one?

Link to comment
Share on other sites

Thanks for the reply Dipscom.


There are definitely some applications where it should be fine to simply coordinate two tweens, but I'm not sure that's going to work with my specific application. The "transition" point (where one element stops animating and the next element starts) in my particular project is dynamic... so it changes, based off of user input and some current application state values. It might be possible to programmatically generate new option objects for the tweens with calculated delays based off of the current easing math and the distance to travel before the transition should occur.. but it seems like a ton of work and frankly I'm not sure I have the chops for something that heavy-duty.


The width-example in that code pen works very easily because of the CSS min/max width rules. I can freely apply an identical animation to two objects, and simply give them different min/max values to get the effect I need. Unfortunately, css transforms and other rules don't have any min/max available, so I have to figure out how to get the same effect from within the js.


Conceptually, I know what the solution is. But I don't know how to implement it.


On every animation frame, gsap is going to write a new set of styles onto the element. I want to intercept that value, make sure it's above/below a particular threshold, and override that value if it doesn't meet the threshold. It seems like it should be within the onUpdate callback, and it seems as though I should be able to target the tween itself from within that callback, then look at the next value being written and have access to change it if I need to. That last bit is what I can't seem to find or figure out.

Link to comment
Share on other sites

  • Solution

Hmm, not sure I inderstand your situation exactly but I have a hunch the ModifiersPlugin will help




I second that. If you're using the word dynamic to describe your animation, then the ModifiersPlugin is probably going to be your best bet.


I'm not sure I totally understand what you're trying to do, but using your demo as starting point, here's a couple different ways you could make use of the ModifiersPlugin. 


Value based - 

See the Pen f214d5f03d820c30f7f78f364529ed95?editors=0010 by osublake (@osublake) on CodePen

Progress based - 

See the Pen d1bd2bba94aacf13bc4aae6d2b7297c3?editors=0010 by osublake (@osublake) on CodePen


Notice how the "passing off" point is at different position in those demos.  


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