Sridhar Katakam

Genesis and WordPress Tutorials

Scroll Animations in WordPress using Smoove

by 7 Comments

In the past I wrote several tutorials on scroll animations Genesis/WordPress:

Scroll animations in WordPress using WOW.js

Adding scroll animations in Parallax Pro

Using ScrollReveal.js to fade in posts in Genesis

Scroll animations in WordPress using Animate.css, Jack In The Box and Waypoints

Using Waypoints jQuery to animate and fade in elements as they are scrolled to in WordPress

Smoove is a new jQuery script which

makes it easy to implement awesome CSS3 transition effects, making your content smoothly glide into the page as your scroll down the page.

In this article I show how Smoove can be loaded in WordPress and provide examples of using it for sliding elements with various effects like gliding from the left, right, top, bottom; scaling, transforming 90 degrees from the bottom in z-axis etc.

Live Demo

Step 1

To view the full content, please sign up for the membership.

Already a member? Log in below or here.

  • Hi Sridhar,

    Thanks again for your so useful tips and tuts.

    I’m looking to implement something specific and I wonder if this script could make the job. I’m no jQuery pro !!

    What I want is a fixed header with initial transparent background that will get some dark opacity when scrolling down. The best live preview I found is : https://yoogaia.com/

    I’m good with the fixed header but can’t achieve the effect when scrolling down. Would I use only CSS or should I include JS too ???

    Any kind of lead would be appreciate

    Reply

  • Thank you so much for your useful articles!

    I would like to ask few questions regarding smoove script, which I couldn’t figure out by myself, and would be grateful if you could help:

    1. How can I animate image caption on mouse over, let’s say, for example, to have Glide caption (with colored background and text) from top to bottom

    2. Is it possible to create direction-aware hover effect with smoove?

    3. Is it possible to Rotate 360degrees (circular icons) on mouse over?

    Reply
    • >