In this article I share my findings on animating elements as they come into view in WordPress.
Yesterday I came across Jack In The Box. From the github page:
Reveal CSS animation as you scroll down a page. By default, you should use it to trigger animate.css animations.
Jack In The Box is kind of similar to Waypoints about which I wrote here and here.
When to use which?
Use Jack In The Box when the sections that you wish to add scroll animations to are custom sections that you have manually added vs sections auto generated by your theme's markup functions i.e., when you have the flexibility to add custom classes like box and slideInLeft easily.
Use Waypoints when the elements to which animations are to be added as they are scrolled to are generated by the theme.
I am going to use Genesis Sample as the active WordPress theme in this tutorial.
Example 1: Slide in Primary Sidebar from top
Let's say we want to slide in the Primary sidebar from top as we reach to it. Unless there is a tall slider below the standard header and navigation, Primary sidebar will usually be visible above the fold as pages load. This means that the slide in from top animation will be visible upon page load.
Upload animate.min.css to /css under your child theme.
Download jack-in-the-box.js and edit it.
Replace (line 2)
| jQuery(function() { |
with
To view the full content, please sign up for the membership.
Already a member? Log in below or here.
Love it! I’ve played with some minor animations with animate.min.css, but nothing to this level. Thank you so much for sharing this!
Very Cool stuff. Great job.
Thanks for this! I’ve been mucking around with parallax with scroll effects in Muse, but i’d like to be able to do everything I want straight from WP. This is a great intro.
[…] a previous post titled Scroll animations in WordPress using Animate.css, Jack In The Box and Waypoints, I discussed scroll animations using Jack In The Box and […]
“Download jack-in-the-box.js and edit it.” But file https://raw.github.com/matthieua/WOW/master/js/jack-in-the-box.js is not here now.
It has been named as WOW.
https://raw.github.com/matthieua/WOW/master/dist/wow.min.js
I have not tried the above incarnation of Jack in the box yet.
For all practical purposes, I find that Waypoints is the best. Gives you full control.
Awesome work….
I was wondering if you can help me make them only happens once. Right now the animations happens again if I scroll away from your bottom and then down again. Your blog posts moves in again.
In js/waypoints-init.js you will find several instances of “triggerOnce: true” commented out. Uncomment those if you want the animations to happen only once.
I just saw the trigger once was // out. Ignore my previous question.
Sridhar,
Namaste.
I am already using the code Waypoint.init and Waypoints.min.js to animate homeparallax. However, now I wish to implement this scroll animation to sidebar widget. Could you guide me as to how and where I must place this code?
Also, is there a way I can make the newsletter sign up widget sticky to top on scroll?
Sridhar,
I attempted it on my own and managed it through your tutorial. Could you now tell me how to fade in and slide my posts on home and archive page. I can’t seem to get that right. Thanx again.
Hi Sridhar,
I am stymied. I am following all the instructions given by you and yet not being able to get the desired animation for my posts. What am I doing wrong?
I have pasted my code of functions.php at http://pastebin.com/EGgAXW55 (The site is circleurbana.com)
Would be grateful if you could look at it.
Thanx
Solved! 🙂 Thank you.
Hey Sridhar! I’ve made this work like a charm here: http://elizabethtownwebdesign.com/tc and a “Hidden Header” scrolls into view once the main site title is scrolled off page. You’ll see it working well on the home page.
However, it is not taking effect on inner pages. The hidden-header element that scrolls into view on the home page does not trigger on interior pages. The div that is the trigger is present on all pages, though, and the hidden-header is populating, but the trigger is not happening.
Any ideas on why this isn’t functioning on interior pages?
Thanks in advance for any assistance!
Very nice.
However, i have two issues with waypoints.
When i copy
if ( is_handheld() )return;
i have a blank page.
Without it, i see animate effect. But not with scroll, it becomes at page loads.
[…] Scroll animations in WordPress using Animate.css, Jack In The Box and Waypoints […]
[…] the past I wrote about using 'Jack In The Box' and ScrollReveal here and here for on scroll (more like, 'when-it-comes-in-the-view') […]
Hey Sridhar! How do I get a scroll animation like https : // www abelodor com/ homepage… please through some light. The animation is diagonal and kicks in only with scrolling up and down