scrollReveal.js is plain vanilla JS library that allows you to reveal elements as they enter the viewport. It’s remarkable in that it’s only 3kb minified, that’s small. The range of effects you can choose are vast, and it uses natural language to define the animation you want to run. No need for CSS3 transition and a script to detect the current page position in the browser window. Use ScrollReveal and be done with it!

SecretNav is a small jQuery push menu plugin that slides out an off-canvas navigation from the edge of the screen while pushing the main content away with a fancy CSS3 powered 3D perspective effect.

The plugin requires jQuery 1.7 or higher, and Modernizr.

Illustration by minnix

Material Design Hierarchical Display is a jQuery plugin that creates a hierarchical display animation effect. The meaningful transition helps focus user attention in an app and leads them from point A to point B.

This tool is pretty nifty with subtle visual cues for users that add an element of finesse to a design. Plus the plugin works with all modern browsers including Chrome 4+, Firefox 16+, Opera 12.1+, Safari 4+ and Internet Explorer 10+.

Use is pretty simple, just download the plugin, unpack and add a couple lines of code to your site. You’ll want to set a few options as well to make the plugin your own. Customization choices include action, speed, animation, and debugging.

The plugin comes with pretty extensive documentation so you can learn more and set it up with ease. There is also an option to run it with Animate.css if you are interested.

Slides Framework will help you to create a beautiful promo site with stunning animations and clean code.

The framework comes with 60 beautiful slides and 11 quick-start templates that you can combine. It was born to help you to create a beautiful form for the story you want to tell. Every slide is available in PSD, Sketch and HTML formats.

The advantage to Slides is that it is a one-of-a-kind presentation builder. It makes it quick and easy to build a site to show off your products. The code is clean, animations are crisp, the framework is designed beautifully and almost anyone can get a site up in no time.

Slides is fully-responsive as well, so that all your work will look great on any type of device. And with all the available options, every site created with Slides looks completely custom.

The full slides package, including templates, the generator, unlimited usage and support is $249 from Designmodo.

This simple and easy jQuery plugin for CSS animated page transitions give you tools for 58 different types of movement.

The robust animation plugin includes elements such as fades, rotations, flips, zoom in and out, overlays and more. And every animation comes with a preview mode so you can see how it works before you install the action in your website framework.

Animsition requires a browser that supports CSS3, which is how the animations are constructed. Supporting browsers include IE10+, Safari, Chrome and Firefox.

Download and installation are fairly easy. Link the required files, insert the HTML markup and call Animsition. That’s it. All of the code and options are available in the demo to make this plugin even easier to use.

Want an animation that’s not included in the Animsition plugin? You can create your own and submit it for inclusion. The plugin has nine contributors and the team welcomes future elements for this project.

Have you ever just needed a cloud or two in your design project? jQlouds allows you to clouds on the fly with a simple plugin.

You can generate multiple clouds on the same page, each element will be filled with random static clouds. Note that the selected element will be relatively positioned in order to accommodate absolutely positioned clouds.

Then you can customize the sky, animation, number of clouds, cloud size and more.

• Unlike the real sky, here we know exactly how much it is height: minimum height is given automatically based on the height of the biggest cloud. You can give a different height to the element through the plugin itself.
• Animation options include “wind” settings do that clouds have a natural look to them.
• The number of clouds is assigned randomly within minimum and maximum parameters.
• The default image provided (served as base64 image so you won’t need to upload anything but the plugin) is 227 by 96 pixels. Clouds are randomly sized less or equal to that size, unless you specify something different.

jQloudsis a fun little plugin that can help you add a touch of whimsy to any website design (while you have your head in the clouds).

Creating the perfect shadow to mimic just the right bit of light can be tricky. Shine takes some of the trickiness out of it for you. This little library is designed just for making pretty shadows.

With tools to manipulate the light position and shadow shape, this plugin is a tool that keeps you from having to guess about the best placement for a shadow on an object or text.

