How to do elements opacity with transition using GSAP ScrollTrigger and in the frame?

[Dukalis]

Hi. Acording to design of site I must to make split screen with left side scrolling text and with right side pinned images, which change acording to text. But this is must be in the frame like on the added image. I tried to find examples. I found on of them simmilar to my design, but cant resolved two problems:
1. How to do change images with transition of opacity
2. How to make this work in a frame with red border

 

I will be gratefull for any help!

 

See the Pen oNJZxZg by abcland (@abcland) on CodePen

[Carl]

Hi and welcome to the GreenSock forums,

 

It seems you found a demo from my ScrollTrigger Express course (38 video lesson) where I teach all the necessary features of ScrollTrigger.

This demo is part of a 5-part video series that goes over every line of code.

 

The reason why the images aren't fading is because you have the animation set to be controlled via scrubbing (scrub:true) but your start and end values are identical so there is no distance to scrub.

//bad

start:"top 50%",
end:"top 50%",



//better

start:"top 50%",
end:"top 40%",    

Here is the modified demo

 

See the Pen XWoMpdb by snorkltv (@snorkltv) on CodePen

 

Frankly I'm not a fan of scrubbing through opacity changes like this as the user can stop while the image is only partially faded in and it looks bad.

I prefer controlling these animations with toggleActions which force the animation to play through in both directions as the trigger enter and leaves.

 

See the Pen zYyZNBv by snorkltv (@snorkltv) on CodePen

 

 

If you need more help understanding the basics of ScrollTrigger and GSAP check out my complete GSAP course bundle. I think you will find the lessons extremely helpful

 

Good luck on your project!

 

Carl

 

 

[Dukalis]

Thanks, Carl for your answer!

It resolved 50% of my problems but I still dont know how to make this scrolling in the frame. I mean red border must be always on the screen (top and bottom too).

[GreenSock]

I'm not sure exactly what you're looking for there, but maybe this?: 

See the Pen GRPWMJo?editors=0110 by GreenSock (@GreenSock) on CodePen

[Dukalis]

Yes, GreenSook! Grate Thanks! It is what I need!