Simply Appear


Find Out More
Code - 07-01-2017

Project progression

100%

Purpose

Simply Appear is an extremely lightweight native Javascript and CSS framework to handle apparition animations (see below). It is easy to implement and include basic animations.

Features

  • Native JS (no jQuery!), compatible with IE8+ (although animations are supported IE10+)
  • Uses CSS transitions (less messy than JS animations that override the "style" tag)
  • Lightweight and lightning fast (nice for your mobile users)
  • Page still works with JS disabled
  • Comes with the following animations : fade-in, slide-up, slide-down, slide-left, slide-right, zoom-in. Super easy to add more!

Usage

Using this library is super easy.

  1. Download the lib from HERE and put it to your website's directory
  2. In your head, add <link rel="stylesheet" href="/sappear/sappear.min.css" type="text/css">
  3. Before the closing tag of your body, add <script src="/sappear/sappear.min.js"></script><script>SAinit();</script>
  4. Wrap all of your content in <div id="bodywrapper"></div>
  5. Add animations to your elements! To do so, add the following classes SAppear ANIMATION-NAME. The available animations are :
    • SA-fade-in
    • SA-slide-up
    • SA-slide-down
    • SA-slide-left
    • SA-slide-right
    • SA-zoom-in
    • SA-roll-left
    • SA-roll-right
    • ... Your own animations!

Add your own animations

Adding your animations is super easy. For instance, add this to your CSS code :

.SAenabled.SA-ANIMATION-NAME{
  /* You can choose the animation length. If you do
   not put this line, it will default to 500ms.*/
  -webkit-transition: 1s;
  transition: 1s;
  /* The state of the element before the appear. It 
  transitions to its default state when appearing.*/
  -webkit-transform: rotate(90deg) scale(0);
          transform: rotate(90deg) scale(0);
}

This code makes the element appear with a spinning and zooming effect of 1 second.

You may want to import animations from the Animate.css lib.

Exemples !

<div class="SAppear SA-fade-in"></div>
<div class="SAppear SA-slide-up"></div>
<div class="SAppear SA-slide-left"></div>
<div class="SAppear SA-slide-down"></div>
<div class="SAppear SA-slide-right"></div>
<div class="SAppear SA-zoom-in"></div>
<div class="SAppear SA-roll-left"></div>
<div class="SAppear SA-roll-right"></div>

Known issues

Any element added after the lib is initiated (through Ajax calls for instance) will not be animated unless you rerun SAinit(), which is not recommended. This is due to my performance optimized algorithm.

Author: Charles Grassin


What is on your mind?

  • No comments yet!

  Back to projects

Related articles