bartmc Posted February 22, 2022 Share Posted February 22, 2022 Hello All, I've forked the ScrollTrigger Simple Parallax Sections demo ( See the Pen QWjjYEw by GreenSock (@GreenSock) on CodePen ) to modify it to create a slightly different reveal. My fork works just the way I'd like it to, but when I resize the browser my vertical spacing goes awry. I tried adding invalidateOnRefresh: true to the triggers, but that didn't work. So I think I need a function to make the sizes re-calculate when the window resizes, but I can't figure out where/how to do it. I also apparently need to find a good tutorial on using functions with ScrollTrigger triggers ; ) Any help much appreciated! See the Pen oNodmeZ by bartmc (@bartmc) on CodePen Link to comment Share on other sites More sharing options...
Solution elegantseagulls Posted February 23, 2022 Solution Share Posted February 23, 2022 So I might be missing something here, but why not just use background-attachment: fixed; in your CSS instead of gsap to animate the background-position to be fixed? I'd look at the ScrollTrigger docs on using callbacks for using functions in your ScrollTriggers. 2 Link to comment Share on other sites More sharing options...
bartmc Posted February 23, 2022 Author Share Posted February 23, 2022 Forehead-slap! Yes - I gave the background divs background-attachment: fixed; and it works perfectly. No scrolltrigger required. Thank you elegantseagulls! 1 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now