Skip to content

Using Animations V2

Animations enhance user engagement, provide depth, and draw attention to key elements like buttons or headings. However, using animations effectively requires care to avoid overwhelming users, slowing down site performance, or creating a frustrating user experience. Follow these modern guidelines to implement animations seamlessly in your design projects. 

Animation Guidelines

1. When to Use Animations

Add Focus and Interaction: Use animations to emphasize critical components, such as: 

  • Buttons 
  • Call-to-action (CTA) elements 
  • Notifications or hover effects 

Enhance User Experience: Subtle animations can make transitions and interactions feel smoother and more natural. 

Guide Users: Use animations to direct attention to important elements or guide users through a process (e.g., step transitions). 

2. Tips for Effective Animations:

Be Subtle: Avoid overly complex or exaggerated animations. Use soft transitions like fades or slight movements. 

Prioritize Performance: Animations that affect layout (e.g., width, height) can cause slower rendering. Instead, use opacity or transform for smoother results.

Short Duration: Ideal animation durations are between 200ms - 500ms to ensure responsiveness. 

Consider Accessibility: Ensure animations do not cause discomfort. Provide options to disable animations for users with motion sensitivity. 

3. When to Avoid Animations

Here are common animation types and where to use them effectively:

Fade 

  • Gradual transition of an element from transparent to visible. 
  • Best for: Smooth entrances or transitions. 

Slide 

  • Movement of elements from off-screen or fixed positions. 
  • Best for: Revealing dropdowns, modals, or sidebars. 

Zoom 

  • Scaling up/down of an element. 
  • Best for: Emphasizing focus areas or interactive buttons. 

Rotate 

  • Rotation effect around a central point. 
  • Best for: Icon interactions or playful elements. 

Bounce 

  • Adding slight vertical or horizontal movement to attract attention. 
  • Best for: Notifications or important CTAs.

Custom Sequences 

  • Combine multiple effects for unique results using CSS or JavaScript. 
  • Best for: Advanced interactions or user flows. 

Animation Techniques

1. Using CSS for Animations

Leverage CSS keyframes or transitions for custom animations: 

Example: Fade-In Animation:
@keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } .element { animation: fadeIn 0.5s ease-in-out; }

Add this CSS to your stylesheet and apply the class .element to the target HTML. 

2. Using JavaScript for Animations

For on-click animations: 

Page Navigation Animations:
<button onclick="scrollAnimation()">Click Me</button> <script> function scrollAnimation() { document.querySelector('.target-element').classList.add('animated'); } </script>

Animating with Beaver Builder

Select the element you want to animate (row, column, or module). 

Open the Advanced Tab and locate the "Animation" settings. 

Choose an animation type from the dropdown list. 

Set a delay (optional) to control when the animation triggers. 

advanced-tab--animation--1-36f367f1b0d1f3b355df124fec7fb6eb

If you're using Beaver Builder or similar page builders, follow these steps: 

Tip: Avoid setting long delays; users might scroll past the element before the animation starts. 

Best Practices for Performance

Prefer GPU-Friendly Properties: Use transform and opacity over height or width changes. 

Limit Animation Repeats: Avoid infinite loops for animations unless necessary. 

Test Performance: Use tools like Lighthouse or Chrome DevTools to monitor performance impact.

Fallbacks: Ensure animations degrade gracefully on older devices or browsers. 

Table of Contents
    Video Practices
    Scroll To Top