Jazz Up Your React Site With ✨Animations✨

A presentation at Connect.Tech in October 2019 in Atlanta, GA, USA by Anastasiya Flynn

Slide 1

Slide 1

Jazz Up Your React Site With Animations

Presented at Connect Tech 2019

Slide 2

Slide 2

HELLO! 👋

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

Slide 3

Slide 3

The Technical Evangelists of Sitecore

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

Slide 4

Slide 4

WEB ANIMATIONS

So… What is it exactly?

Slide 5

Slide 5

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.

Slide 6

Slide 6

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

Slide 7

Slide 7

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

Slide 8

Slide 8

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?

Slide 9

Slide 9

WHEN TO QUESTION ANIMATION 🤷

• Pizazz • Performance theatre • Data density

Slide 10

Slide 10

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

Slide 11

Slide 11

LET’S CHECK OUT SOME EXAMPLES

Animations are eeeeeeeveeerywhere….

Slide 12

Slide 12

MICROINTERACTION ANIMATION

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

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

Slide 13

Slide 13

PIZAZZ ANIMATION

• Guide the user’s attention • Clarify workflow process

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

Slide 14

Slide 14

ANIMATION LIBRARIES

Getting started is easier than you think!

Slide 15

Slide 15

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?

Slide 16

Slide 16

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?

Slide 17

Slide 17

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

Slide 18

Slide 18

REACT REVEAL

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

Slide 19

Slide 19

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

Slide 20

Slide 20

REACT-REVEAL >> PROS

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

Slide 21

Slide 21

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

Slide 22

Slide 22

DEMO - React Reveal

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

Slide 23

DEMO - React Reveal

Slide 24

Slide 24

REACT SPRING

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

Slide 25

Slide 25

WHY REACT SPRING?

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

Slide 26

Slide 26

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)

Slide 27

Slide 27

DEMO - React Spring

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

Slide 28

DEMO - React Spring

Slide 29

Slide 29

ANIMATION OVERKILL

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

Slide 30

Slide 30

PIZAZZ GONE WRONG?

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

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

Slide 31

Slide 31

PIZAZZ GONE WRONG?

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

Slide 32

Slide 32

PIZAZZ GONE WRONG?

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

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

Slide 33

Slide 33

EVEN MORE PIZAZZ

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

Gif credit: Vladyslav Tyzun from Smashing Magazine

Slide 34

Slide 34

ANIMATION OVERKILL SYMPTOMS

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

Slide 35

Slide 35

WRAPPING UP

Resources and more to explore

Slide 36

Slide 36

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

Slide 37

Slide 37

TODAY’S RESOURCES

CODE https://tinyurl.com/y2d85em5

SLIDES https://tinyurl.com/y3c4mdjs

Slide 38

Slide 38

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 👍

Slide 39

Slide 39

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

Slide 40

Slide 40

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)

Slide 41

Slide 41

THANK YOU!! 🥰