Jump to content
GreenSock

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

Reset triggered scene when scrolled past

Recommended Posts

Hello!

 

I'm building a timeline animation with a fixed layout on scroll. For each of the three sections when you scroll into view 100vh their content slides up (splittext). As I'm using a fixed layout and z-index, each additional scene is layering directly on top. Is it possible to revert previously triggered scenes back their original positions (hidden) when their trigger is scrolled out of view? I tried using .set() but it was glitching inconsistently showing more than one at a time.

 

Thanks

See the Pen XWbNpRQ by kwinton (@kwinton) on CodePen

Share this post


Link to post
Share on other sites

Hey kwinton and welcome to the GreenSock forums! Thanks for being a Club GreenSock member. We couldn't do what we do without people like you!

 

That's quite a lot of markup. I hope ScrollMagic didn't make you put all of that there - it's simple to get the same effect without ScrollMagic :) 

 

Your code could benefit greatly by using functions a bit. Anytime you find yourself repeating the same code over and over and switching one or two things, thing about making a function instead :) This will help you keep a key tenant of programming: being DRY (don't repeat yourself). I would likely make a function to select all containers matching the same format (likely using a classname to differentiate) and then inside of that function split the necessary text and create the timelines. 

 

To answer your question, one option would be to add a tween to the start of the timeline that's nested after the one that is going away. So in the beginning of your second timeline, animate the stuff from the first timeline and then animate the things in the second timeline. I made a simple example with just a fade but it could be any outro animation:

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

Share this post


Link to post
Share on other sites

Hey Zach - Thanks for your help! Will definitely consider functions. I'm  very new to scripting, so lots of trial and error on my end atm. 

 

Could you point me in the right direction when you say " it's simple to get the same effect without ScrollMagic"? I can start researching as an alt to ScrollMagic.

 

Thanks so much!

Share this post


Link to post
Share on other sites

Here's a demo using the intersection observer API to play an animation every time the user scrolls down:

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

 

Mikel did something similar in this thread:

 

You'd have to add the reverse of the animation on scroll up enter but that's pretty simple to add (I even have a space for it in my demo).

Share this post


Link to post
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.

×