As you scroll, images come slowly from the cross of the screen

[Mustafa Şatıroğlu 2 Likes (Newbie)]

Hello friends. I'm trying to create the animation in the YouTube link. There are 6 images. When the relevant section appears, these images will slowly come from the corners of the screen and settle. When scrolling back up, they will disappear in the same way. How can I achieve this?

 

Do you have an example project, by any chance? I've done a lot of research, but I couldn't make it work

[mvaneijgen 2,480 Likes (Superhero)]

Can you share what you've tried already? We love to see minimal demo's, that way we can see your thought process and thus better help you.

 

Try creating a minimal demo of what you're trying to do, this has two benefits. First this allows you to experiment and try out new ideas,  second, you have an easy version you can share in which anyone could edit and modify the code.

[Mustafa Şatıroğlu 2 Likes (Newbie)]

 @mvaneijgen  Hi.Hello, I shared my html and css codes in codepen.  

See the Pen abRXZLP by mustafasatiroglu (@mustafasatiroglu) on CodePen

 

thing I want to do. When scrolling, to bring the images in the 2nd section exactly as in this link

https://youtu.be/TdF_FFbHXF8

 

[Cassie 5,650 Likes (Superhero)]

Hi there!

 

Quote

Do you have an example project, by any chance? I've done a lot of research, but I couldn't make it work

Could you show us what you've tried yourself or looked into during your research?

We're very happy to help if you're stuck or something in the API isn't behaving as expected, but as we state in the forum guidelines, we don't really have the time or resources to build out solutions or do "show me how to create this effect from this site" tutorials.

Maybe taking a look at the ScrollTrigger docs would be a good place to start?

 

Or this little tutorial video?
 

All scroll triggered animations follow the same concepts really, my advice would be to first build out an animation you're happy with and then attach it to scroll.

If you're super new to GSAP, this article is useful
 

Hope this helps and good luck!