A jQuery plugin that allows you to control elements on the page.

View the Project on GitHub tschmidt/jquery.puppeteer

What Is This?

Have you seen one of those sites where when you are scrolling down the page things all of a sudden start happening? Have you wondered how they did it? Or wished you could have a simple way to add that to your site?

That is exactly what this plugin is intended to help you with.

Some Background

When I set out to create this plugin, I was actually hoping someone else had already done it. Unfortunately, all I could find were articles with half-baked examples or snippets of code. No full blown plugin that would handle everything I needed.

So, I did what any good web dev does. I built my own tool.

My Approach

I knew I wanted this to be as simple as possible. I also knew that I didn't want the Javascript controlling anything but the class assignments. The way I see it, most modern browsers do a pretty good job of supporting CSS3 and CSS animations.

Because of that, all of the logic for the animations is actually contained in the stylesheets. Now, there is an age-old debate on whether this is the proper place for it but I have clearly chosen a side, so don't bother spamming me in an attempt to sway my decision on this matter.

This libraries sole responsibility is to watch the DOM elements as you scroll and to determine whether the CSS classes you have defined should be applied or not. Okay, it's a little more complicated than that, but this stripped down explanation will work for now.


Most of the "how to" is already covered on the github project. Please view the README for further details.

Simple Example 1

Simple Example 2