smooth scrolling I want to create clouds zooming out upon scroll.

[kay005]

I’ve created four cloud images (cloud1 to 4.png) and want to animate them to smoothly zoom out upon scrolling. Let me know the best way to achieve smooth scrolling. I’ll showcase a character when the clouds have nearly zoomed out completely.

[GSAP Helper]

We love helping with GSAP-related questions, but unfortunately we just don't have the resources to provide free general consulting, logic troubleshooting, or "how do I recreate this cool effect I saw on another site?" tutorials. Of course anyone else is welcome to post an answer - we just want to manage expectations.  

 

If you're looking for ScrollTrigger effects, I'd recommend looking at the demos at https://codepen.io/collection/DkvGzg and https://codepen.io/collection/AEbkkJ - you may be able to use one of those as a jumping-off point. 

 

You are welcome to post in the "Jobs & Freelance" forum for paid consulting, or contact us directly. 

 

Otherwise, if you've got a GSAP-specific question just post that here along with a minimal demo and we'd be happy to take a look. 

[mvaneijgen]

What have you tried already? We love to see what you can come up with, that way we can see your thought process and thus better help you understand the tools!

 

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. 

 

 

So I would advise you to open up a codepen and start experimenting, in theory you just need to move the elements on the x and y access some amount, again don't worry about scrolling just build the animation you want to happen and then it will be trivial to hook it to ScrollTrigger. When you get stuck just post back here with what you've tried and someone will point you in the right direction 

 

See the Pen aYYOdN by GreenSock (@GreenSock) on CodePen.

[kay005]

See the Pen OJePdqW by kayd-yonis (@kayd-yonis) on CodePen.

Here is the code that animates the clouds and later on displays image sequence animation of a character, we want clouds zoom out on scroll and reveal the character.

[mvaneijgen]

Sorry there are over a 100 lines of Javascript here, that is to much for us to look in to, it also seems like you're overwriting the default browser scroll this is only something you can do if you 100% sure of what it is your doing and I would recommend starting without those complication. 

 

There is also an issue in your CSS setting transition: transform 30s ease-out; You should never apply CSS transitions to anything that JavaScript is animating because not only is it horrible for performance, but it'll prolong all the effects because whenever JavaScript updates a value (which GSAP typically does 60 times per second), the CSS transitions interrupt and say "NOPE! I won't allow that value to be changed right now...instead, I'm gonna slowly make it change over time". So it disrupts things, adds a bunch of load to the CPU because you've now got CSS and JS both fighting over the same properties, but let's say you've got a 1-second tween and the CSS transitions are set to take 1000ms...that means what you intended to take 1 second will actually take 2 seconds to complete. 

 

If you want help please make a minimal demo focusing on one issue at a time and your images are not working, which is fine, but then just created some coloured divs, so there is at least something to look at. Hope it helps and happy tweening!