Animations
This global section provides various animation effects for multiple store elements.
Appearance
Reveal sections on scroll Activate the option to add a bottom-up content effect to reveal sections on every page. The floating content loading works when scrolling down the page just once after landing on the page.
Sticky footer
Note! To trigger the feature, a few requirements should be completed:
This option works with the inactive full-width logo functionality. To deactivate the Footer logo, go to the "Footer" section and hide or remove the "Full-width logo" block.
The effect requires enough space on a page. If the Header content is too high or the browser window height is too small, the effect will be disabled automatically.
The feature can be applied only to the desktop view.
Select the desired option in the drop-down:
"Disabled". Deactivate the footer effect by selecting the option.
"Enable". Activates the sticky effect.
"Use with overlay". Adds a slight background color to the Footer. Control the color overlay transparency in Theme settings → Colors → Other colors by adjusting the "Overlay opacity" percentage.
Note! With the fixed footer effect, the footer content is fixed. When scrolling up, it is obscured by the section above it.
The Sticky footer effect can be viewed on the DEMO.
Hover animation
Use link underline animation By activating the option, text with link redirections, such as banner headings, product titles, and article titles, will be underlined when you hover over them. Note! The underline does not apply to menu items or call-to-action buttons that are formatted as links.
Image To add the hover animation to images in the Mega Menu, use the provided drop-down. Decide whether to apply the "Zoom in" or "Zoom out" animation. Optionally, disable the hover effect by selecting the "None" option.
Card image The hover animation applies to product cards. Select one of the options in the drop-down: "Zoom in" or "Zoom out". The "None" option disables the zooming effect.
Product card buttons Use this setting to customize the visual behavior of product card actions throughout your store. Controls how action buttons appear on product cards when customers interact with them.
"None". Buttons remain visible without any animation effect.
"Fade". Buttons smoothly fade into view.
"Fade up". Buttons fade in from the bottom of the product card, creating a more dynamic appearance.
Note! The option applies to the "Add to cart", "Compare", and "Quick View" buttons displayed on hover over product cards.
The "Fade up" setting can be viewed on the DEMO. Hover over the product card to view the appearance effect.
Banner image Adds an animation inside the image container. Choose the suggested option from the list:
"None". Deactivates the animation.
"Zoom in". Enlarges the image on mouse hover over the banner.
"Zoom out". Decreases the image on mouse hover over the banner.
"Zoom in, add overlay opacity" / "Zoom out, add overlay opacity". Add the overlay opacity and zooming effect to an image using the option.
"Add overlay opacity". Enables opacity over the image.
Read more about the described options on the following help page.
Product page
Add to cart button animation Includes three types of "Add to cart" button animations that operate on Product pages and the "Featured product" section. The animation fires every two seconds without the mouse hovering over the button to attract the attention of visitors:
"None". The option deactivates the animation button effect.
"Light". This option adds the light effect animation. The animation effect extends beyond the button's boundaries.
View the example on the DEMO.
"Wobble top". Select the option to add the shake effect to the top of the button and text. The bottom of the button will remain static.
The effect example can be viewed on the DEMO.
"Buzz out". Use this option to add a rotation and shake animation with a fixed center axis to the button.
Check the example on the DEMO.
Last updated