Trigger other animation on pinned item

[IndM]

What is the best way to trigger an other animation on the pinned item (in this case the image) depending on what section is in view?
I've tried with creating seperate scrollTriggers for it but I can't figure out why this won't work.

See the Pen GRwMEye?editors=1111 by indy-meermans (@indy-meermans) on CodePen

[Cassie]

Hey, there's a load of demos here which may help

https://greensock.com/st-demos/

 

If you add markers and console logs it may be easier for you to debug too. At the moment your markers are positioned after the element is unpinned. 

See the Pen vYQeevW?editors=1011 by GreenSock (@GreenSock) on CodePen

[IndM]

I cannot find the solution 😕
Perhaps I should restart and find an other solution, to achieve this kind of animation.

[Rodrigo]

Hi,

 

Maybe the examples in this thread and the examples in the other threads linked in that one as well, could help:

 

Happy Tweening!

[IndM]

Hi @Rodrigo, @Cassie!

I've reworked it based on your tips! Is it possible that you guys can give me some tips, or what I should have done better?

Thanks in advance 🤙

See the Pen bGQYKbW by indy-meermans (@indy-meermans) on CodePen

 

[Rodrigo]

Hi,

 

Maybe the only thing I would try is to create a timeline and see if that simplifies something somehow. But that would require to use a bunch of call methods in order to trigger some animations and check the direction of the ScrollTrigger instance in order to see in what direction the animation should go.

 

I think what you have right now is working so, if is not broken, don't fix it  

 

Happy Tweening!