Jump to content

Search In
  • More options...
Find results that contain...
Find results in...

Make elements change opacity based on ScrollTrigger position

Recommended Posts

Hi there!


I don't usually use GSAP (mainly bc I don't usually need to animate stuff), but I'm trying to make a thing and cannot figure it out, so I thought about posting about it here. 


The thing is; I have a couple ScrollTrigger created, looping some elements in my DOM. I need to show some information (.main-wrapper__title-wrapper) over the pinned elements, but I need to show the 1st info element in the first three pinned elements, and a 2nd info element in the last two pinned elements.


I cannot figure out how to make the items show or hide based on the scroll position, is this something solvable using GSAP? Am I in the wrong direction?


I made a quick draw about how it should be, hope it helps to make this more easy to understand: 




So, the "A", "B" and "C" elements should have the 1st info element ("Lorem ipsum") visible on start (scrollTop = 0)  and fadeOut around the middle of the "C" element (based on scroll position, I guess), and then the 2nd info element ("Dolor sit amet") can start to fadeIn after that, and stay there, visible.


If you check the Codepen HTML, you'd see a commented .main-wrapper__title-wrapper – that's the 2nd info item, I hide that because it'd make the Codepen even less clear.


Thanks for your time 😇

See the Pen KKVvrBY?editors=0010 by jimmyadaro (@jimmyadaro) on CodePen

Link to post
Share on other sites
37 minutes ago, mikel said:

Hey @jimmy-a,


Welcome to the GreenSock Forum.


This could be a solution





Happy scrolling ...



Hello Mikel! Thanks for your response! Really useful.


I didn't know about autoAlpha, I've seen that being used on TweenMax, didn't know if was compatible with GSAP's core.


 Thanks again, have a great day :) 

  • Like 1
Link to post
Share on other sites

Hey @jimmy-a,



Identical to opacity except that when the value hits 0 the visibility property will be set to hidden in order to improve browser rendering performance and prevent clicks/interactivity on the target. When the value is anything other than 0, visibility will be set to inherit. It is not set to visible in order to honor inheritance (imagine the parent element is hidden - setting the child to visible explicitly would cause it to appear when that’s probably not what was intended). And for convenience, if the element’s visibility is initially set to hidden and opacity is 1, it will assume opacity should also start at 0. This makes it simple to start things out on your page as invisible (set your CSS visibility: hidden) and then fade them in whenever you want.


Kind regards



  • Like 3
Link to post
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.