SlideIns.js – Animate content into a page

This is my first ever public JavaScript “library” and also my first GitHub!

SlideIns.js is just simple jQuery code that allows you to have content on a page “slide in” from left, right, or middle (middle just fades in basically).  This concept was taken from Apple.com pages, where they recently started having little subtle animations featured on their pages – for example as you scroll down an iPad or iPhone might slide in from the right of the screen. The main feature is that the animations occur as you scroll down and reveal the content further down on a page. (So obviously lower content that would animate offscreen waits until its visible on the users screen once they scroll down to it.)

We are using this new feature on our updated website at work that we are launching in the next few months, so I figured I’d wrap up the code and push it up here.  Its by no means perfect, and could probably use a little more debugging, but I’ll continue to maintain the GitHub repo to keep it up to date.

Heres the GitHub: https://github.com/jkat98/SlideIns
Heres a sample page: http://jasonkrol.com/upload/misc/slideins_sample/sample.html

Its basically as simple as including the slideins.js file (or slideins.min.js), making sure you have jQuery included, and some minor classes to your html:

$().ready(function(){
     SlideIns(450,'easeOutQuint');
});

 

<div class="slidein_row">
     <div class="slidein_left">
          <p>Whatever is in here will "slide in" from the left negative margin of the screen (offscreen).</p>
     </div>
     <div class="slidein_middle">
          <img src="http://whatever.com/image.jpg" /> <!-- this image will fade in -->
     </div>
     <div class="slidein_right">
          <p>And this content will slide in from the right side of teh screen (again, offscreen).</p>
     </div>
</div>

Note: You can include as many “slidein_row”s as you want. Currently the way I have it designed, the animations wait until the previous row is complete. So if you had 100 rows, and you paged down really fast, you would sit there and watch each row animate in one after the other – like a queue. Without the queue, the animation really started to suffer and very strange things would occur.

Enjoy!  Please feel free to share any feedback as I would always appreciate any and all constructive criticism and/or kudos!

3 thoughts on “SlideIns.js – Animate content into a page

  1. Hello Jason,

    Great tutorial. I had paid a developer to create a page with this functionality, and while he did a good job, it wasn’t good enough. So, I followed your code instructions from the github, and was able to create a much better looking page, using div’s and links I already had in my static page.

    My problem is that halfway down the scroll, div’s start appearing in position for just a moment, then disappear and do the slidein. Any clue as to why it happens?

    I have 16 divs on eight rows, with a left float sliding in from the left, and a right float sliding in from the right. Two rows appear as the page loads, and the anomaly starts around the fifth row.

    Thanks for any advice you can give. This is a pretty cool effect, and brings an old geezer’s site into the modern world!

    Like

  2. Back again. I have the script installed on a WordPress site. It was working last night and this morning, and then all of a sudden stopped working. I restored the backup from last night and the script is still not working. I have had friends test it at three other locations and in different browsers. What could cause the scripts to stop all of a sudden?

    Like

    • I have now also restored the database and the slidein is working, so can I presume this error was something I did on the page. Cancel this inquiry.

      Like

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s