Upgrade to Pro — share decks privately, control downloads, hide ads and more …

The Return of the Carriage Return

The Return of the Carriage Return

How Frontlab was asked to build a continuous, full-screen, interactive animation for a client and the hilarity that ensued. A tale of feature detection, CSS animations and transitions, scripted animation, hardware acceleration and performance.

On the occasion of the Fronteers Jam Session, 3 October 2012. These slides make a lot more sense in the socio-economic context of this video: http://vimeo.com/channels/fronteers12/51897355 #zeitgeist

19f565f05a5d2e98d4416d1db627bf76?s=128

Jan van Hellemond

October 03, 2012
Tweet

More Decks by Jan van Hellemond

Other Decks in Technology

Transcript

  1. frontlab.nl @frontlab jan@frontlab.nl @jvhellemond Jan van Hellemond The Return of

    the Carriage Return * Disclaimer: title of talk not related to content
  2. 1. Full-screen 2. Continuous 3. Interactive 4. Smooth Requirements: 6.

    Internet Explorer 7+ 5. Fancy 3D effects
  3. 1. Full-screen 2. Continuous 3. Interactive 4. Smooth Requirements after

    “the talk”: 6. Internet Explorer 7+ Internet Explorer 8+ 5. Fancy 3D effects
  4. Viewport Content overflow Viewport ?

  5. Original Clone Original

  6. Original Clone 1 Clone 2

  7. A B C

  8. ?

  9. Begin End

  10. End = Beginning

  11. 1. CSS with hardware acceleration 2. CSS without hardware acceleration

    *1 3. Scripted based on CSS transforms 4. Scripted based on scrolling *2 *1 Performance takes a hit *2 Smoothness takes a hit, “choppy” Animation fallback stack:
  12. @keyframes slide-left { from { transform: translateX(0); } to {

    transform: translateX(-5000px); } } .gpu .ribbon-play #ribbon-viewport { animation: slide-left 20s linear infinite; } #ribbon-canvas:hover { animation-play-state: paused; } .gpu .ribbon-slow #ribbon-canvas{ animation-duration: 80s; } .gpu .ribbon-fast #ribbon-canvas{ animation-duration: 40s; } CSS animation:
  13. var scroll = function(duration){ var offset = 5000; ribbon.stop(); ribbon.animate(

    {scrollLeft: offset}, duration, "linear", function(){ this.scrollLeft = 0; scroll(duration); } ); }; Scripted animation (scrolling):
  14. The Return of the Carriage Return frontlab.nl @frontlab jan@frontlab.nl @jvhellemond

    Jan van Hellemond http://slideshare.net/frontlab