HELP!!! GSAP scroll animation with scale image with transform to next section slider [GSAP ScrollTrigger animate image on scroll pin center reduce size fade out show slider images]

[itzo]

 

Hello friends! I wanted to create an animation using GSAP and ScrollTrigger, but I can't. The essence of the animation is that when scrolling, the large picture is fixed in the center of the screen and decreases.

Then, when the user scrolls to the section with the slider, by default these slides are transparent.

As soon as the user scrolls to the slider, this fixed picture should decrease to the size of the pictures from the slider, and then from 1 fixed picture, 3 others should move out from under it to take the place of the pictures of the sliders, after that the title and description should appear in the slider.

I was able to fix the picture, but I can't do anything further. Tell me how to do it. Thanks in advance!

 

That is, when the user scrolls the page and sees a large picture in the middle of the screen, the picture itself should be fixed.
Then, when scrolling down, it should decrease (I think it should decrease to the size of the pictures that are located in the slider)

Then the user scrolls down and sees the section with the slider. Initially, the slides are transparent by default. But we see a fixed picture in the center (which we fixed earlier). And as soon as it becomes at the level of the pictures in the sliders, 4 pictures should come out of this picture (possibly under 1 large one, place 3 more that will be transparent). And these pictures should be placed in the place of the slide pictures, after that the title and description should appear in the slides.

See the Pen emOVgxm by romio2024 (@romio2024) on CodePen.

[GSAP Helper]

Howdy! I don't have a lot of time right now to dig into everything here, but I wanted to offer you some quick advice about how to get the most out of these forums...

 

Keep it simple. Don't list a bunch of requirements ("it should ___, and ____, and then also ____ while _____ ..." - that's too difficult to follow). Just pick the very first thing and see if you can make that work. If you get stuck, post one question focused on that one piece, like "how can I pin each section one at a time?" Keep your CodePen focused only on that one piece with as little code/markup as possible. Then once that's answered, move on to your next question/problem. 

 

Baby steps 

 

Before you know it, things will fall into place one at a time.

 

You'll get a lot more people willing to help you if you keep things very simple and clear. A well-crafted minimal demo is GOLD around here - you'll get people falling over themselves to help you if you make a CodePen that's super clear and isolates the issue. Explain exactly how to reproduce the problem, like "scroll down to the blue section and notice how it pins before it hits the top of the viewport" for example.

 

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. 

 

Don't worry - this community has got your back when it comes to GSAP-specific questions. I just wanted to provide some pointers on how to help us help you. 

[Rodrigo]

Hi,

 

This demo shows a simple way to scale down an image with ScrollTrigger while keeping it pinned until the next section:

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

 

Hopefully this helps

Happy Tweening!