Jump to content
Search Community

Switching between timelines in sync with the scrollbar position

namisuki test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Hi,

 

I'm working on a parallax scrolling project without any third party libraries like scrollmagic.

 

I'm kinda stuck with switching between timelines during the animation.

 

I would like to play the second timeline right after the black div collides with the main character box.

note: the rotation and timeline switching needs to be in sync with the scroll.

 

please refer the codepen for more details about the code or reply if you need more details.

See the Pen bOGEPe by anon (@anon) on CodePen

Link to comment
Share on other sites

Hi @namisuki

 

I added an info panel to your demo so you can see what's going. It makes debugging a lot easier.

 

Before getting to the switching of the timeline part, there are some issues/questions you should look at first.

 

Your check for the collision will never be true. It's a pixel short because of the border. Notice in my code how I'm adding 151 instead of 150. 

 

Are the animation/timeline changes supposed to happen only once, or every time the scroll position passes a certain break point? For example, if the second timeline is playing, and you scroll up, should it switch back to the first timeline? If so, rotating the building will cause the building's left positional value to change, which might mess stuff up.

 

And what progress value are you going to feed to the second timeline? You can see that the window scroll value goes above 1 after the boxes are colliding. Progress should be a value from 0 to 1.

 

 

See the Pen XoWdqO by osublake (@osublake) on CodePen

 

 

  • Like 5
Link to comment
Share on other sites

Hi @OSUblake

 

Thank you for your reply, 

 

5 hours ago, OSUblake said:

Are the animation/timeline changes supposed to happen only once, or every time the scroll position passes a certain break point?

 

Yes, it's a repeatig animation based on the scroll position. Something like the whole animation plays in reverse when scrolled up.

 

5 hours ago, OSUblake said:

If so, rotating the building will cause the building's left positional value to change, which might mess stuff up.

 

May i know how? I thought the animation would play in reverse? Kind of like the second timline would play in reverse and then it switches back to the first timeline's endpoint and plays in backword in relation to the scrollbar position...if thats not the case could you please help me acheive that?

 

5 hours ago, OSUblake said:

what progress value are you going to feed to the second timeline?

 

Planning to have seperate duration box for each timeline. (The duration box for the first timeline is the #scene-1-duration-container)

 

Thank you so much for your effort.

Have a great day.

Link to comment
Share on other sites

16 hours ago, namisuki said:

May i know how? I thought the animation would play in reverse? Kind of like the second timline would play in reverse and then it switches back to the first timeline's endpoint and plays in backword in relation to the scrollbar position...if thats not the case could you please help me acheive that?

 

I wasn't sure how you wanted the animations to play because it looked like you wanted to use the building's position as way to determine which timeline should be playing. 

 

if(memory_building_position >= main_character.offset().left ){
  //timeline one is over now need to play second timeline while it is binded to the scrollbar
} 

 

So the reason I said rotating the building might mess stuff up is that position values like .offset().left are based on an element's bounding box, which will change during rotation, even on a circle.

 

See the Pen wRvjJL by osublake (@osublake) on CodePen

 

 

Knowing that you want animations to play like ScrollMagic, you don't need to worry about the building's position. A simple way to do scroll timelines is to use a height value for the duration, and a top/y for value for timeline position parameter. Then all you have to do is pass in the window's scroll value to the timeline's .time() method. 

 

See the Pen bOGMaG by osublake (@osublake) on CodePen

 

 

You could do that with a master timeline. Just put all your timeline scenes on the master timeline, and pass in the time value to the master timeline.

 

I did something like that here.

 

See the Pen RjKdLe by osublake (@osublake) on CodePen

 

 

 

 

  • Like 2
Link to comment
Share on other sites

Hi @OSUblake

 

Thank you for your reply, it helped me a lot, great explanation!

 

Here is what i did, I created a master timeline and wrote all the animation inside separate functions with timeline for each and finally added it to the master timeline using the master_timeline.add(function_name()) method.

 

it is demonstrated in your demo here: 

 

See the Pen zdMEEL by GreenSock (@GreenSock) on CodePen

 

Mine edited:

 

See the Pen BvaOwg by anon (@anon) on CodePen

 

 

Thank you so much for you help!!

Edited by namisuki
wrong link of codepen demo
  • Like 2
Link to comment
Share on other sites

  • 9 months later...

@OSUblake

Quote

You could do that with a master timeline. Just put all your timeline scenes on the master timeline, and pass in the time value to the master timeline.

I did something like that here.

 

The problem with your demo is that when the window is resized the window.innerHeight and scrollHeight changes, but the timeline duration has already been set.

 

I can do something like this on resize:

timeline.clear();
addSteps();
update();

But, this only works it the page is first scrolled to the top, otherwise everything is messed up.

 

How would you update the Timeline on window resize?

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