JSquared Demo – FX

DEMOS: FX

ANIMATE WIDTH

A simple way of animating an element increasing its existing width to 800 pixels

var el = document.getElementById("myElement");
el.animate( {
    width: 800
} );

See this in action
Reset

Animating element

ANIMATE WIDTH AND CONTROL TIME

Animate the width of an element and control the time the animation takes. We will set the time to 2 second (2000 milliseconds). We need to use a more complex syntax to allow us to pass extra details to the animation function.

var el = document.getElementById("myElement");
el.animate( {
    width: { to: 800, time: 2000 }
} );

See this in action
Reset

Animating element

ANIMATE WIDTH AND CONTROL TIME AND TRANSITION/EASING

Animate the width of an element and control the time the animation takes as well as the transitional effect we will use to provide an easing to the animation. We will set the time to 2 second (2000 milliseconds) and you can select the transition from the dropdown. The code example shows us using the default transition (linear). We need to use a more complex syntax to allow us to pass extra details to the animation function.

var el = document.getElementById("myElement");
el.animate( {
    width: { to: 800, time: 2000, transition: J2.Transitions.linear }
} );

Select transition 

Specify time for animation 

See this in action
Reset

Animating element

ANIMATE MULTIPLE PROPERTIES

Animate the width and the opacity of an element at the same time. You can animate as many properties as you like. Each property can use a different transition type and run over a different time period. All of this is demonstrated here.

var el = document.getElementById("myElement");
el.animate( {
    width: { to: 800, time: 2000, transition: J2.Transitions.Bounce.EaseIn },
    opacity: { to: 0.25, time: 1000, transition: J2.Transitions.Quad.EaseIn }
} );

See this in action
Reset

Animating element

ANIMATION WITH A CALLBACK

You can specify a callback function to be executed at the end of the animations. When animating multiple properties, the callback is called at the end of all animations.

var el = document.getElementById("myElement");
el.animate( {
    width: 800
}, function() { alert("End of animation"); } );

See this in action
Reset

Animating element

CHAINING ANIMATIONS

Animations can be chained together to allow multiple animations to run. Each call in the cahin is a full animation in itself and can use all the options and flexibility of the examples above. When simply calling animations as a chain, they all run together at the same time.

var el = document.getElementById("myElement");
el.animate( {
    width: 800
} )
.animate ( {
    opacity: 0.25
} );

See this in action
Reset

Animating element

CHAINED ANIMATIONS RUNNING ONE AFTER THE OTHER

To chain animations and make them run in sequence, use the wait method.

var el = document.getElementById("myElement");
el.animate( {
    width: 800
} )
.wait()
.animate ( {
    opacity: 0.25
} );

See this in action
Reset

Animating element

CHAINED ANIMATIONS RUNNING ONE AFTER THE OTHER WITH A DELAY

To chain animations and make them run in sequence, use the wait method. You can pass a numeric value to the wait method which will add a delay. Specify the delay time in milliseconds. This example adds a delay of 2 seconds.

var el = document.getElementById("myElement");
el.animate( {
    width: 800
} )
.wait(2000)
.animate ( {
    opacity: 0.25
} );

See this in action
Reset

Animating element

CHAINED ANIMATIONS RUNNING ONE AFTER THE OTHER WITH A DELAY – A MORE COMPLEX EXAMPLE

Each individual animation in a chain can use all of the options for a non-chained animation. This example shows a more complex sequence of events. This particular example is obviously not showing how to create good animations, merely the flexibility within JSquared.

var el = document.getElementById("myElement");
el.animate( {
    width: { to:800, time:1000, transition: J2.Transitions.Quint.easeOut },
    height: { to: 50, time: 1000, transition: J2.Transitions.Back.easeIn }
} )
.wait()
.animate( {
    opacity: 0.15
} )
.wait(1500)
.animate ( {
    opacity: { to: 1, time: 2000 },
    height: { to: 10, time: 1750, transition: J2.Transitions.Bounce.easeOut }
} )
.wait(500)
.animate( {
    width: { to: 100, time: 1000, transition: J2.Transitions.Exp.easeOut },
    height: 20
} );

See this in action
Reset

Animating element

ANIMATING COLOUR CHANGES

JSquared is capable of animating colours as well as any other CSS property. To animate colours, you need to specify your target value as a JSquared CSS Colour object. There are various ways of creating this object – the documentation goes into more detail on this. This demo shows animating the background colour and one way of creating the CSS Colour object. As usual, all the standard animation features are available for colour animations.

var el = document.getElementById("myElement");
el.animate( {
    "background-color": { to:[0,0,0].toCssColor(), time: 1000, transition: J2.Transitions.Exp.easeIn },
    color: { to: [255,255,255].toCssColor(), time: 1250 }
} );

See this in action
Reset

Animating element
Unlimited Automated Page Speed Monitoring & Tracking. Completely free.
Use SpeedFactor to track your website. It’s simple, reliable, and best of all, it’s free forever.
See how real people experience the speed of your website. Then find (and fix) your web performance problems.
Get Started

Related Articles

Privacy Policy