Fastest CSS3 Animations slide for owtg 2016 , I'm doing in here show jquery animate performance and css3 animate and transform comperance

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. SCROLLING
UNPLEASANT UX DELIGHTFUL UX

5. jQuery way

6. 400px

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 WORKS ANIMATE ON JQUERY ?
Css3 fallback requestAnimationFrame()
setInterval()
Dom Manipulation

9. THAT'S ALL
RIGHT ?

10. NOT LIKE THAT

11. WHAT WE DO
NOW ?

13. 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

15. VELOCITY SCHEME
Sync. DOM
tween stack to
minimize Layout
Trashing
(Recalculate Style)
cache values to
minimize DOM
querying

17. BROWSER SUPPORT

18. PROGRESSIVE ENHANCEMENT
Old Browsers
+ Basic functionality
- UI transitions
Old Browsers
+ Basic functionality
+ UI transitions

19. TESTING ON BROWSERS
RESULTS

20. SOLUTION ?

21. 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

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. Basic
Animations

24. 1. CSS3 TRANSITIONSCSS
.Component {
width: 100px;
height: 100px;
background: red;
-webkit-transition: width 2s;
transition: width 2s;
}
.Component:hover {
width: 300px;
}

25. 2. CSS3 Transforms

26. CSS3 TRANSFORMS
Rotate Scale Translate
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. 3. HARDWARE ACCELERATION

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 A BROWSER CAN ANIMATE
CHEAPLY
Position : transform: translate(x, y)
Scale :
Rotation :
Opacity :
transform: scale(n)
transform: rotate(deg)
opacity: 0...1

34. PROFILING

35. 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

36. CONSEQUENTLY
Web Animation Translate/Scale 300 Dots – 98.9FPS
jQuery 3 Animation 300 Dots – 21.5FPS
https://www.greensock.com/js/speed.html

37. CHOOSE IT !

38. 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

39. THANK YOU
@berkaybeyaz1
@berkaybeyaz6
.in

40. QUESTIONS ?