Jump to content
GreenSock

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

Best way to visualise timeline

Go to solution Solved by nico fonseca,

Recommended Posts

I'm working on timings in my timeline. Struggling a little. I've seen pens where people have created a visual showing overlap on each tween - is this functionality built in somewhere?

If so that would be great, if not any tips on logging out useful info to the console? I'm trying to time different effects overlapping and finding it hard even though I know the code (at least I think I do!!)
 

  • Like 1
Link to comment
Share on other sites

I'm not sure quite what you mean by this.

If you're working with scrollTrigger you can use markers? Maybe that's what you've seen.

You could use callbacks to fire messages to the console, there's no visual overlay though - do you have a minimal demo of what you're trying for me to look at?

  • Like 1
Link to comment
Share on other sites

 

Hey PG1,

 

It may well be that I don't understand your intentions properly.
If you create a timeline with several positioned tweens, then you will see the result of the positioning directly.
The extensive syntax of the options is listed in the DOCS.
In addition, a visualization for better understanding.

 

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

 

Happy positioning ...

Mikel

 

 

  • Like 3
Link to comment
Share on other sites

Double positioning pen recommendations! 🥳

  • Like 1
  • Haha 2
Link to comment
Share on other sites

Hi @PG1

 

Building a robust timeline visualizer would be quite an undertaking. I created a video to explain how the getChildren() method can be used to grab animations from a timeline, get their start times and durations, and then use that info to build a rudimentary visualization

 

 

Once you start throwing in staggers, nested timelines, and tweens that target multiple elements things get complicated fast.

This video is just meant to introduce you to some of the basic concepts. 

 

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