Jump to content
GreenSock

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

Double scroll trigger with change flex-box on scrub

Go to solution Solved by mccjo806,

Recommended Posts

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:

  1. Scroll to section TWO
  2. Pin section, as user scrolls down reveal image (.scrubScroll__dark  flex-box to 0) 
  3. 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

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

 

  • Like 4
Link to comment
Share on other sites

@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:

  1. Animation 1: flex-grow to 0
  2. Animation 2: next slide moves on top of current slide
  3. Slide is pinned for both animations
  4. Repeat on section THREE

See the Pen zYPOojE by mccjo806 (@mccjo806) on CodePen

Link to comment
Share on other sites

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.

  • Like 4
Link to comment
Share on other sites

  • 2 weeks later...
  • Solution

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

  • 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.
×