[ScrollTrigger fade image in place scroll text]

Nevermind, I found a way 😃

using position: sticky and a wrapper div 👍

 

so far, i had some small bumps along the way, but I really enjoy using GSAP.

keep up the great work!

[ScrollTrigger fade image in place scroll text]

Hi Zach, 

 

thanks for your help, I ended up thinking of my own way of achieving what I want, you can see the end result in the updated codepen at the top.

The only problem I have right now, is that I would want the animation to start at "top bottom" or "top center" but, when I do that in combination with "pin: true"  the outer block also gets pinned at either "bottom" or "center". Is there any way, I can pin the block at a different position than the start of the timeline? 

[ScrollTrigger fade image in place scroll text]

That looks quite similar. Thank you!

[ScrollTrigger fade image in place scroll text]

Hi Zach, thanks for your reply!

 

Right now, all sorts of things aren't working the way I would want them to. 😛

I uploaded a video of what I could do in Figma prototypes, but with clicks, rather than scrolling:

Ideal Animation video

 

Currently, I am animating the whole ".point" divs but ideally I would like to have the images on the right always stay in the center of the screen, and only change via cross-fade. And only the text should be moving up.

 

Also I am using "position:sticky" instead of  "pin:true" because pin:true pins it to the center of the window instead of the top.

 

I'll be reading through the common mistakes link, to see where I can improve 😊

[ScrollTrigger fade image in place scroll text]

Hey guys,

 

this is my first time working with GSAP and ScrollTriggers. Up until now, I usually hacked together my own scroll handler and was never quite happy with the result.

I'm having some troubles getting the exact effect I want to happen.

What I would want to happen ideally is the following.

When first scrolling to the section with the text and image, I would like for them both to fade in from {opacity 0, translateY: 100px}.

For the following ".point" divs, I would want the image on the right to be replaced with the next image with a cross fade, and the text should also cross fade but also with some vertical motion (e.g. new text from {translateY:100px} old text going to {translateY: -100px}.

 

The indicators on the left should ideally also change to active, as soon as we reach the section.

 

From what I have seen in previous discussions, this community seems to be quick to help,

Thank you in advance!

 

 

See the Pen eYZpoXa by flowgrow (@flowgrow) on CodePen