Jump to content


Modifiers Plugin snaps to X value instead of tweening

Recommended Posts

non-working example:

now works!

It's snapping to it's new X value instead of tweening.


Example of what I'm trying to achieve:

See the Pen XMaZEo by philipbell (@philipbell) on CodePen

The same equation works when used in a separate tween. 


I've used this same method in timelines, but for some reason it's not working for a 'to' tween. 

Why is animContainerR snapping to it's x value when passed through the modifyer plugin? 



See the Pen YZxewm by philipbell (@philipbell) on CodePen

Link to comment
Share on other sites

It's just a logic thing in your code - I think this is what you meant in your modifier function: 

return (animContainer === animContainerR) ? window.innerWidth - animContainerL._gsTransform.x : value;

You're trying to mirror based on the position of animContainerL, not that new (reflected) value. And you don't do window.innerWidth - value because "value" would be based on the reflected position. Example: if the window is 1000px wide and the left position is at 400, the right one would be at 600 but then on that next tween, "value" would be totally different between the two elements (400 vs 600 to start), thus you 1000 - 600 = 400 on the first render (wrong). 


There are many ways you could do this - it just made the most sense in my brain to base it off the position of the one on the left and reflect it. 


Does that help?

  • Like 3
Link to comment
Share on other sites

I see this much clearer now.

It needs to be based animContainerL's real-time position rather than the single endX value.


Awesome. Thanks Jack! 

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