Creating movement is great way to provide an interesting and interactive experience for your viewers. With modern sites providing a greater deal of interactivity, it’s becoming increasingly expected that even simple websites will offer some level of animation / movement to engage their visitors.
Today I will be outlining a technique that you can adapt to your web projects - triggering animations when scrolling into a pre-defined region. These animations will be created using CSS transforms and CSS transitions. We will also use jQuery to detect when the elements are visible and to add/remove the appropriate classes.
For those who want to see examples of this in action, you can jump straight to the demos.Why Trigger Animations on Scroll?
The main reason we would want to trigger animations on scroll, is so that they activate just as the user scrolls an element into view.
We might want to fade elements in, or provide an interesting transformation and these would only make sense when the user can actually view them.Animating with CSS or with jQuery?
I will be using transformations via CSS, however there are always variables to consider depending on your situation. I would take the following factors into account:Browser Compatibility
Since our solution will be based on transformations, our browser compatibility will be limited to those that support either 2D transformations or 3D transformations.
All modern browsers will support 3D transforms and several of the older legacy browser such as Internet Explorer 9 and Opera 11.5 will support 2D transforms. Overall support for both desktop and mobile browsers is comprehensive.
jQuery’s animate method works in any (sane) browser, provided you are using the 1.X version of the library. jQuery 2.X removed support for IE8 and below, so only use this if you don’t need to support legacy browsers (lucky you!).Speed
We want fast and smooth animations, especially when it comes to mobile devices. As such its always best to use transitions and transformations where possible.
The examples will use 3D transforms with 2D fall-backs for older browsers. We want to force hardware acceleration for speed, so a 3D transformation is a must (we will be using
translate3d along with other functions that cause GPU accelerated rendering).
animate method is considerably slower than a GPU assisted transformation, so we will just be using jQuery for our event handling / calculations, not for our animation itself (as we want them to be as smooth as possible).
We all know that
Now back to the show …Detecting Animation Elements in View
The overall point of this technique is to look through all of our elements we marked as animatable and then determine if they are currently within the viewport. Let’s step through how we will achieve this:Selector Caching
Scrolling is an expensive business. If you attach an event listener to the
scroll event, it will fire many times over whenever a user scrolls the page. As we will be calling our dimension / calculation functions whenever a user scrolls, it is a good idea to store the elements returned by our selectors in variables. This is known as selector caching and avoids us querying the DOM over and over again.
In our script we will be referencing both the
window object and the collection of elements we want to animate.
[code language="js"] //Cache reference to window and animation items var $animation_elements = $('.animation-element'); var $window = $(window); [/code]
Notice the dollar sign in front of the variables. This is a convention to indicate that they hold a jQuery object, or collection of objects.Hooking into the Scroll Event
Next, we create our event handler that listens for the
scroll event. This will fire when we scroll the page. We pass it a reference to our
check_if_in_view function (which we’ll get to in a minute). Every time the scroll event is fired, this function will be executed.
[code language="js"] $window.on('scroll', check_if_in_view); [/code]
Continue reading %Creating Scroll-based Animations using jQuery and CSS3%