Jump to content
Search Community

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

Dukalis test
Moderator Tag

Go to solution Solved by GreenSock,

Recommended Posts

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

Link to comment
Share on other sites

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.


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


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!





  • Like 3
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...