Jazz Up Your React Site With Animations

Presented at Connect Tech 2019

HELLO! 👋

I’m Anastasiya Flynn • Developer (.NET, JS) • Live in NH with my family • Cat lady 🐈🐈🐈🐈🐈 🐕

The Technical Evangelists of Sitecore

Sitecore is a global company that offers a marketing platform with advanced personalization features.

WEB ANIMATIONS

So… What is it exactly?

THE ILLUSION OF LIFE ON SCREEN

• Animations come in many types and magnitudes • They have different goals • Some are subtle, some are in your face shapes and forms.

ALTERNATIVES TO JS ANIMATIONS

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

GUIDELINES TO USING ANIMATIONS 👍💯

• 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

THE “👍💯” ANIMATION TEST

• 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?

WHEN TO QUESTION ANIMATION 🤷

• Pizazz • Performance theatre • Data density

THESE ARE GUIDELINES, NOT LAWS

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

LET’S CHECK OUT SOME EXAMPLES

Animations are eeeeeeeveeerywhere….

MICROINTERACTION ANIMATION

• Help people see results of their actions • Help prevent user error

Screen-capture source: https://www.gatsbyjs.org/docs/

PIZAZZ ANIMATION

• Guide the user’s attention • Clarify workflow process

Screen-capture source: https://www.gatsbyjs.org/

ANIMATION LIBRARIES

Getting started is easier than you think!

CHOOSING A LIBRARY

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?

CHOOSING A LIBRARY

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?

NAVIGATION ANIMATION

• 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

REACT REVEAL

https://www.react-reveal.com/docs/ https://github.com/rnosov/react-reveal

REACT-REVEAL >> OVERVIEW

• 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

REACT-REVEAL >> PROS

• Ultra simple API • MIT license • Supports server side rendering • Cross browser support • SEO friendly • Styled-components friendly (via HOF)

REACT-REVEAL >> USE-CASES

• 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

DEMO - React Reveal

• npm install react-reveal • import Fade component into recentPosts • wrap each GraphQL search result in a Fade instance

DEMO - React Reveal

REACT SPRING

https://www.react-spring.io/ https://github.com/react-spring/react-spring

WHY REACT SPRING?

Relies on physics-based animations, resulting in an extremely realistic look.

REACT-SPRING

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)

DEMO - React Spring

• npm install react-spring • import {useSpring, animated} from ‘reactspring’ into postPage • animate nav • add trigger to button

DEMO - React Spring

ANIMATION OVERKILL

Even a single animation can be overkill if it doesn’t add value

PIZAZZ GONE WRONG?

A simple list of 14 static elements is presented as bubbles floating across the screen

Screen-capture source: https://ionicframework.com

PIZAZZ GONE WRONG?

Code-capture source: https://ionicframework.com

PIZAZZ GONE WRONG?

• How long does this really take? • Sometimes it’s ok to break the rules

Screen-capture source: https://ionicframework.com

EVEN MORE PIZAZZ

• Does this animation add value? • Is it helping or just slowing the user down?

Gif credit: Vladyslav Tyzun from Smashing Magazine

ANIMATION OVERKILL SYMPTOMS

• User workflow delays • Performance concerns • User distractions • Element jumpiness • Inconsistencies, hidden elements • Cost

WRAPPING UP

Resources and more to explore

OTHER LIBRARIES 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

TODAY’S RESOURCES

CODE https://tinyurl.com/y2d85em5

SLIDES https://tinyurl.com/y3c4mdjs

GENERAL RESOURCES

• 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 👍

Corey House’s Keynote: “The Death of the Full Stack Developer”

Do employers search for ‘Software developer in Atlanta’? No, they search for specific skills Misconception Wider = more opportunity Reality Narrower = more opportunities

I invite you to check out if a Sitecore specialization is for you

https://jss.sitecore.com/

https://sitecore.com/trial (select JavaScript services trial)