Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Aprenda Customizing Animation Easing | Customization and Best Practices
HTML Scroll Animations with AOS

bookCustomizing Animation Easing

Animation easing determines how an animation accelerates or decelerates as it plays, shaping the overall feel of the movement. With AOS, you can customize easing by adding the data-aos-easing attribute to any animated element. This attribute accepts standard timing functions such as "linear", "ease-in", "ease-out", "ease-in-out", or even custom "cubic-bezier" values for advanced control.

Choosing the right easing is important for user experience:

  • Linear easing results in a steady, mechanical motion;
  • Ease-in starts slowly and speeds up, making elements feel like they are gaining momentum;
  • Ease-out starts quickly and slows down, which is useful for gentle landings;
  • Ease-in-out combines both for a natural, smooth effect;
  • Custom cubic-bezier curves let you fine-tune the motion for unique or branded interactions.

When customizing animation easing, consider the mood and intent of your interface. For playful or dramatic effects, experiment with custom cubic-bezier values. For subtle, professional transitions, stick with standard easings like "ease-in-out". Always preview your animations on real devices to ensure they feel right and do not distract from your content.

question mark

What does changing the data-aos-easing attribute affect in an animation?

Select the correct answer

Tudo estava claro?

Como podemos melhorá-lo?

Obrigado pelo seu feedback!

Seção 4. Capítulo 1

Pergunte à IA

expand

Pergunte à IA

ChatGPT

Pergunte o que quiser ou experimente uma das perguntas sugeridas para iniciar nosso bate-papo

Suggested prompts:

What are some examples of custom cubic-bezier values I can use?

How do I add the data-aos-easing attribute to my HTML elements?

Can you explain the difference between ease-in and ease-out in more detail?

bookCustomizing Animation Easing

Deslize para mostrar o menu

Animation easing determines how an animation accelerates or decelerates as it plays, shaping the overall feel of the movement. With AOS, you can customize easing by adding the data-aos-easing attribute to any animated element. This attribute accepts standard timing functions such as "linear", "ease-in", "ease-out", "ease-in-out", or even custom "cubic-bezier" values for advanced control.

Choosing the right easing is important for user experience:

  • Linear easing results in a steady, mechanical motion;
  • Ease-in starts slowly and speeds up, making elements feel like they are gaining momentum;
  • Ease-out starts quickly and slows down, which is useful for gentle landings;
  • Ease-in-out combines both for a natural, smooth effect;
  • Custom cubic-bezier curves let you fine-tune the motion for unique or branded interactions.

When customizing animation easing, consider the mood and intent of your interface. For playful or dramatic effects, experiment with custom cubic-bezier values. For subtle, professional transitions, stick with standard easings like "ease-in-out". Always preview your animations on real devices to ensure they feel right and do not distract from your content.

question mark

What does changing the data-aos-easing attribute affect in an animation?

Select the correct answer

Tudo estava claro?

Como podemos melhorá-lo?

Obrigado pelo seu feedback!

Seção 4. Capítulo 1
some-alt