Jump to content
GreenSock

moonIMD

GSAP Scrolltrigger Vertical Timeline

Recommended Posts

HI,

 

I would like to create a vertical animated timeline similar to this  http://mtcubacenter.org/about/history/

 

I have started it, but it's not working properly. Every time I resize it, the start and end markers are not in the right position and sometimes it will duplicate a lot of the start / end markers. As well, when viewing on mobile, the start/ end markers gets all crazy when scrolling up and down.

What am I doing wrong?

 

Is there a better way to do this?

 

I want the timeline section to be fixed and the child elements (the years) to animate in/out when scrolling up/down.

All the paragraph tags are invisible at start and once each enters the viewport, it becomes visible. 

 

 

This is the codepen url: 

 

Thank you!

See the Pen KKQOgBp by moonIMD (@moonIMD) on CodePen

Link to comment
Share on other sites

You were recreating all the ScrollTriggers every time the viewport was resized, so you would end up with a ton of duplicates. You really shouldn't need to recreate everything like that - just use function-based start/end values so that they get called whenever ScrollTrigger.refresh() happens (automatically on viewport resize). Like this: 

See the Pen ZErgBze?editors=0110 by GreenSock (@GreenSock) on CodePen

Link to comment
Share on other sites

Thank you! I did try that way before without the resize event and when resizing the browser, all the start / end markers were in the wrong position. Also when viewing it on mobile phone, the markers are not in the right place (even when reloading the page). What is the issue?

 

Thank you!

Link to comment
Share on other sites

Just want to show some screenshots of what I mean on the resizing issue.

Please find 2 screenshots attached.

 

before-resizing.PNG (screenshot #1)- In this screenshot, the markers are in the correct position

after-resizing.PNG (screenshot #2)- In this screenshot, I have scrolled down to a couple of years, then resized the browser, then scrolled back up to the first year. The markers are in the wrong position.

before-resizing.PNG

after-resizing.PNG

Link to comment
Share on other sites

I noticed a few problems:

  1. You're using CSS transitions on many things. Those can cause problems. Imagine you resize the window and ScrollTrigger is trying to do its measurements to mark the proper start/end points but the CSS transitions are interfering, not allowing the elements to render in their final positions. I would avoid CSS transitions, at least in a scenario like this. 
  2. You are directly setting style.marginTop on various things which probably messes up measurements and positioning when refreshing. If you're going to do that, you should set up an onRefreshInit that resets those values. Remember, in order for ScrollTrigger to do its magic, it basically has to tear down any pinning and roll back any changes it made, then start measuring things and applying the ScrollTriggers top-to-bottom (because the higher ones can affect the position of the lower ones). So if you're altering CSS styles that affect flow, you need to manage those properly. 
Link to comment
Share on other sites

 

1. I will try to use the gsap tween to re-create the animations.

2. To have the 'timeline_container' div animate up and down once it enter or leave the active section, should I not being 'setting style.marginTop' and use gsap tweens (such as gsap.to() gsap.from()) instead. As well, am I correct of animating the 'timeline_container' in the onEnter & onLeaveBack functions?

 

Thanks! 

Link to comment
Share on other sites

Here's a different approach that simplifies various aspects: 

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

  1. It sets up the trigger start/end evenly based on wherever the parent_container's ScrollTrigger starts pinning. This way, we don't even need to worry about reverting other animations that may have shifted the trigger elements around.
  2. Uses GSAP to dynamically tween things. No CSS transitions (though you probably could switch back to CSS transitions for at least some of this if you prefer now that it uses the strategy mentioned in #1 for positioning).
  3. Uses transforms instead of marginTop in order to boost performance (marginTop affects layout which is bad for browser rendering performance)

We normally don't rework projects like this for people, but I wanted to spend some extra time to get you on your way. Maybe it'll help someone else in the future too.  

 

Good luck!

  • Like 2
Link to comment
Share on other sites

Thank you so much for you help on this! It's looking great and it makes sense!

I am just going through your code trying to understand the 'onLeaveBack: () => i || goto(null, 0)'

 

This onLeaveBack is a function when the scroll position moves backward. The 'i' is the index of the section and is it passing that 'i' to the goto()?

But it also has this '||' (OR), so I don't quite understand what this line is doing. 

 

Thanks again for your help!

Link to comment
Share on other sites

11 minutes ago, moonIMD said:

This onLeaveBack is a function when the scroll position moves backward. The 'i' is the index of the section and is it passing that 'i' to the goto()?

But it also has this '||' (OR), so I don't quite understand what this line is doing. 

These are identical functionally:

onLeaveBack: () => i || goto(null, 0)

// same:
onLeaveBack: () => {
  if (i === 0) { // only do this on the FIRST element when leaving in reverse
    goto(null, 0)
  }                 
}

Does that clear things up? 

Link to comment
Share on other sites

Thank you! Yes, it makes sense!

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