Animating content based on ScrollTrigger progress.

[Akish]

I'm trying to replicate the same scroll behavior as on the section on this website: https://www.evnex.com/

The opacity on the elements works based on the scroll progress of the section. I've tried to get it as close as possible but it's not exactly working as intended. I'd highly appreciate some guidance. 

See the Pen VwdOLje by akishjoseph (@akishjoseph) on CodePen

[GSAP Helper]

Hi there! Thanks for providing a minimal demo. Could you provide more detail about exactly what you're struggling with? 'it's not exactly working as intended' is rather difficult for people to help with. Here are some tips that will increase your chance of getting a solid answer:
 

• A clear description of the expected result - "I am expecting the purple div to spin 360degrees"
• A clear description of the issue -  "the purple div only spins 90deg"
• A list of steps for someone else to recreate the issue - "Open the demo on mobile in IOS safari and scroll down to the grey container" 
• A minimal demo - if possible, using no frameworks, with minimal styling, only include the code that's absolutely necessary to show the issue. Please don't include your whole project. Just some colored <div> elements is great.

 

[Rodrigo]

Hi,

 

You need to pin the entire section and forget about position sticky. Then just create two different ScrollTrigger animations, one for the opacity of the first text element and then a second one for the rest of the texts and the images. The second ScrollTrigger should be the one that pins the section, the first one shouldn't be pinned.

 

Something like this:

See the Pen MWXdXQZ by GreenSock (@GreenSock) on CodePen

 

Hopefully this is enough to get you started.

 

Happy Tweening!

[Akish]

On 12/12/2022 at 10:33 PM, Rodrigo said:

Hi,

 

You need to pin the entire section and forget about position sticky. Then just create two different ScrollTrigger animations, one for the opacity of the first text element and then a second one for the rest of the texts and the images. The second ScrollTrigger should be the one that pins the section, the first one shouldn't be pinned.

 

Something like this:

 

 

 

Hopefully this is enough to get you started.

 

Happy Tweening!

This works like a charm on desktop but on mobile there's way too much blank space below the section. The images are hidden on mobile or screens < 992px. 

[Rodrigo]

Hi,

 

Please provide a minimal demo for this setup in order to have a better look at what could be the issue.

 

Also take a look at GSAP MatchMedia in order to revert the desktop ScrollTrigger instance and create a new one for the layout you have in small screens:

https://greensock.com/docs/v3/GSAP/gsap.matchMedia()

 

Happy Tweening!