Easing Functionstop #

• Linear
• In
• Out
• Both
• Sine
• StrongIn
• StrongOut
• StrongBoth
• Bounce
• BouncePast
• SwingIn
• SwingOut
• SwingBoth
• Elastic
• Spring
• Wobble

---

Linear (constant speed)top #

    /**
     * $('.linear') gets the first element on the page that
     * includes the class name "linear". See Jelo.Dom.select
     * and $ for more details on grabbing items on a page.
     * 
     * Also see Jelo.Anim.ate and Jelo Shot: Animation (basic).
     */
    var target = $('.linear');
    
    Jelo.load('all', function() {
        Jelo.Anim.ate({
            me       : target,
            css      : 'margin-left: 250px',
            duration : 1.5,
            easing   : 'linear' // constant speed
        });
    });

---

In (accelerates toward the end point)top #

    Jelo.load('all', function() {
        Jelo.Anim.ate({
            me       : $('.in'),
            css      : 'margin-left: 250px',
            duration : 1.5,
            easing   : 'in' // accelerates
        });
    });

---

Out (decelerates toward the end point)top #

    Jelo.load('all', function() {
        Jelo.Anim.ate({
            me       : $('.out'),
            css      : 'margin-left: 250px',
            duration : 1.5,
            easing   : 'out' // decelerates
        });
    });

---

Both (IN, then OUT)top #

    Jelo.load('all', function() {
        Jelo.Anim.ate({
            me       : $('.both'),
            css      : 'margin-left: 250px',
            duration : 1.5,
            easing   : 'both' // different curve from SINE (see below)
        });
    });

---

Sine (accelerates, then decelerates)top #

    Jelo.load('all', function() {
        Jelo.Anim.ate({
            me       : $('.sine'),
            css      : 'margin-left: 250px',
            duration : 1.5,
            easing   : 'sine' // this is the default when no easing is supplied
        });
    });

---

StrongIn (accelerates from a very slow speed)top #

    Jelo.load('all', function() {
        Jelo.Anim.ate({
            me       : $('.strongin'),
            css      : 'margin-left: 250px',
            duration : 1.5,
            easing   : 'strongin' // accelerates from very slow
        });
    });

---

StrongOut (decelerates to a very slow speed)top #

    Jelo.load('all', function() {
        Jelo.Anim.ate({
            me       : $('.strongout'),
            css      : 'margin-left: 250px',
            duration : 1.5,
            easing   : 'strongout' // decelerates to very slow
        });
    });

---

StrongBoth (STRONGIN, then STRONGOUT)top #

    Jelo.load('all', function() {
        Jelo.Anim.ate({
            me       : $('.strongboth'),
            css      : 'margin-left: 250px',
            duration : 1.5,
            easing   : 'strongboth' // starts and ends very slow
        });
    });

---

Bounce (hits the end point several times)top #

    Jelo.load('all', function() {
        Jelo.Anim.ate({
            me       : $('.bounce'),
            css      : 'margin-left: 250px',
            duration : 1.5,
            easing   : 'bounce' // each bounce gradually slows
        });
    });

---

BouncePast (BOUNCE on the outside edge)top #

    Jelo.load('all', function() {
        Jelo.Anim.ate({
            me       : $('.bouncepast'),
            css      : 'margin-left: 250px',
            duration : 1.5,
            easing   : 'bouncepast' // passes the end point, then acts like bounce (above)
        });
    });

---

SwingIn (pulls back before speeding toward the end point)top #

    Jelo.load('all', function() {
        Jelo.Anim.ate({
            me       : $('.swingin'),
            css      : 'margin-left: 250px',
            duration : 1.5,
            easing   : 'swingin' // backs up, then speeds up
        });
    });

---

SwingOut (smoothly passes the end point)top #

    Jelo.load('all', function() {
        Jelo.Anim.ate({
            me       : $('.swingout'),
            css      : 'margin-left: 250px',
            duration : 1.5,
            easing   : 'swingout' // smoothly passes the end point
        });
    });

---

SwingBoth (SWINGIN, then SWINGOUT)top #

    Jelo.load('all', function() {
        Jelo.Anim.ate({
            me       : $('.swingboth'),
            css      : 'margin-left: 250px',
            duration : 1.5,
            easing   : 'swingboth' // passes the start and end points
        });
    });

---

Elastic (springs back and forth at the end point)top #

    Jelo.load('all', function() {
        Jelo.Anim.ate({
            me       : $('.elastic'),
            css      : 'margin-left: 250px',
            duration : 1.5,
            easing   : 'elastic' // snaps HARD around the end point
        });
    });

---

Spring (like ELASTIC, but not as strong)top #

    Jelo.load('all', function() {
        Jelo.Anim.ate({
            me       : $('.spring'),
            css      : 'margin-left: 250px',
            duration : 1.5,
            easing   : 'spring' // snaps around the end point
        });
    });

---

Wobble (back and forth in a single duration)top #

    Jelo.load('all', function() {
        Jelo.Anim.ate({
            me       : $('.wobble'),
            css      : 'margin-left: 250px',
            duration : 1.5,
            easing   : 'wobble' // plays the animation back and forth
        });
    });

---