Animations

Animations add dynamic movement to your pages, enhancing the user experience.

The Animations panel is only available for the Box component.

Makeswift offers several ways to customize animations, including controls for animation type, duration, delay, and stagger.

Animation types

Animations are triggered when a box is scrolled into view, or on page load if the box is already in view. Makeswift provides a variety of animation effects to choose from.

Animate box in

This will apply the selected animation type to the box component and any child components nested within it.

Animate items in

You can use “Animate items in” to apply a separate animation type to the child components within a box.

If set to “None”, then the box and its child components animate as a single, unified element, and child components inherit the animation type of the parent box.

Duration

Duration specifies the amount of time it takes for an animation to complete.

When considering duration for an animation, aim for a good balance between presentation and usability. If the animation is too short, it may go unnoticed by the visitor. If the animation is too long, visitors may be forced to wait before they can see the content they care about.

Delay

Delay specifies the amount of time to wait before the start of an animation, allowing for precise control over when animations begin. This can be used to create more dynamic and engaging user experiences by strategically timing or synchronizing them with other page events.

Stagger

Stagger allows you to easily apply a delay to each item within a box, creating a cascading effect. Stagger control is only available for the “Animate Items In” panel.

Pro tips

Very tall sections can cause animations to not be triggered. This is more likely to happen on mobile devices since content is stacked. Be sure to test out and adjust your animations for mobile devices to avoid any issues.

Developer notes

Animations above the fold which are triggered on page load can hurt your page performance score based on Google’s standards related to Largest Contentful Painting (LCP). To prevent lower performance scores, apply animations to elements below the fold that are scrolled into view.