Entrance and Scroll Animations

Overview:  Entrance and Scroll custom animations

ATTRACT ATTENTION WITH ANIMATIONS

Animations are a terrific tool for engaging site visitors and drawing their attention exactly where you want it to go. Animate buttons you want visitors to click on, services you want them to notice, or images you want them to see. 


Accessible directly from the widget design editor, you can now choose from two animation triggers:

  1. Entrance - Entrance animations are triggered when the site loads
  2. Scroll - Scroll animations are triggered when the animated area enters the viewport (when visitors see that part of the screen). 


As for customizations, you can set:

  • Duration: How long an animation lasts
  • Viewport top / bottom: Where the animation begins and ends 
  • Intensity: The power of the animation
  • Delay: When the animation starts

These controls give you limitless opportunities for animating your sites, so you can create the effects that are just right for each site's tone and style. 


Note: Animations must be set separately on desktop, mobile and tablet. 

ANIMATION BEST PRACTICES

  • Use animations wisely. Make sure the animation you choose fits your site vision and character. 
  • Set the animation according to the content. If you use a scroll animation on text, for example, make sure you have enough viewport time for users to read the text that's being animated. 
  • Everything in moderation, including animations. Animations can help you deliver a message, but try not to be too aggressive with them. Make sure your animations feel natural & smooth, without causing discomfort or significant delays for users.
  • Be consistent. Don't use too many different kinds of animations in one site
Read more

READY TO GET STARTED?

To get a feel for your new animation controls, here's an example (see video immediately below) for animating columns that come into the viewport one after the other. 


  1. Click column 1 to open the design editor and click Animation.
  2. Set the trigger to Scroll and the animation type to Fade in.
  3. Set the viewport top to 20% and the viewport bottom to 20%.
  4. Click column 2 to open the design editor and click Animation. 
  5. Set the trigger to Scroll and the animation type to Fade in.
  6. Set the viewport top to 20% and the viewport bottom to 40%.
  7. Repeat for column 3, setting the viewport top to 20% and the viewport bottom to 60%.
Share by: