Jump to content
GreenSock

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

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

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

 

 

sketch.png

Link to comment
Share on other sites

Hi @wellygirl,

 

There are certainly some alternatives.
Here is a variant ...

 

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

 

If you need a real candidate for your list ...

 

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

Happy scrolling ...

Mikel

 

 

Edited by mikel
  • Like 4
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.

Mikel

 

 

  • 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

Hi @wellygirl,

 

Look at this pen:

 

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

 

You do not need a 'staggerTo' here.
Just tween the elements piece by piece.

 

Speed: try a height of 2000 or 5000 ...

 

Happy tweening ...
Mikel

  • Like 4
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.
×