Custom Theme Functions

This template include a ton of pre-builded animations and object position observers.

Every page item can be animated easily, the animation can be triggered when they are inside the viewport or could be a loop.

In order to create an “observed” object you need to add to each block that need it “interactive” to the additional classes box editor in this way

How initialize the observer

Adding the the class “interactive” the item observer will start to add and remove classes to that object when it is visible.

visible: the object is INSIDE the screen

already-see: the object has been inside the screen al least at once

Animations

Animation classes (but you may want to add/extend your own in animation in /assets/src/scss/components/animations.scss)

alignclose: this class removes the distance between blocks
fade-in: opacity animation from 0 to 100%
slide-left: translate from -100% to 0 (right to center)
exit-right: translate from 0 to 100% (center to left)
enter-down: transition animation from down to original position

Parallax

Each image inside a container can be animated with parallax. To apply this effect to “additional classes box” the class “interactive parallax” like in the example show below

Custom Block Classes

padded-image: distance the image from the margins (needed sometimes for transparent background images who have image margins near the image crop)

Custom Scripts

lightbox: a single lightbox
lightbox-gallery: a lightbox with multiple photo and navigation
slider AND slider-single: slick carousel (show 1 image at once)
slider AND slider-multi: slick carousel (show 3 image at once)

Below some examples

Animation triggered by visibility

interactive slide-left

One shot animation

HEY WAIT! This is one shot animation… And is triggered only one time. To make an animation like this use “interactive animated exit-right long-delay” classes

interactive exit-right long-delay

Media and text Block with parallax

(for media and text block you don’t need “Crop image to fill entire column”)

interactive parallax

Media and text Block with interactive animation

interactive fade-in alignclose

Media and text Block with interactive animation

interactive enter-down fade-in alignclose long-delay

Lightboxes

add the class “lightbox” to the block and the image inside will be lightboxed when clicked

lightbox

The same can be done with galleries, but you need to use the class “lightbox-gallery”. In this case the lightbox will show all the gallery images into a slideshow