Retain Layer's X Value on scroll for Parallax using ScrollTrigger on scroll after 2nd change

[KingsleyM]

I hope I worded the title correctly.

 

In the CodePen, if you clip the 1st button called "Right" and scroll up and down, it works fine. But when Clicking on Move Right More, returning to the top reverts it to the original "Right" button X value.

 

Why is it keeping / reverting to the first value?

 

Any help would be appreciated, been looking at the refresh & update functions, even on the timeline.set values with no success.

 

Thanks!

See the Pen RwvNQLM by Kingsley-Muir (@Kingsley-Muir) on CodePen

[GreenSock]

hi @KingsleyM. Welcome to the forums. 

 

I looked at your code and I'm pretty confused - why are you parsing all that transform data? That's a ton of extra work and you're circumventing GSAP. Did you know you can gsap.getProperty(element, "x") for example? And you should ALWAYS set your transforms via GSAP rather than directly setting it on the element's style property because not only does it perform better (GSAP optimizes things in various ways, including by caching values), but it's also more reliable for extracting each component because matrices are inherently ambiguous when it comes to rotations in particular. 

 

Are you trying to do this?: 

See the Pen mdvJPQK?editors=1010 by GreenSock (@GreenSock) on CodePen

[KingsleyM]

Yep. That's exactly what I'm trying to do.

 

I originally thought that gsap might have gotten the new values after I set the transform manually, I don't care how I set it (through gsap or not) I just wanted it set and not forgotten.

 

Which yours looks like it does perfectly!

 

So gsap.set and tl.set is the fix?

 

gsap.set(".layer-1", {x: 200});
tl.set( '.layer-1', {x: 200,overwrite: true}, "layer-1");

Thanks!

[GreenSock]

I'm not really sure why you're even adding that .set() to the timeline at all. Why not just use a regular gsap.set()? 

See the Pen poGJezr?editors=1010 by GreenSock (@GreenSock) on CodePen

 

Seems a lot simpler. 🤷‍♂️