Issue with creating flying elements inside pinned sections

[weinde]

Hello, I would like some assistance with my case... I have a web page with 5 sections with different heights that I am pining on top of each other... but in my fourth section i have around 16 images that I want them to react like this example: EXAMPLE when the fourth section is pinned on top.

 

I have followed every docs example i found and I cant figure out what my issue is that the images are not appearing and the animation does not happen... 

 

HERE IS MY CODEPEN: 

See the Pen gOJVLKe by Weindorfer (@Weindorfer) on CodePen

See the Pen ZENeONq by GreenSock (@GreenSock) on CodePen

[mvaneijgen]

As you can see in the demo you shared. It uses a .wrapper with a height of 100vh, that is what you need, you had set your container to something like 5000px with no pin spacing, so all your images where animating 5000px below where you where staring your animation. Also your images didn't seem to load at all for me. A good thing to keep in mind is the best thing to do 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. This way you can focus on one part at a time and it will save a lot of headache when debugging. And in this case it would be smart to even remove all Javascript code and first make sure your HTML and CSS is doing what it suppose to. 

 

I would keep the demo you shared (that is working) next to your and keep referencing it and as things brake check what is causing the issue, because that demo seems well setup and optimised. Hope it helps and happy tweening! 

 

See the Pen VwOobqz?editors=0100 by mvaneijgen (@mvaneijgen) on CodePen