Download to read offline
Fastest css3 animations
- 1. FASTEST CSS3 ANIMATIONS Berkay Beyaz- @berkaybeyaz6
- 2. WHO AM I? • At 17 • Entrepreneur @Splashup - http://splashup.in • Backend Developer
- 3. WHY ANIMATE ? •Delightful user experience • Hiding possible loading times • For attract attention
- 4.
- 5.
- 6.
- 7. CSS .Component { width: 100px; height:100px; background: red; position: absolute; top: 0; left: 0; } HTML <div class=“Component”></div> JS $(“.Component”).animate({left: 400}, {duration: 200});
- 8. HOW IT WORKSANIMATE ON JQUERY ? Css3 fallback requestAnimationFrame() setInterval() Dom Manipulation
- 9.
- 10.
- 11.
- 13. VELOCITY.JS • Velocity isan animation engine • jQuery, it uses its own animation stack that delivers its performance through two underlying principles • It works with and without jQuery. It’s faster than jQuery jQuery jQuery animation partials. Velocity.js
- 15. VELOCITY SCHEME Sync. DOM tweenstack to minimize Layout Trashing (Recalculate Style) cache values to minimize DOM querying
- 17.
- 18. PROGRESSIVE ENHANCEMENT Old Browsers +Basic functionality - UI transitions Old Browsers + Basic functionality + UI transitions
- 19.
- 20.
- 21. AUTOPREFIXER • Add thedesired vendor prefixes and remove unnecessary in your CSS • Violates D.R.Y. principle • Compatible with all browsers • Using with Grunt http://bitly.com/2ejNcjs
- 22. AUTOPREFIXER .myComponent { transform: translateX(0); } .myComponent{ -webkit-transform:translateX(0); -ms-transform: translateX(0); transform: translateX(0); } CSSGENERATEDCSS Tutorial : http://bit.ly/1SWtDdz
- 23.
- 24. 1. CSS3 TRANSITIONSCSS .Component{ width: 100px; height: 100px; background: red; -webkit-transition: width 2s; transition: width 2s; } .Component:hover { width: 300px; }
- 25.
- 26. CSS3 TRANSFORMS Rotate ScaleTranslate Allow us to visually manipulate elements (2D & 3D)
- 27. IDENTIFYING THE BOTTLENECK TOP/LEFT •Might affect the layout • Recalculates style TRANSLATE • Does not affect the element’s neighbors • Does not recalculate style Suitable for layout Suitable for animations
- 28. EXAMPLE CODE #box{ transition: 200ms; } .animate-it{ } CSS transform:translateX(400px);left: 400px; lefttransform
- 29.
- 30. HOW IT WORKS? Compute - Intensive Functions Sequential CPU Code MULTIPLE CORES HUNDREDS OF CORES APPLICATION CODE GPU
- 31. COMPUTE INTENSIVE FUNCTIONS •3D animations: translate3d(5px, 5px, 5px); • What about 2D animations? • translateX(400px) == translate3d(400px, 0, 0) • transform: translateX(400px) translateZ(0);
- 32. FORCING HARDWARE ACCELERATION #box{ transition:transform 200ms; } .animate-it{ transform: } CSS translateX(400px);translate3d(400px, 0, 0);
- 33. 4 THINGS ABROWSER CAN ANIMATE CHEAPLY Position : transform: translate(x, y) Scale : Rotation : Opacity : transform: scale(n) transform: rotate(deg) opacity: 0...1
- 34.
- 35. PROFILING • Computer displayrefresh rate: 60Hz • At 60hz: 16ms to prepare for the next frame • Chrome Dev tools: Timeline • Identify possible bottlenecks • Lag begins to show at: 30Hz
- 36. CONSEQUENTLY Web Animation Translate/Scale300 Dots – 98.9FPS jQuery 3 Animation 300 Dots – 21.5FPS https://www.greensock.com/js/speed.html
- 37.
- 38. BRIEF • Don’t animateusing jQuery • Use autoprefixer or a similar tool • Use Top & Left for the layout only • Move elements using translateX & translateY • Use hardware acceleration (responsibly) • Don’t Guess It, Profile It! • Make CSS3 transitions part of your coding habits
- 39.
- 40.