Trigger Animation Only When Scrolling Back To Page Top

[Ali Farooq]

Hi All,

I've been using GSAP for 2 months now and It has saved me a LOT of time and headache. It is an awesome library. Recently I discovered that I can use Scroll Magic library with GSAP and I've been trying to make an animation using both of them.

Here's the link to my codepen demo:

 

See the Pen wqYGwz by Ali_Farooq_ (@Ali_Farooq_) on CodePen

 

The idea is that as we scroll down the page, the text "DESIGNWORX" should translate to the left and at the same time opacity should animate from 1 to 0. I've achieved that. The problem I'm facing is that I want to reverse this animation i.e the text "DESIGNWORX" should translate back and opacity animate from 0 to 1 ONLY when I reach the top of my page while scrolling back.

I've tried to do that by using "triggerHook" method as you can see in my pen but sadly I've failed. I've also searched all over the internet for answers but all in vain. I was hoping if someone could help me in this regard. I'm not an expert in javascript and would really appreciate any tips or help.

Thanks in advance!

Ali

See the Pen wqYGwz by Ali_Farooq_ (@Ali_Farooq_) on CodePen

[PointC]

Hi @Ali Farooq

 

Welcome to the forum and thanks for joining Club GreenSock.

 

I'm assuming you're not talking about the animation simply reversing while the user scrolls, right? You want the reverse animation to auto play once the user has scrolled completely to the top and not be based on the user scroll speed, correct?

 

This could be done by using ScrollMagic's events. I think maybe checking if the event.progress is back to 0 would work to trigger the reverse animation. I do see some problems with this approach though. Right now you're using a duration of 1,000 which works fine, but what if the user scrolls down just a few pixels and then back to the top? You'd have to animate it back into position and figure out the best duration to use based on the progress of the tween so far. That might be a fraction of a second or more depending on the effect you're after. This is not to say it can't be done because it certainly can, but I'm wondering if skipping the duration in the ScrollMagic scene might be a better approach?

 

You could simply create the tween and let it run for its normal duration rather than based on user scroll. You'd then set the trigger a few pixels from the top of the page and set reverse to true. All problems solved and get a nice smooth animation every time. That's just my two cents worth though. 

 

If you want to use some of ScrollMagic events, here's some more info:

http://scrollmagic.io/docs/ScrollMagic.Scene.html#event 

 

Hopefully that helps. Happy tweening.