Need help to recreate desire effect with scrolltrigger :(

[JAguVillar]

Please help!
In my  codepen I have a minimal structure of my website, the spacer classes are other sections, the dont have importance, the container class is wer I am having trouble trying to achieve what I want, what I want to achive is:
using scrolltrigger (I suppose), when the container reaches the center or top of the viewport, I want to pin it, and unpinned it when desire animations on the grey boxes end, for example: reach the container while scrolling, when reached, pin it, the user should keep scrolling and, for example, each grey box should do something, I gues inside a timeline, when the timeline ends I need to unpin the container and keep scrolling.

I don't know if I was clear in the explanation, and I dodn not put ant js code because a). it doesnt work as desired and b) I think the ones thant answers this will do  a much better work than I do!

Thx in advance for the help!

See the Pen oNQgEpP by Agoto (@Agoto) on CodePen

[mvaneijgen]

Hi @JAguVillar can you be so kind and do include the JS you've tried? Feel free to also share multiple codepens with all kinds of different setups you've tried. We can of course just share the answer (if we had time for that), but we have these forums to teach people how to use GSAP and just sharing the answer will not result in the best learning experience. By seeing the code you've written, we can see where you're struggling and thus better help you understand what went wrong and how to fix it! 

[JAguVillar]

Sure, I added just a little, the scrolltrigger for pinning the desire section, I will reformulate my desire behaviour, I want to have a scrolltrigger for pinning the desire section, and one scrolltrigger for each "card" inside the container, each card ,I think, should have a scolltrigger too, because what i want to do is, when the scrollbard passes truough each one, it must trigger a method that I have, and when the scollbar reaches the end of the pinned section it should continue the normal scroll.

See the Pen XWyJPQj by Agoto (@Agoto) on CodePen

[mvaneijgen]

4 hours ago, JAguVillar said:

scrolltrigger for pinning the desire section, and one scrolltrigger for each "card" inside the container, each card ,I think, should have a scolltrigger too

 Personally I like to keep things simple and just use one ScrollTrigger, you hardly need more ScrollTriggers to create a desired effect. 

 

I've moved your ScrollTrigger logic to a timeline and created an animation for each box (with staggers), but you could of course go a different route. The main importance when working with ScrollTrigger is to remove it! This seems counter intuitive, but ScrollTrigger is just animating something on scroll, so just focus on the animation at first and only when you're happy with the animation add ScrollTrigger back in. 

 

I've add some comment in the code to better explain sections. Also your original code would work, but the only thing is that as soon as the start trigger reaches the top the end trigger also reaches to bottom, so when it started it has also already finished, that why the makers: true is so handy to use, so you can see what is going on. 

 

See the Pen YzRPBed?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

 

Here another example with ScrollTrigger disabled and some different tween for each box, if you enable ScrollTrigger you can see how it would work on scroll. But to emphasise you first need to create an animation, before you start working on ScrollTrigger, it just so much better as a work flow. Hope it helps and happy tweening!  

 

See the Pen NWEPoEN by mvaneijgen (@mvaneijgen) on CodePen