Jazz Up You React Site With ✨Animations✨

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

Jazz Up Your React Site With Animations

Jazz Up Your React Site With Animations

HELLO! 👋

HELLO! 👋

The Technical Evangelists of Sitecore

The Technical Evangelists of Sitecore

WEB ANIMATIONS

WEB ANIMATIONS

THE ILLUSION OF LIFE ON SCREEN

THE ILLUSION OF LIFE ON SCREEN

ALTERNATIVES TO JS ANIMATIONS

ALTERNATIVES TO JS ANIMATIONS

GUIDELINES TO USING ANIMATIONS 👍💯

GUIDELINES TO USING ANIMATIONS 👍💯

THE “👍💯” ANIMATION TEST

THE “👍💯” ANIMATION TEST

WHEN TO QUESTION ANIMATION 🤷

WHEN TO QUESTION ANIMATION 🤷

THESE ARE GUIDELINES, NOT LAWS

THESE ARE GUIDELINES, NOT LAWS

LET’S CHECK OUT SOME EXAMPLES

LET’S CHECK OUT SOME EXAMPLES

MICROINTERACTION ANIMATION

MICROINTERACTION ANIMATION

PIZAZZ ANIMATION

PIZAZZ ANIMATION

ANIMATION LIBRARIES

ANIMATION LIBRARIES

CHOOSING A LIBRARY

CHOOSING A LIBRARY

CHOOSING A LIBRARY

CHOOSING A LIBRARY

NAVIGATION ANIMATION

NAVIGATION ANIMATION

REACT REVEAL

REACT REVEAL

REACT-REVEAL >> OVERVIEW

REACT-REVEAL >> OVERVIEW

REACT-REVEAL >> PROS

REACT-REVEAL >> PROS

REACT-REVEAL >> USE-CASES

REACT-REVEAL >> USE-CASES

DEMO - React Reveal

DEMO - React Reveal

DEMO - React Reveal

REACT SPRING

REACT SPRING

WHY REACT SPRING?

WHY REACT SPRING?

REACT-SPRING

REACT-SPRING

DEMO - React Spring

DEMO - React Spring

DEMO - React Spring

ANIMATION OVERKILL

ANIMATION OVERKILL

PIZAZZ GONE WRONG?

PIZAZZ GONE WRONG?

PIZAZZ GONE WRONG?

PIZAZZ GONE WRONG?

 PIZAZZ GONE WRONG?

PIZAZZ GONE WRONG?

EVEN MORE PIZAZZ

EVEN MORE PIZAZZ

ANIMATION OVERKILL SYMPTOMS

ANIMATION OVERKILL SYMPTOMS

WRAPPING UP

WRAPPING UP

OTHER LIBRARIES TO EXPLORE

OTHER LIBRARIES TO EXPLORE

TODAY’S RESOURCES

TODAY’S RESOURCES

GENERAL RESOURCES

GENERAL RESOURCES

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

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

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

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

THANK YOU!! 🥰

THANK YOU!! 🥰

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.

Resources

The following resources were mentioned during the presentation or are useful additional information.

Buzz and feedback

Here’s what was said about this presentation on Twitter.