Scrub Then Pin Tween From Last Point In Scrub

[emilychews]

Hi,

 

I have a scrollTrigger where an element is tweened using the scrub property so it produces a slight parallax using y:-100 , and when it gets to the middle of the viewport is the pinned with the pin property. At the moment this causes the tween to jank back 100px when the second scrollTrigger is activated.

 

I guess what I need on the 2nd scrollTrigger is the equivalent of having a start value of start: "0 (50% -= 100)", although I know that property value isn't valid.

 

Is there a way of having a start value of a tween in a position that is percentage value + pixels?

 

In the CodePen example below you can see that box-3 jumps when the 2nd scrollTrigger is activated.

Any help would be awesome.

 

 

 

See the Pen yLeeaGb by emilychews (@emilychews) on CodePen

[mikel]

Hey @emilychews,

 

On 6/2/2020 at 8:16 PM, ZachSaucier said:

if you change the position of an element with a ScrollTrigger you'll need to make ScrollTrigger refresh.

 

See the Pen GRooMKR?editors=1010 by mikeK (@mikeK) on CodePen

 

By the way: You can define the following

You can even use a complex relative value like "top bottom-=100px" which means "when the top of the trigger hits 100px above the bottom of the viewport/scroller"

 

Happy scrolling ...

Mikel

 

 

[emilychews]

Thanks Mikel