In this video I am going to demonstrate how I built my Timeline Visualizer that I used in my Position Parameter video from GSAP 3 Express.
The secret sauce all comes from the timeline.getChildren() method which allows you to get an array of all child tweens and timelines from a timeline.
We can then set up a loop that will give use the startTime() and duration() of each tween. This is all we need to create a visual display of a simple timeline.
Watch the video
Explore the demo
Secret Sauce
As mentioned in the video, for my needs I just needed to stretch and move 3 SVG elements. It’s totally possible to dynamically generate div or rect elements for more complex needs. Give it a shot!
Draggable
This demo uses Draggable which allows you to drag (and optionally throw) DOM elements and SVG elements. It's publicly available for use in your projects. Check out Draggable in the GreenSock Docs.
Learn More About GSAP 3 in my Creative Coding Club
This lesson is part of my course GSAP 3 Beyond the Basics where I take a deep dive into the GSAP API. Get access to over 10 hours of video training and loads of exclusive demos..
The internet is filled with GreenSock tutorials that were made obsolete with the release of GSAP 3. My courses are 100% compliant with GreenSock’s latest syntax and features.
Let me help you take your JavaScript animation skills to the next level. I promise we’ll have plenty of fun along the way.
Join me in my mission to provide high-quality and affordable animation training resources to all.