BROADCASTS.com

In this episode we focus on CSS transitions and animations, what they are, why they both exist, and when you should use one or the other.\xa0\nSegment 1 - Transitions vs Animations\nAdobePress Article - reference link\nTransitions\nOnly have two states (triggered and not triggered)\nAlways run forward when triggered, and backwards when the trigger is removed\nCommon triggers are: hover, link, active, visited, focus, checked, disabled\nCommon use case: hover over a button and have the box shadow get darker as long as the cursor is hovering over it\n\nAnimations\nMore control than transitions\nCan start, stop, pause, run forwards, run backwards\nComplex animations are possible by manipulating various properties within keyframes\nMay be more difficult to manipulate with Javascript\n\nUse animations if you need the complexity\nUse transitions if you have a simple affect that only needs two states (triggered, not triggered)\nSegment 2 - How Transitions and Animations Improve UX\nBuild your site with animations in mind so they don't look tacked on after the fact\nDon't be too flashy - your animations need to have purpose, shouldn't get in the way of the user experience\nDon't overwhelm the user with animations - may cause performance issues, can distract the user\nKeep animations consistent with the associated action - swipes with sliding animation, taps w/ pebble drop in water animation\nSegment 3 - Performance\nToo many transitions or complex animations can cause serious performance issues\nThe browser runs animations better over time (device starts to dedicate resources to the tab, cache builds up) so tests need to be done on a fresh incognito (or equivalent) window to ensure performance is good for first time users\nTest on older devices that may have slow hardware, or may have older browsers due to lack of support for newer updates\nPerformance "hacks" - translate3d, translatez\nMore modern method "will-change"\nCheck out Jos\xe9 Ros\xe1rio\u2019s page on Medium article: https://medium.com/outsystems-experts/how-to-achieve-60-fps-animations-with-css3-db7b98610108 for an in-depth breakdown\n\nSegment 4 - Animation Frameworks\nThree.js\nDependant on WebGL\nFull 3D render capable\nIs complex to start with\nhas been around now for 8+ years so a little bit bloated yet still supported\n\nAnime.js\nFastest/best performance large scale animation library\nExtremely lightweight\nCould replace Three.js due to simplicity and modern architecture\n\nScrollReveal.js\nSpecific library for animation while scrolling\nUsing specific libraries for certain tasks maskes code more lightweight\nUsually easier to implement then a larger more customizable library\n\nWeb News - Inconsistencies and Separation\nMobile versions (app or mobile site) vs Desktop versions (apps or site)\nSeparation of apps (multiple apps - same service/function)\nInconsistent development features in an ecosystem\n\xa0\nPatreon Supporters\nGrigory Rechkin\n\xa0\nYou can find us on...\nFacebook\xa0|\xa0Twitter\xa0|\xa0Instagram\nRSS | Patreon | Spotify\nMedium\xa0|\xa0YouTube\xa0|\xa0GitHub\xa0\nNew! -\xa0Reddit