Jazz Up Your React Site With Animations
Presented at Connect Tech 2019
A presentation at Connect.Tech in October 2019 in Atlanta, GA, USA by Anastasiya Flynn
Presented at Connect Tech 2019
I’m Anastasiya Flynn • Developer (.NET, JS) • Live in NH with my family • Cat lady 🐈🐈🐈🐈🐈 🐕
Sitecore is a global company that offers a marketing platform with advanced personalization features.
So… What is it exactly?
• Animations come in many types and magnitudes • They have different goals • Some are subtle, some are in your face shapes and forms.
CSS animations • No external dependencies needed • Can’t create complex physics effects nor imitate realistic motion.
SVG animations • look very sharp because no pixel limitations • unique syntax for animation
Canvas animations • great performance even with complex drawings and interactions
WebGL • used for difficult effects and 3D
More info: https://tinyurl.com/y2689oos
• Micro-interactions • Communicate status and provide feedback to user • Help users see the results of their actions • Navigation • Loading animation - perceived performance • Improve performance • Welcoming • A video/gif
• Does it make the content/interface easier to understand/navigate? • Does it fill in missing data? • Does it reduce cognitive load? • Does it make sense financially?
• Pizazz • Performance theatre • Data density
Know when to break the rules. Does this animation increase conversion rates? • Must have clear understanding of audience • Must have clear understanding of client’s business goals and priorities
Animations are eeeeeeeveeerywhere….
• Help people see results of their actions • Help prevent user error
Screen-capture source: https://www.gatsbyjs.org/docs/
• Guide the user’s attention • Clarify workflow process
Screen-capture source: https://www.gatsbyjs.org/
Getting started is easier than you think!
Look deeper than the feature set – immediate concerns • What’s the syntax/API like? • Is it easy for a team to pick up? • Are costs associated? • Does it require a license?
Look deeper than the feature set – thinking ahead • Is it open source? • How well is this project maintained? • How detailed are the release/migration notes? • Are add-ons available? • What’s the community like? Is there somewhere to go for help?
• Guides the flow of content on the Home page • Breaks up sections of content and refocuses user’s attention
Screen-capture source: https://ionicframework.com
https://www.react-reveal.com/docs/ https://github.com/rnosov/react-reveal
• Tiny library of animations for revealing elements • Subtle way to guide user’s attention • Alternative to modals, sticky navs, etc • Gives you freedom to work with more viewport real estate
• Ultra simple API • MIT license • Supports server side rendering • Cross browser support • SEO friendly • Styled-components friendly (via HOF)
• Reveal on scroll • Carousel • Alerts, errors, etc • Search results • Anything that’s not visible on page-load
LET’S PEEK AT THE DOCS FOR EXAMPLES
• npm install react-reveal • import Fade component into recentPosts • wrap each GraphQL search result in a Fade instance
https://www.react-spring.io/ https://github.com/react-spring/react-spring
Relies on physics-based animations, resulting in an extremely realistic look.
PROS • Cross platform support: web, react-native, react-native-we • Cross browser support • Great maintenance, project moves fast 🚀 • Similar API as styled-component (static data drives initialization of animations)
• npm install react-spring • import {useSpring, animated} from ‘reactspring’ into postPage • animate nav • add trigger to button
Even a single animation can be overkill if it doesn’t add value
A simple list of 14 static elements is presented as bubbles floating across the screen
Screen-capture source: https://ionicframework.com
Code-capture source: https://ionicframework.com
• How long does this really take? • Sometimes it’s ok to break the rules
Screen-capture source: https://ionicframework.com
• Does this animation add value? • Is it helping or just slowing the user down?
Gif credit: Vladyslav Tyzun from Smashing Magazine
• User workflow delays • Performance concerns • User distractions • Element jumpiness • Inconsistencies, hidden elements • Cost
Resources and more to explore
• POSE - prop-driven creation of components that has a styled components feel to it • REACT-TRANSITION-GROUP - uses CSS animations • REACT-MOTION - also uses physics
CODE https://tinyurl.com/y2d85em5
SLIDES https://tinyurl.com/y3c4mdjs
• https://www.gatsbyjs.org/starters/?v=2 (reading open source code is the best resource!) • [Podcast] https://syntax.fm • [Web courses] https://www.leveluptutorials.com/ • [Web courses] https://wesbos.com/courses/ • [PPT Template] SlideCarnival – free for personal and professional use • [Demo cat (Claire)] Adopted from the Buckhead Petsmart They host multiple adoption agencies, they are 👍
Do employers search for ‘Software developer in Atlanta’? No, they search for specific skills Misconception Wider = more opportunity Reality Narrower = more opportunities
https://jss.sitecore.com/
https://sitecore.com/trial (select JavaScript services trial)
