Animations with VueJS

@SamuelSnopko

www.samuelsnopko.com

A guide into the transitions & animations with VueJS/NuxtJS

VueJS Meetup Dresden

17.06.2019

It's a trap

👨🏼‍💻 FrontEnd Knight & DesignOps

Star Wars Fun

😱 Freelancer

🥑 Storyblok / VueJS / NuxtJS

🎤 Speaker

🍻 Meetups Organiser

@SamuelSnopko

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

Basic Samples

• NPM Package - vue2-transitions

• Collapse transition

• Simple Dialog Box

@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

Article?

Working on... 

Bonus Links

• Haiku

• Lottie Files

• Ramjet

• Transition TravelApp

@SamuelSnopko