mccjo806 Posted January 20, 2022 Share Posted January 20, 2022 Hello, I want the images on sections TWO and THREE to be revealed by changing the flex-grow on .scrubScroll__dark to 0. So it would be: Scroll to section TWO Pin section, as user scrolls down reveal image (.scrubScroll__dark flex-box to 0) Keep scrolling and section THREE appears on top of section TWO I want the same funcionality for section THREE. I tried using onEnter and onEnterBack to call the function to change the flex-grow value, but is seems to run on page load, not on entering the section. I also tried using timeline, but couldn't get that working either. I'm new to gsap in general. Any help would be very much appreciated 🙂 See the Pen gOGJqQM by mccjo806 (@mccjo806) on CodePen Link to comment Share on other sites More sharing options...
akapowl Posted January 20, 2022 Share Posted January 20, 2022 Welcome to the GSAP forums @mccjo806 58 minutes ago, mccjo806 said: I tried using onEnter and onEnterBack to call the function to change the flex-grow value, but is seems to run on page load, not on entering the section. That issue seems to resolve, when you call your changeFlexGrow() in a function on the callbacks // this onEnter: changeFlexGrow(0, child.getElementsByClassName('scrubScroll__dark')) // vs. this onEnter: function() { changeFlexGrow(0, child.getElementsByClassName('scrubScroll__dark')) } See the Pen xxXNNZz by akapowl (@akapowl) on CodePen Also, since (as far as I know) flex-grow is animatable as long as its value is a number (and you already do so by using CSS transitions), you could also just tween it via GSAP. I'm not exactly sure what it is you're after, but as you mentioned scrubbing in the title, here is an example with a scrubbing tween instead. I hope this will help a bit. See the Pen qBPGGqQ by akapowl (@akapowl) on CodePen 4 Link to comment Share on other sites More sharing options...
mccjo806 Posted January 24, 2022 Author Share Posted January 24, 2022 @akapowl thanks very much for your help. And your quick response. I've played around with it over the weekend and can't get this last part to work. The goal is that the slide (e.g. section TWO) is pinned in place while the image is revealed (flex-grow to 0). Once flex grow is 0, the slide remains pinned and the next slide moves on top of it. Effectively it's: Animation 1: flex-grow to 0 Animation 2: next slide moves on top of current slide Slide is pinned for both animations Repeat on section THREE See the Pen zYPOojE by mccjo806 (@mccjo806) on CodePen Link to comment Share on other sites More sharing options...
akapowl Posted January 24, 2022 Share Posted January 24, 2022 Unfortunately, I don't see any of your tries reflected in the codepen. Try thinking of what needs to happen for this to work. First and foremost you will have to make sure that the pinning happens for longer than it does now and also for longer than the tweening part. Since the tween is being scrubbed over the course of a window's height, you want the pin to last for that duration plus another window's height for the scroll-over effect - making the pin's end "+=200%". At first, changing the end to that would have no visual effect, because the section that is supposed to scroll-over still comes in early, so you'll have to find a way to make it come in later - like maybe via a margin-top of a window's height on every section that is supposed to scroll-over. Give it a shot like this - it should work. 4 Link to comment Share on other sites More sharing options...
Solution mccjo806 Posted February 3, 2022 Author Solution Share Posted February 3, 2022 Hey! Sorry for the delay in getting back to you. Got it working! Thanks @akapowl for your guidance. See the Pen LYOYweE by mccjo806 (@mccjo806) on CodePen 2 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