Skip to content
Amply Dev Library
  • Pages
    • Introduction
    • Core Standards
    • Client First
    • Project Setup Checklist
    • Accessibility & Compliance
      • Removing Google Fonts
    • Assets
      • Images
      • Icons
    • SEO
      • Project Settings Setup
      • 301 Redirects
    • Staging
      • Staging Best Practices
      • Setting Up Staging Environment
    • Additional Tools & Integrations
      • Relume
      • Refokus for Social Share Buttons
      • Form Integrations
      • Lever Job Listings
      • All Countries Select Form Field
      • Restrict the email field to work emails only
      • Nested CMS Collections
    • Components
      • Sliders (When to Use What)
      • Table of Contents
    • CMS
      • Collection Settings Best Practices
      • Multiple Nested CMS collections on 1 page
      • Tips & Tricks
    • Animations
      • Best Practices
    • Quality Assurance
      • Retainer Task Quick QA Checklist
      • Website Launch QA Checklist
      • Individual Page Checklist
Amply Dev Library
/
/
Best Practices
Share
Explore

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.
⁠
image.png
⁠
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.
⁠
image.png
⁠
⁠
image.png
⁠
⁠

Gallery
 
Want to print your doc?
This is not the way.
Try clicking the ··· in the right corner or using a keyboard shortcut (
CtrlP
) instead.