Animations on the Web

WARNING

This post is a living document — I'm actively taking this course and updating my notes while experimenting as I go. Expect rough edges, incomplete sections, and the occasional half-baked thought. This if this less as a finished article and more as an open notebook you're welcome to peek into.

Table of Contents

• Introduction
• The Basics

Introduction

Notes from Emil's course Animations on the Web—specifically around Motion (formerly known as Framer-Motion).

The Basics

To animate with Motion we need to use the <motion.div> element. It’s a wrapper around the native HTML elements that allows us to animate them using Motion’s API.

<motion.div
	initial={{ opacity: 0, translateX: 0, rotate: -10 }}
	animate={{ opacity: 1, translateX: 100, rotate: 0 }}
	whileHover={{ scale: 1.2, rotate: 10 }}
	whileTap={{ scale: 1.4, rotate: 135 }}
	exit={{ opacity: 0, translateX: 0, rotate: -10 }}
	transition={{ type: 'spring', duration: 0.4, ease: 'easeOut' }}
/>

• Make any animations
• initial is the starting state, animate is the end state.
• when using wait

Back

Head back to writing and explore more posts.