Jump to content
Search Community

A timeline in react using...Gsap? Scrollmagic?

wellygirl 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 everyone,


So I'm looking at making an interactive timeline of famous people in history and there will be hundreds of people with associated data.


I'm using react (gatsby specifically).


I want to be able to map through the data object and render about 10 people at a time on this pathway, and it looks like they are at the back of the path. Then, when the user scrolls down say, the people move forward towards the user, on the timeline. Then when they get to the front of the timeline they fade away. In the meantime more people have appeared behind them as they move forward.

What I think is a size animation, so they get bigger based on trigger points on the screen.  But what the heck do I know??  Theres so much info out there I'm bamboozled.  So what do you think - scrollmagic? gsap? Where do I even start yo?!


Advice please!!!




Link to comment
Share on other sites

Hi @wellygirl,

I've been thinking about how the movement to the left could run more precisely.


Here is a version with stepsEase (unfortunately it jumps):


See the Pen 4c7ca0eff7965f08a95f367803f8b977 by mikeK (@mikeK) on CodePen


Here's the try with a callback. But it does not work in the backward movement (?):


See the Pen b9d5ccfd821b0e479b2192a6c1b24cf4 by mikeK (@mikeK) on CodePen


Hope, you will find your solution.




  • Like 3
Link to comment
Share on other sites

@mikel thats worked a treat, thanks so much. I've made a row of 'men' move forward at the same time, and then disappear.  Perfect. Still unsure how to make it happen faster though? Have tried changing the height and time but nothing much happened. Its slowed down quite a bit now thats its a row of men rather than individuals.  Also, how to get a second row of men to appear when the first row is about half way down the stage?


See the Pen JeOmBq by janie-t (@janie-t) on CodePen


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