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

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