1. When we use animation to bring content into view we can end up with content that’s never visible if animations aren’t supported. That’s not cool! In this episode, I show you a way to avoid this using progressive enhancement and a cute cat. The example is live on codepen here: cdpn.io/IodKn if you’d like to follow along.

    Music from the super happy and upbeat Alpine. Go buy A is for Alpine on Amazon (amazon.com/A-Is-Alpine/dp/B00C2U6E60) or iTunes (itunes.apple.com/us/album/a-is-for-alpine/id636157647).

    # vimeo.com/92054024 Uploaded 1,612 Plays / / 0 Comments Watch in Couch Mode
  2. Write smaller sets of keyframes and get modular with your CSS animations!

    In this episode I cover breaking up your CSS animations into smaller more modular pieces and apply multiple animations to one element. For me this makes it easier to follow your code and makes for more re-useable animations. Two big pluses in my book!

    The example we use is on codepen (cdpn.io/adnKt) and full tutorial details are on my site (valhead.com).

    Music from the super happy and upbeat Alpine. Go buy A is for Alpine on Amazon (amazon.com/A-Is-Alpine/dp/B00C2U6E60) or iTunes (itunes.apple.com/us/album/a-is-for-alpine/id636157647).

    # vimeo.com/89021288 Uploaded 3,128 Plays / / 2 Comments Watch in Couch Mode
  3. A step-by-step tutorial on listening for CSS animation events with JavaScript and the additional details you can get from them! The example we use is live on the lovely codepen.io (cdpn.io/BnAwx) and the full list of links and resources are on my site. In an odd turn of events, there are no cats in this tutorial.

    Music from the super happy and upbeat Alpine. Go buy A is for Alpine on Amazon (amazon.com/A-Is-Alpine/dp/B00C2U6E60) or iTunes (itunes.apple.com/us/album/a-is-for-alpine/id636157647).

    # vimeo.com/86821694 Uploaded 3,335 Plays / / 4 Comments Watch in Couch Mode
  4. # vimeo.com/56734470 Uploaded 3,730 Plays / / 3 Comments Watch in Couch Mode
  5. A short tutorial on what animation-play-state does and one possibly way to use it.

    # vimeo.com/61477511 Uploaded 2,834 Plays / / 0 Comments Watch in Couch Mode

All The Right Moves Screencast

val head Plus

A screencast series of tutorials for animating on the web with your host Val Head. Caution: maybe contain cats and bad jokes.

Browse This Channel

Shout Box

  • Ben Palmer

    Great tutorials Val, very informative and easy to follow. Thanks so much.

    by Ben Palmer

Channels are a simple, beautiful way to showcase and watch videos. Browse more Channels. Channels