Hi all i have some question about ScrollTrigger !

[JoePham]

Here my code i have fews question

1. but when i scroll to section 4 i still see the cloud at the first time so how can i push all the cloud to the right and only show when i scroll ?? 

2. is there any way to optimize my script code it look like a mess ... 

 

See the Pen dyKZRMx by phm-thanh-li-m-the-animator (@phm-thanh-li-m-the-animator) on CodePen

[mvaneijgen]

How things are layed out is really important. This is important in general when building websites, but definitely when working with GSAP. 

 

Right now you have the feeling like your code is "a mess" because the underlaying structure is indeed a bit of a mess. When you use position: absolute; you rip things out of the document flow. The same things applies to transforms, over using these properties will result in less readable and hard to maintain code, so my advice would be use them sparingly with a clear use case and try applying more general layout tools like CSS Grid, I've always loved https://cssgridgarden.com when I started out learning grid. If you're looking for a challenge I would suggest building your section_4 image layout with CSS grid and you can not use absolute or transforms!

 

For your section_4 you had two ScrollTriggers I've merged them to be just one. And I've changed your animation to be a .fromTo() it animates from the width of the first image to the right to the width of all the images + the width of the browser window. This way it will scroll from off screen on the right to off screen to the left. Right now I had to apply a bit of a weird hack to get the width of all the images. If you would build that image grid without the absolute and transforms you could just have gotten the width of .clound_sticky_10th and it would be a lot easier and more readable 

 

When working with GSAP I like it when my layout is at its end position. eg I want all why elements to be where they should end after animating, this is what I've done with your image cloud grid. If you disable the Javascript all the elements are in the middle of the section all on top of each other. Then with GSAP I put them all over the place. I've done this with the gsap.utils.wrap function for each item in your cloud I've created some values (please modify them to suit your needs) and in the .from() animation I get the value for that particular item (You could even add the scale to the pos variable, but I leave that as a challenge for you) and because they all are already in the middle via CSS, GSAP will animate them .from() some random position to the middle! 

 

Hope it helps and happy tweening! 

 

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