Tutorial 07

  ## How to Make Smooth Keyframe Animations in After Effects

Tutorial 03

  ## Understanding Masks & Shape Layers

# A deeper explanation

As you can see, the JS does all the work and is lifted almost directly out of the latest Vimeo API playground file (Thanks Brad!). The custom magic happens in the last part:

- We use the .delegate() jQuery method, in case the video is populated using AJAX. This is because dynamically generated content appears after the handlers are bound, so jQuery can't see it. In our case, that means the the video and chapter navigation would stop working.
- From there we execute a callback function on the event click
- In case you bound the data elements to a null link (#), run a prevent default so the URL doesn't change. In my example, I've styled a span instead.
- Grab the player ID and Seek values from the clicked element
- Target the Froogaloop object ($f) and pass a player ID by reference, then use the api to jump to the seek value.
- Profit.

Critically, each player needs to include both the ?api and ?player_id call in the URL reference, and its iframe ID needs to mach exactly. In a CMS application, that would all be dynamically generated. In a static application, you’ll have to be a little careful with this or the chapter link won't work correctly. The production implementation is up to you.

In the navigation itself, the data-seek and data-id attribute are the key. The seek time (data-seek) is in seconds, which a CMS could calculate on the fly using the entered minute-second timestamp (minutes*60 + seconds). It's worth noting that in many cases you'll want to tune things more finely and jump to a marker like 52.35 seconds.

Finally, the data-id attribute is the matching player ID from the actual iframe. If you copy & paste the NAV, you could end up targeting the wrong video.

As always, I’m available in the comments if you have questions, bugs, or things to add.