Jump to content


Examples of "TimelineJSesque" style timeline with TweenLite

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

I have been working on some tutorials with TweenLite, and would eventually like to develop something like TimlineJS (Knight Lab - https://timeline.knightlab.com) but where I could "play through" events along a timeline, and that this could interact with other elements (such as OpenStreetMaps) as part of an immersive interface. 


Do you know if it would be possible to create something like this with TweenLite, or if there are any examples  that have been created in other projects that I could work off of? I have been thinking that adding timeline markers might prove to be too involved with the JS, and was thinking there might be a way to add an excel file just like they do with TimelineJS.

Link to comment
Share on other sites

Looks like a typical carousel/slider, but with some offset markers. Here's a good example to start from, although the slides go vertical. Not sure about the best way to do the markers though. You might want to look at some type of way point or scrolling system like scroll magic or jquery waypoints.


See the Pen kDvmC by bassta (@bassta) on CodePen

  • Like 1
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.