Trying out eases

Experimenting with different types of eases. Implementing default easing presets from CSS and custom presets from "The Easing Blueprint" .

Ease Initial

ease

Notes

  • Should only be used for linear animations
  • The default ease for CSS animations
  • Tipically used for linear animations, such as loader spins or brand logos
Ease Initial
Linear progression over time (no easing)
Trying out Eases – Igor F. Duca

Ease In

ease-in, easeIn

Notes

  • Should be avoided. It usually makes the website feel slower because of the delay to complete the initial interaction.
  • There are no optimal use cases for this ease. There are plenty better options to use.
  • Creates an unnatural feeling of acceleration that can make interfaces feel sluggish and unresponsive.
  • The slow start makes it difficult for users to predict when the animation will complete.
  • Can cause motion sickness in some users due to the sudden acceleration at the end.
Ease In
Starts slow, ends fast
Trying out Eases – Igor F. Duca

Ease Out

ease-out, easeOut

Notes

  • Perfect for elements entering the screen or expanding, since it starts fast and slows down smoothly at the end.
  • Commonly used for dropdown menus, tooltips, and other UI elements that need to feel responsive.
  • Creates a natural feeling of deceleration that matches user expectations for most interactions.
Ease Out
Starts fast, ends slow
Trying out Eases – Igor F. Duca

Ease In Out

ease-in-out, easeInOut

Notes

  • Nice to use when moving components around the page or morphing them into new elements.
  • Great for transitions between states where both the beginning and end should feel smooth.
  • Useful for animations that need to draw attention but shouldn't feel too aggressive.
  • Common in carousels and slideshows where content smoothly transitions between positions.
  • Provides a balanced, natural feel for longer animations where user attention spans the full duration.
Ease In Out
Starts slow, speeds up in the middle, ends slow
Trying out Eases – Igor F. Duca

Spring Animations

spring animations

Notes

  • Currently it is impossible to build a spring animation using only CSS. Spring animations are different from ease animations in many ways. While ease animations depend on a curve and a duration to exist, spring animations resemble a physical object attached to a spring, so in order to exist, they depend on damping, stiffness and mass, which are the physical properties of the spring movement.
Sequoia Natural Park, California

Sequoia Natural Park

California

Spring
Oscillates with damping and stiffness
Trying out Eases – Igor F. Duca
Desktop-only animation

Mouse-Aware Animations

exploring cursor location properties

b&w image of a monk wearing a robe with a shattered hood standing in the middle of the desert while a sandstorm happens in the background

Exploring clip paths

copying some App Store animations

Essential Apps

Spotify

Spotify

Music streaming platform
Notion

Notion

All-in-one workspace
Figma

Figma

Collaborative design tool
VSCode

VSCode

Code editor
Discord

Discord

Chat & communities
Chrome

Chrome

Web browser

CSS Keyframes

applying css keyframe animations

Keyframes

or type in your text
Change the text to animate
9
/15
Igor Duca

Thank you for reading!

thank you, obrigado, gracias, merci

This project was created for study purposes. All animations displayed on the website were crafted using framer-motion. If liked this study case and want to keep a close look on other studies of mine, come meet me on LinkedIn .