Animations
Animations add dynamic movement to your pages, enhancing the user experience. You can apply animations to a container (e.g., a box or section) and its direct child elements
Makeswift offers a variety of effects and customization options, including delay and stagger controls.
Effects
Animations are triggered when an element appears into view, or on page load if the element is already in view. Makeswift provides a comprehensive list of animation effects to choose from.
Animations can be applied to boxes and/or their direct children, allowing for flexibility in how elements animate. When adding animations to a box’s items, it will only animate the direct children of the box.
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 staggering animations 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 can more likely happen on mobile devices since content is stacked. Be sure to test out and adjust your animations for your mobile device 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 that are scrolled into view.