Best Practices
Best Practices

1. Simplify Animations As Much as Possible

When creating animations in Webflow, avoid creating really long animation sequences. Sometimes it’s necessary, but animations should be kept pretty simple.

2. Use Scroll into View instead of Page Load to trigger animations when possible

Avoid triggering an animation in the hero by using Page Load, as this is going to harm site speed scores. It will prevent the animation from happening until the full page has loaded. Use loop on scroll into view triggers instead of on page load as well for the same reason.

3. Make text animations as modular as possible.

Bad practice: This animation is created from the section level, and so this means that this animation has to be created over and over again for different sections.

⁠

Good Practice:

This⁠

animation breaks text animations into smaller chunks. There is a different animation for each delay amount. This way the animations can be applied very quickly or can be tied to a utility class.

⁠

Gallery

Want to print your doc?
This is not the way.

Try clicking the ⋯ next to your doc name or using a keyboard shortcut (

CtrlP

) instead.

Best PracticesBest Practices

1. Simplify Animations As Much as Possible

2. Use Scroll into View instead of Page Load to trigger animations when possible

3. Make text animations as modular as possible.

Best Practices
Best Practices