Scroll Animation

[edohak]

Hi everyone,

Happy to connect our community.

 

How can I create this type section (image with animation)

Our example here - https://www.ju.st/learn

 

I have attached the screen section of what I need. ()

 

Thanks a lot.

[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 if they'd like - we just want to manage expectations.  

 

If you're looking for ScrollTrigger effects, I'd recommend looking at the demos at https://greensock.com/st-demos and 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. 

[edohak]

Thanks for information

 

See the Pen MWqpYzv by nkwcooha-the-sans (@nkwcooha-the-sans) on CodePen

 

This is my version and I cant use this type - https://www.ju.st/learn

[Rodrigo]

Hi,

 

If you inspect that page with devtools you'll see that they're using a very convoluted system of nested divs with overflow hidden that allows them to move the images inside those boxes to create that particular and great effect:

 

Unfortunately this goes a bit beyond the help we can provide in this free forums, since we don't have the time resources to  tackle specific effects or animations for every user or reverse engineering an existing site.

 

I suggest you to take a good look at the devtools inspector and check how two or three of those are animated in order to create such effect and then you'll be on your way to replicate it. If you have any GSAP related question during the process don't hesitate to ask.

 

Hopefully this is enough to get you started and good luck with the project.

Happy Tweening!