Jump to content


Reverse Video with pauses

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

Hello guys,


I am not sure if I am asking in the right place. I wanted to know if GreenSock is the right plugin to do what apple is doing like the attached reference.




I am able to play forward with pauses but not in reverse with pauses. However, if I am right at the end of the video I can play in reverse all the way.


We tried this using a .mov with h264 compression. Is it because it is a streaming format? How is apple doing this?


Thanks all.

Link to comment
Share on other sites

Hello wenhao, and Welcome to the GreenSock Forum!


When i go to that link i'm not seeing a video. When i look at the HTML markup, i see that the animations are connected to the browser scrolling. And when the user scrolls or clicks the control nav (located on the far middle right of the browser), it triggers the animation to go through it's motions.


If you look at the browser inspector you can see the different animation elements animate in and out.. and it is reflected in the HTML markup that changes in the DOM. I'm sorry i'm a little confused on what your asking, since I don't see a video.


Are you trying to have GSAP control the playback time/duration of a video object or HTML5 video tag?

Link to comment
Share on other sites

Hi Jonathan, 


I haven't had time to dig deeply into what Apple is doing.


But I did notice that this video is loading:



i believe they are being crafty and swapping this video out for static images when the video ends.

Link to comment
Share on other sites

Yep.. your right Carl!  I could not find a video anywhere in my inspection.. and that video link you posted above shows that the video is corrupt on desktop in PC Windows 7 Firefox. But on my Android Phone, Galaxy S3, it shows the video with GUI controls, but the duration is 0.00.


I had to look at the reference to an mp4 file in this js file:


Looks like some methods in that script to programmatically controls the video. But yes that is pretty nifty what they are doing. But what they are doing is pretty mysterious and cool. I do see ajax requests getting called on each scroll or click on the side controls.


But I bet that same animation could be done with GSAP, and be more interactive! 


Apple needs to jump on the GSAP train. :)

Link to comment
Share on other sites

After just a little experimentation I can confirm that you can tween the currentTime of an mp4 in Chrome.


This demo uses a repeating TweenMax tween that plays a video forwards and backwards for 2 seconds.




*note the results aren't always perfect. Sometimes it appears to get stuck.


It seems to crap out in the CodePen editor. Try the full view:


  • Like 1
Link to comment
Share on other sites

After further testing, the video that works the best is the Apple one.

Fork my demo and try this as the video source url: http://images.apple.com/media/us/ipad-air/2013/0be12b9f-265c-474c-a0cc-d3c4c304c031/overview/desktop/story/story.mp4


I don't want to be loading in their vids for any of our demos.

Perhaps they encoded it in a special way.

  • Like 1
Link to comment
Share on other sites

I can confirm Carl, that your codepen example above works in Firefox Windows 7 (PC). And the behavior was like in Chrome. Very Nice Carl :)

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.