LET'S ANIMATE THE WEB WITHOUT THE HEADACHE!

@SamuelSnopko

www.samuelsnopko.com

A guide into the transitions & animations with VueJS/NuxtJS

Webexpo 2019, Prague

21.09.2019

https://cutt.ly/animate-without-headache

It's a trap

👨🏼‍💻 FrontEnd Knight & DesignOps

Star Wars Fan

👽 Freelancer @ night

🥑 Storyblok / VueJS / NuxtJS

🎤 Speaker

🍻 Meetups Organiser

@SamuelSnopko

👨🏼‍💻 STRG.AT @ day

Little tasting

Schrift Bewegt Advertorial

Shy Collective

Wondrous Culture Page

@SamuelSnopko

Basics & Theory

• CSS 3 Transition & Animation

• Amazing VueJS Documentation

• NuxtJS Page Transitions

• NuxtJS Layout Transitions

@SamuelSnopko

Transition Experiments

• Default Page Transitions

• Back to Intro Transition

• Preloader Transition

Edit on CodeSandbox

@SamuelSnopko

Schrift Bewegt

• After Effects

• Bodymovin

• Lottie

• Math

@SamuelSnopko

Code samples

• Lottie Component

• Hero Animation

• Vue Affix

• Vue Check View

• Pizza Animation

@SamuelSnopko

the LINK

https://airbnb.design/lottie

Bonus Links

• Haiku

• Lottie Files

• Ramjet

• Transition TravelApp

@SamuelSnopko