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
} );
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 }
} );
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 }
} );
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 }
} );
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"); } );
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
} );
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
} );
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
} );
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
} );
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 }
} );
Use SpeedFactor to track your website. It’s simple and reliable.
See how real people experience the speed of your website. Then find (and fix) your web performance problems.
Get Started
