Simply Appear


Code - 07-01-2017

Purpose

Simply Appear is an extremely lightweight native Javascript and CSS framework for web apparition animations (examples below). It is easy to use and comes with basic animations.

Github repository : https://github.com/CGrassin/simply_appear

Features

  • Lightweight and lightning fast: less than 2KB in 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)
  • Page still works with JS disabled
  • Comes with the basic 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 Github 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

Due to some performance optimisation, any element added to the DOM after the lib is initiated (through Ajax calls for instance) will not be animated. The solution is to rerun SAinit(). I would not recommend doing this too frequently.

Author: Charles Grassin


What is on your mind?

  • No comments yet!

  Back to projects

Related articles