Jump to content
Search Community

Timeline animation - adding video

insideout 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

It certainly is ... but how you would do it would really depend on what the requirements are.


I have a system I built for digital displays (using TimelineLite) which makes use of image slideshows, video, and embedded (iframe) content. Each item (slideshow, video, iframe) is placed within its own tl added to a master timeline. The duration of the video is used to set the duration of its parent tl while animating the top property (from 0 to 0). I use the video state "canplaythrough" to affect the state of the timeline (pause, resume) so that the tl position stays in sync with the video playhead (to account for buffering). You can introduce event listeners for other states to accommodate scrubbing and such ... but I only needed playback.

  • Like 1
Link to comment
Share on other sites

Hi and welcome to the GreenSock forums.


In addition to Shaun's great advice, the GSAP API has no features that relate specifically to video in any way.

However, you can add callbacks to a timeline that can trigger your video to play or pause at any time.


Here is a basic example that uses audio: http://codepen.io/GreenSock/pen/waBpJJ?editors=101

The same concepts apply to video.


You can read more about the call() method here: http://greensock.com/docs/#/HTML5/GSAP/TimelineLite/call/

  • 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.
  • Create New...