Showing up element and then parallax effect

[wisepeople]

Hi all,

I'm struggling with achieving something like this (it will work similar for multiple sections): inside section some elements show up when I scroll to this section, and then - after they are on their places sitting and visible, and I move on with scrolling through document, those elements have to create parralax effect (here blue and green box). One of them should go up (with faster speed than normal scroll) and second one should go down (also with faster speed).

I'm struggling with order of those events and also speed/position of those elements. They show up too quickly and I'm not sure how to properly adjust start and end for scrollTrigger for parralax effect here. What is the best approach to set "y" value?

I know it's rather complicated, but would be very very grateful if someone could take a look at this. Maybe someone did something silmilar. I was checking documentation and also parralax examples, but nothing seems to help...
 

See the Pen ZEopOPe by ilonu (@ilonu) on CodePen

[Rodrigo]

Hey @wisepeople,

 

I'm struggling a bit to understand your setup. The intentions and the issue you're having are clear though. I think that one of the reasons is the initial Y position and the fact that the scroll trigger instance that animates the opacity and Y position, adds the class and calls the parallax function once the animation is completed, thus creating a weird jump. Do notice that this jump is completely expected, so GSAP is doing what is supposed to.

 

I tinkered a bit with your code and came up with this:

See the Pen bGMBgVx by rhernando (@rhernando) on CodePen

 

If this is what you want to achieve and you have any doubts about the code, let us know and we'll happily answer them.

 

Happy Tweening!!!