Jump to content


Is it possible to use CSS variables in scroll trigger to define trigger location?

Moderator Tag

Recommended Posts


I have a fixed image fading out on the scrolling of another element. The location at which the fading-out starts ideally should depend on the height of the image itself. This is set by a css variable "var(--image-height)", whose value changes depending on different screen sizes (for example it is 50vh on large screens, and 75vh on mobile screens). I was wondering if it possible to use that variable directly in the scroll trigger-markup, like in the example below (assuming the distance is relative to the top of the screen)?


gsap.to('.fadeout', { autoAlpha: 0,
    scrollTrigger: {
        trigger: '.scrollTriggerFadeOut',
        start: 'top var(--image-height)',
        scrub: true,
        end: 'top top',
        markers: true

Link to comment
Share on other sites

It's pretty tough to advise without a minimal demo - Would you please provide a very simple CodePen or CodeSandbox?


Please don't include your whole project. Just some colored <div> elements and the GSAP code is best (avoid frameworks if possible). 


Here's a starter CodePen that loads all the plugins. Just click "fork" at the bottom right and make your minimal demo

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


Once we see an isolated demo, we'll do our best to jump in and help

Link to comment
Share on other sites

Ok, fair enough, sorry about that! I made the codepen:

See the Pen dymxoJO by RaoulUnger (@RaoulUnger) on CodePen

The basic idea is that the lower element scrolls under the fixed top (beige) element. While doing so, the beige element should fade out.

The issue: the height of the top element is set through a css-variable '--fading-element-height', and varies with screen width (as shown in the codepen). Therefor the trigger point for the fading-out action should also relocate. The question: can this be done by using a css-variable in the Greensock markup? In the present codepen it does not work (Greensock doesn't recognize it, and assumes I meant 'top top').


If I use 'top center' instead of 'top var(--fading-element-height)' it works fine, but fixes the trigger point to the center on all screens.

Hope I made things more clear now! Sorry if I ask the obvious, I looked everywhere but it's so easy to overlook the right answer...



Link to comment
Share on other sites

Thank you very much! I got it working on my site. Not in first instance, because I had the JS-script running before declaring the css variable.... Once I changed the order of things, everything works fine. Coding is so logical ;-) 

Thanks also a lot for the bonus tip on animating css variables!

There is one very weird thing going on the codepen: in the line of code you altered you used ` ` where I used ' ' (so slanted vs straight quotation marks):

start: `top ${property}`,

When I replace those ` ` with  ' ' in the pen, scrolltrigger still works, but the variable is no longer recognised (so the trigger-location is back at the top)

This seems strange to me, as the ` ` are not the standard quotation marks you get when typing (at least not a mac). Also, why would the property code no longer work when using the straight quotations marks, where they work fine everywhere else?
I tested this in safari, chrome and firefox: everytime the same result.


Link to comment
Share on other sites

Everything inside ' ' or " " is called a string but when you change these to backticks ` ` it's transformed to a template literal that it's still a string but it gives you the option to add variables inside it and supports multiline strings. It's just sugar syntax to make the code more readable. 


For short: 

`top ${property}` can be easily replaced to 'top ' + property or "top " + property


You can read more about template literals here: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals


If the trigger location is set top it may not find that css variable ( check for typos ). Try to log it in your website and see if it outputs something.


See the Pen oNqKoWo by danielmtd (@danielmtd) on CodePen



  • Like 3
Link to comment
Share on other sites

Sorry, the moment I hit enter on my earlier reply I realised that order might be the issue, and it was and everything worked fine (Murphy's Law). Thanks anyway!

And thanks also for the information about the backticks and template literals (first time I hear that word, and I'm a typographer ;-). Learned so much today!

  • Like 1
Link to comment
Share on other sites

Sorry to bother you again... I got everything on the website working as it does in the codepen.


But  - I hadn't noticed yet that the ScrollTrigger behaviour in the codepen is not responsive. The variable '--fading-element-height' has vh for a unit. The beige elements therefor changes size when the viewport is dragged to a less wide or less high size. The trigger location should also relocate because it uses the same variable. Instead I takes a fixed position, regardless of the viewport being resized after loading (in either dimension). Only when the page is renewed does the trigger location take its correct position again.


This also means the media query (where the variable gets a different value) has no effect.

Any thoughts?


Link to comment
Share on other sites

You're not a bother no worries. I was in your place as well.

Just make it a function and call it in the start ( it can be a method as well) . Also you can refresh the tween on resize for a smoother transition on height change. Without it still works but the refresh is debounced.




See the Pen ZExgQar by danielmtd (@danielmtd) on CodePen


  • Like 2
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.