fastest css3 animations
Post on 22-Jan-2018
66 Views
Preview:
TRANSCRIPT
FASTEST CSS3 ANIMATIONS
Berkay Beyaz - @berkaybeyaz6
WHO AM I ?
• At 17• Entrepreneur @Splashup - http://splashup.in• Backend Developer
WHY ANIMATE ?
• Delightful user experience• Hiding possible loading times• For attract attention
SCROLLING
UNPLEASANT UX DELIGHTFUL UX
jQuery way
400px
CSS
.Component {width: 100px;height: 100px;background: red;position: absolute;top: 0;left: 0;
}
HTM
L
<div class=“Component”></div>
JS
$(“.Component”).animate({left: 400}, {duration: 200});
HOW IT WORKS ANIMATE ON JQUERY ?
Css3 fallback requestAnimationFrame()
setInterval()
Dom Manipulation
T H AT ' S A L L R I G H T ?
NOT LIKE THAT
W H AT W E D O N O W ?
VELOCITY.JS• Velocity is an 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
VELOCITY SCHEME
Sync. DOM tween stack to
minimize Layout Trashing
(Recalculate Style)
cache values to minimize DOM
querying
BROWSER SUPPORT
PROGRESSIVE ENHANCEMENT
Old Browsers
+ Basic functionality- UI transitions
Old Browsers
+ Basic functionality+ UI transitions
TESTING ON BROWSERS
RESULTS
S O L U T I O N ?
AUTOPREFIXER• Add the desired vendor prefixes and remove unnecessary in your CSS
• Violates D.R.Y. principle
• Compatible with all browsers
• Using with Grunt
http://bitly.com/2ejNcjs
AUTOPREFIXER
.myComponent {transform: translateX(0);
}
.myComponent{-webkit-transform: translateX(0);-ms-transform: translateX(0);transform: translateX(0);
}
CSS
GEN
ERAT
ED C
SS
Tutorial : http://bit.ly/1SWtDdz
Basic Animations
1. CSS3 TRANSITIONSC
SS
.Component {width: 100px;height: 100px;background: red;-webkit-transition: width 2s; transition: width 2s;
}
.Component:hover {width: 300px;
}
2. CSS3 Transforms
CSS3 TRANSFORMS
Rotate Scale Translate
Allow us to visually manipulate elements (2D & 3D)
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
EXAMPLE CODE
#box{transition: 200ms;
}
.animate-it{
}
CSS
transform: translateX(400px);left: 400px;
lefttransform
3. HARDWARE ACCELERATION
HOW IT WORKS ?
Compute - IntensiveFunctions Sequential
CPU Code
MULTIPLECORES
HUNDREDSOF CORES
APPLICATION CODE
GPU
COMPUTE INTENSIVE FUNCTIONS
• 3D animations: translate3d(5px, 5px, 5px);
• What about 2D animations?
• translateX(400px) == translate3d(400px, 0, 0)
• transform: translateX(400px) translateZ(0);
FORCING HARDWARE ACCELERATION
#box{transition: transform 200ms;
}
.animate-it{transform:
}
CSS
translateX(400px);translate3d(400px, 0, 0);
4 THINGS A BROWSER CAN ANIMATE CHEAPLY
Position : transform: translate(x, y)
Scale :
Rotation :
Opacity :
transform: scale(n)
transform: rotate(deg)
opacity: 0...1
P R O F I L I N G
PROFILING
• Computer display refresh rate: 60Hz
• At 60hz: 16ms to prepare for the next frame
• Chrome Dev tools: Timeline
• Identify possible bottlenecks
• Lag begins to show at: 30Hz
CONSEQUENTLY
Web Animation Translate/Scale 300 Dots – 98.9FPS
jQuery 3 Animation 300 Dots – 21.5FPS
https://www.greensock.com/js/speed.html
C H O O S E I T !
BRIEF
• Don’t animate using 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
THANK YOU
@berkaybeyaz1
@berkaybeyaz6
.in
QUESTIONS ?
top related