Animations
on scroll down

January 28, 2014

I released a new version of Connect's website today. And I use some animations - transition, fading, scaling - when you scroll the page down on pictures and sections. Here's how you can animate sections and pictures with CSS, HTML and jQuery on your own pages in a few minutes with the following code. You can see an example on www.getconnectapp.com

Simply add a unique ID in the HTML

Add a specific ID on the div or picture you want to animate when scroll down. Here, I use the ID tomove for the div I want to animate on scroll down.

1
<div id="tomove"></div> or <img src="image_name.png" id="tomove"/>

Then, add effects with jQuery

Paste the following line in the header of your page to call jQuery.

1
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>

Then, paste the following code at the bottom of your page, just before </body>.

1
2
3
4
5
6
7
8
9
10
11
<script type="text/javascript">
        $(window).scroll(function() {
                $('#tomove').each(function(){
                var imagePos = $(this).offset().top;
                var topOfWindow = $(window).scrollTop();
                    if (imagePos < topOfWindow+680) {
                          $(this).addClass("slideLeft");
                    }
                });
        });     
</script>

The ID #tomove refers to the ID of the div or picture you want to animate and slideLeft is the class added to the div or picture to actually animate it. In the CSS, we will later define the transition settings of this class. Change topOfWindow value to start the animation when you want during the scroll down.

Note: if you want to animate more than one div or picture, you need to use different unique IDs.

And finally, define transition settings with CSS

What's in important in the CSS is to respect visibility settings - hidden and visible - otherwise animations will not work. Then we use Keyframes to define the animations settings. Here's for example what we have for the slideLeft class.

1
2
3
4
5
6
7
8
9
10
11
12
13
#tomove {
        visibility: hidden; !important
}
.slideLeft {
        animation-name: slideLeftAnimation;
        animation-duration: 1.2s; 
        animation-timing-function: ease-in-out;    
        visibility: visible !important;
}
@keyframes slideLeftAnimation {
        0% {transform: translateX(150%);opacity: 0;}
        100% {transform: translateX(0%);opacity: 1;}
}

Get source code on Github

The source code is available for free on Github. There, you'll find several transition effects such as slideLeft, slideRight, slideTop, slide Down, fadeIn or rotate among others. Don't worry, it's very easy to create your own transitions. I have no doubt that you can make it!

Feel free to hit me up on Twitter at @ojaouen, I'd love to help you on this!

Enjoyed the article?

I'm sharing what I build and learn on SaaS products strategy and SaaS distribution. And I'm learning a lot, so will you! Delivered once a month for free.

I won't spam you or sell your address. Unsubscribe - of course - at any time.