Plus, it’s relatively easy to use. Just install using Bower and configure to your liking. You can change many of the options including what element you apply the shadow to in the website design, optional configurations, optional class prefixes and optional property names for which to apply shadows. You can draw and redraw shadows as needed to get them just as you like.

There are other variables for you to think about as well when it comes to the look of shadows using Shine — the number of steps drawn in each shadow, opacity of shadows and exponents applied to that opacity, offsets of shadows, strength of shadow blur and corresponding exponent and the shadow color.

This plugin might be the most fun you’ve had all day; traceit allows you to trace page elements. You can draw arrows or rings or animated bits around images to provide users with a visual cue as to what they are supposed to do or where they are supposed to look on the screen.

The example is a great way to showcase the application of traceit. In the preview are diagrams of cat tails and in the sidebar are specific actions. If you click an action name, the appropriate tail image is circled so you can match action and visual.

Now that you know this is the right plugin for your project, download and include the script and its dependencies in your code. Select the traceable element and call the animation. That’s it!

You can create customizations as well for almost any aspect of the plugin. Change the color, stroke with, opacity, full, gap point and more as best suits your overall design. And just like magic use of the ESC key or changing the browser size will rest everything back to the start. It does not get much easier than this to use a plugin.

This plugin allows you to apply animated visual effects to text, including individual letters, words or custom patterns. The jQuery plugin is simple and light.

LetterFx works by temporarily injecting markup into the text of an element and sequentially adding and removing transition-based CSS classes. This is a developer-level plugin and should be used by those who feel comfortable altering CSS classes only.

The resulting animations created with the plugin are simple but quite impressive. Use this tool to help add emphasis to certain text in the design.

Options for text animation include backward or forward motion, timing changes, duration of the animation, starts and stops, sorting, patterns, letter replacements and selection of text elements.

Unique effects included in this plugin include spin, fad, grow, smear, fall, swirl, wave, fly top, fly bottom, fly left and fly right. What’s especially nice about each animation style with LetterFx is that movement is simple, consistent and unobtrusive. Take a close look at each animation demo to see exactly how each moving letter or word style works.

One more bonus with LetterFx is that the code is designed so that you can even create your own custom animation with the plugin, using the provided actions or something you come up with on your own. (Have fun!)

Have you every wished your site included a flip-card style gallery? With the Flip Out Cards plugin, you can have just that.

The plugin features a sleek design, with simple and impressive animations that flip out left and right or top and bottom.

Here’s how it works:

• To create a flip out cards that show more info when hover, simply include the latest jQuery library together with jquery.flipout_cards.js and flipout_cards.css into your document’s <head>, and call the function.
• Follow the HTML markup.
• The container with the class name foc-main will be the main content area where the cards will flip out from. All other containers will be the cards. You can have as many cards as you like. Simply duplicate the container with the class name foc-left and the plugin will automatically stack it all up in order.

This type of tool works great for small chunks of simple information such as small stacking text or functionality such as the demo weather display.

ScrollMe is a jQuery plugin for adding simple scrolling effects to web pages.

As users scroll, ScrollMe can scale, rotate, translate and change the opacity of elements on the page. It’s easy to set up and not a single line of javascript is required. Why just these properties? Because browsers can animate them quickly, keeping scrolling silky smooth.

ScrollMe works with modern browsers, including Internet Explorer 10+.

You can customize the plugin with options that are added as attributes to scrollme elements with the data- prefix.

• When
• From and to
• Easing
• Crop
• Opacity
• Scaling
• Rotation
• Translation

Here’s how it works. ScrollMe uses a simple declarative syntax with two classes. The progression of animations is based on the scrolling through the scrollme class element. The animateme class defines the animated elements. Any number of these can be added within a container element. These elements also take the options that describe how and when the animation occurs. Both classes can be added to the same elements if you like.

Create an interactive solar system

Plugin to play and stop animated gifs.

Create a 3D tilted scroll effect