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 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
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”
Lightboxes
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
No comments yet, be the first!