A presentation at Connect.Tech in 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)
So you’ve learned React and you are able to map static designs to functional webpages - cool! The next part of your journey is learning how to add animations to your page. Through animations, you’ll make your pages more engaging and more intuitive for your end-users, and your clients will be able to create goal-driven content journeys.
In this session, I will introduce you to a few of my go-to libraries for animations. You will learn how to use these libraries to add animations to your pages. Also, you will learn animation best practices, and how to avoid animation overkill.
The following resources were mentioned during the presentation or are useful additional information.
React animation library
React animation library
Using JavaScript for animation is not the only option; there are several other alternatives. This articles is a great overview of the various animation options.
Commit that shows what changes needed to be made to a Gatsby blog listing page to add react-reveal Fade animations to each blog preview tile.
Commit that shows what changes needed to be made to a Gatsby blog details page to add a slider animation to the left nav Table of Contents using functions from react-spring.
React component for a list of search results that uses Fade from react-reveal to animate how the search results fly in.
React component for a search result item that uses ‘Spring’ and ‘animated’ from react-spring to flip search result items and reveal more data on the other side as an alternative to “Quick View” modals.
The card flip shows a demo of using react-spring (code: https://github.com/anastasiya29/jss-sandbox/blob/master/src/shared/CardFlip.js) The floating-in search results shows a demo of using react-reveal (code: https://github.com/anastasiya29/jss-sandbox/blob/master/src/components/SearchResults/index.js)
The perfect tech podcast with fun dudes - you want to get just enough info to be inspired to go and learn more, not so much that your brain is melted before you even get to work. This is where I found out about react-spring.
Open source code by the community. Reading open source code is the best way to learn about new frameworks. This is how I found out about react-reveal.
Sitecore JavaScript Services documentation and Quick Start guide
Check out if working as a Sitecore JSS (JavaScript Services) developer is the right specialization for your career. Go to the Developer Trial page, and sign up for the JSS trial.
Free presentation templates for personal and professional use.
Here’s what was said about this presentation on social media.
for free. You
can too.