Jump to content
GreenSock

darkgr33n

scroll trigger - fade element with different durations depending on direction

Recommended Posts

Hey everyone,

 

I've had a few days away from GSAP and seem to have lost what little knowledge I had gained o.O 

I think this should be relatively simple but I seem to be struggling to visualize what's happening.

 

What I'm trying to achieve on my .wrapper element is:

 

  1. Split Text staggers in from 0 opacity. ☑ done
  2. element waits 5 seconds and fades out over 2 seconds ☑ done
  3. As you start to scroll down the page, element fades back in over 1 second ☑ done
  4. continue to scroll down the page as normal
  5. then, when you scroll back up the page - the element should still be visible from #3. 
  6. when you reach the top of the viewport, element should wait 5 seconds and then fade out over 2 seconds (same as in #2)

 

I've tried a number of variations but am clearly struggling. 

 

I know I need to be able to deal with things like people scrolling down the page before the initial animation has finished etc, but i'm obviously not correctly using the onEnter, onEnterBack etc, and at some points had the element hidden due to the initial settings. 

 

I've tried manipulating one timeline, but the current pen has an initial timeline for the split-text coming in, and then fading out -- and then an additional timeline for the quick fade-in and another one for the longer fade-out when you hit the top of the viewport again.

 

I had it working when the toggle actions were a simple play and reverse when you come back in the viewport, but by adding the extra timelines to create the different durations and pause I seem to have fallen down a bit of a rabbit hole ... 

 

I've read through the docs and a few posts but can't seem to get it ?

 

Cheers!

 

 

See the Pen pobPQEx by darkgr33n (@darkgr33n) on CodePen

Link to comment
Share on other sites

Hey darkgr33n. You have a logical issue that you need to decide upon: you're wanting both a "regular" animation and a ScrollTrigger to control the opacity at the same time. I assume you want the ScrollTrigger (fade in) animation to take precedence. I'd probably set it up this way:

See the Pen dyXWEbQ?editors=0010 by GreenSock (@GreenSock) on CodePen

  • Like 1
Link to comment
Share on other sites

Hey Zach,

 

Superb!

 

That's exactly the effect I was looking for -- and has also given me a couple of new pointers for the future too.

It makes total sense  - I wasn't aware you could a) attach a tween to the onEnter/onLeaveBack calls in that way and b) hadn't properly grasped the impact/usage of the "overwrite:true" prop to kill the tween either. I'll make sure I do some reading around that one ;)

 

Many thanks (again!).

 

Cheers!

 

Link to comment
Share on other sites

5 minutes ago, darkgr33n said:

I wasn't aware you could a) attach a tween to the onEnter/onLeaveBack calls in that way

It's not really attaching the animation to the ScrollTrigger - the callback is just a function. So the function fires each time the situation happens (enter for example) and creates a new animation each time.

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