Custom Theme Functions

You can animate page items when they are inside the viewport. Add the “interactive” custom class to the block of the new Gutemberg editor.

  • interactive: init the animation watcher

Animation classes (you can add/make your own in animations.scss)

  • alignclose: this class removes the distance between blocks
  • fade-in: opacity animation from 0 to 100%
  • enter-down: transition animation from down to original position
  • enter-left: transition animation from left to original position

Block classes:

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

i’ve also added a lightbox for the images and for the galleries…

  • 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 animated slide-left

interactive animated slide-left classes

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

Parallax image

interactive parallax

Media and text Block with parallax

“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”


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

click on the image to see the lightbox effect

you can do the same with galleries, simply give the class “lightbox-gallery” to the whole gallery

Slick carousel

a simple slick carousel

Multiple images slick carousel

mix slick (single) + lightbox

mix slick (multi) + lightbox-gallery

Post navigation

You might be interested in...

No comments yet, be the first!


Your email address will not be published. Required fields are marked *