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, which reveals in sections on every page. The floating content loading works on scrolling down the page only once when landing on the page:

Sticky footer

Note! To trigger the feature, a few requirements should be completed:

• This option works with the disabled "Full-width logo for Footer". To hide the logo in the Footer, go to Theme settings -> Logo and favicon -> Full-width logo for Footer and deactivate the "Enable" option.

• The effect requires enough space on a page. If the content in the Header 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.

Using the sticky footer effect or sticky footer effect with overlay, the footer content is set to be fixed on desktop. When scrolling up, it can be covered by the section placed above it.

The "Enable with overlay" option adds a slight background color to the Footer section while using the fixed footer effect. Control the color overlay transparency in Theme settings -> Colors -> Other colors by adjusting parameters in percents on the "Substrate transparency" slider.

Deactivate the footer effect by selecting the "Disable" option.

The Sticky footer effect feature can be viewed on the DEMO.

Hover animation

The following settings are applied only to the desktop.

Enable 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. The underline effect will not apply to menu items or call-to-action buttons styled as links.

Image

To add the hover animation to images in the Mega Menu of the Header on the desktop, use the provided drop-down. Here, one can decide whether to apply the "Zoom in" or "Zoom out" animation. Or disable the hover effect by selecting the "None" option.

Card image

In the drop-down, decide whether to display the hover animation for the product cards on collection pages and collections displayed in the sections. The theme allows you to activate one of the options: "Zoom in" or "Zoom out". This functionality works only on the desktop.

The "None" option disables the zooming effect on the image card.

Card buttons

The appearance of the "Add to cart" and "Quick View" buttons over the product cards of collection pages and collections displayed in the sections can be changed using one of the options in the drop-down: "None", "Fade", or "Fade up".

The "Fade up" setting can be viewed on the DEMO. Hover over the product card to view the appearance effect.

Banner image

By applying the "Inherit global settings" option in the sections that provide the "Hover animation" drop-down, you add the hover animation effect to the banner images in bulk for all the related sections.

If you need to add an animation inside the image container, choose the suggested option from the list. The "Zoom in" and "Zoom out" options create a zoom when the mouse hovers over either enlarging or decreasing the image. You can activate opacity over the image by choosing "Add overlay opacity" and selecting a color for the "Background" or "Gradient" of the overlay (in each section). To use this option, ensure that the "Opacity" is set to transparent (in each section). The overlay opacity and zooming effect on an image can be achieved by selecting the "Zoom in, add overlay opacity" or "Zoom out, add overlay opacity". The option "None" deactivates the animation.

You can read more about the described options on the following help page.

Product page

"Add to Cart" button animation

The theme includes three types of "Add to cart" button animations that work 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 boundaries of the button.

View the example of the option 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.

An example of the effect can be viewed on the DEMO.

• "Buzz out". Use this option to add a spin and shake animation with a static center axis on the button.

Check the example on the DEMO.