Animations

Ensemble comes with a built in animation engine that animates elements when they come into view on the screen. There are options for setting when an animation will trigger, for animating multiple elements in sequence, delaying animations, setting the speed of animations, animate once or every time the element is scrolled to, and click to display an animation.

Animations are added by applying the animated-parent class to the outer element of an item you wish to animate. You then add the animated class and the type of animation class, for example animate__bounce-in-left

	<div class="animated-parent">
		<h3 class="animated animate__bounce-in-left">I'm an animated heading!</h3>
	</div>

The above code gives you the result opposite. you can animate almost any element in this manner, text, headings, images, even whole blocks, such as testimonials.

When to animate

By adding the data attribute data-appear-top-offset=' ' you can choose when to animate an element as it appears in the viewport. This will make the animation either start before or after it has entered the viewport by the specified amount. If you wanted to only start the animation after the user has scrolled 300px past it then setting an offset of -300px would achieve this.

<div class="animated-parent" data-appear-top-offset='-300'>
		<h3 class="animated animate__bounce-in-left">I'm an animated heading!</h3>
</div>

As you scroll past the element on your right by 300px, it will appear on screen.

Sequencing

If you want to have a set of animations start one after the other then you can set a sequence time in ms using the data-sequence attribute, then define the order with data-id.

<div class="animated-parent" data-sequence='1000'>
	<h3 class="animated animate__bounce-in-left" data-id='1'>I appear first</h3>
	<h3 class="animated animate__bounce-in-right" data-id='2'>I appear second</h3>
	<h3 class="animated animate__bounce-in-up" data-id='3'>I appear last</h3>
</div>

You can see that our 3 headings are now entering the viewport at set intervals of 1 second (1000 ms), we have also set 3 different animations on each element.

Animation speed

Currently you can define 4 speeds, the default which requires nothing then animated-slow, animated-slower and animated-slowest.

<div class="animated-parent" data-appear-top-offset='-300'>
	<h3 class="animated animate__bounce-in-left">I'm regular speed</h3>
	<h3 class="animated animate__bounce-in-left animated-slow">I'm slow speed</h3>
	<h3 class="animated animate__bounce-in-left animated-slower">I'm slower speed</h3>
	<h3 class="animated animate__bounce-in-left animated-slowest">I'm slowest speed</h3>
</div>

Being able to vary the speed your animations complete will allow you to create some eye catching effects.

Animate once

By default all animations will reset when they leave the viewport, and re-run when they come into the viewport again, you can disable this behavior, and only have the animation run once when its first encountered by adding the animate-once class.

<div class="animated-parent animate-once">
		<h3 class="animated animate__bounce-in-left">I'm an animated heading!</h3>
	</div>

If you scroll the animated heading to the right, out of sight, and then scroll back to it, it will not re-animate. when using the animate-once class the animation will not re-run until the page has been re-loaded.

Animate on click

Its possible to trigger an animation on click, by adding the animate-on-click class, and giving the button or link the data attribute data-target=''. The value of the data-target='' should be a specific class that has been given to the animated element.

<button class='animate-on-click button button--green' data-target='click-me'>
	Click me
</button>
<h3 class='animated animate__bounce-in-down click-me animate__fade-out-right'>
	I animated in when you clicked the button!
</h3>

Click the button below to animate the heading on the right, click it again to make it disappear using a different animation.

Click me

I animated in when you clicked the button!

Delay animation

If you do not wish to use sequencing, you can use delays on a per element basis. Delays vary from .25 seconds, to 3.5 seconds.

<div class="animated-parent">
	<h3 class="animated animate__bounce-in-left animation-delay-3000">
		My animation has been delayed by 3 seconds!
	</h3>
</div>

The heading on the right has a 3 second delay set on it, 3 seconds after it scrolls into the viewport it will animate.

Animation list

Below you will find a list of all 34 animations and their class names. Animations look great, and are proven to improve engagement with your site, BUT please use them responsibly. Used sensibly animations will enhance the user experience, used absolutely everywhere they will annoy, or may even slow down viewing. less is more.

Bounce in

<div class="animated-parent">
	<div class="animated animate__bounce-in"></div>
</div>

Bounce in down

<div class="animated-parent">
	<div class="animated animate__bounce-in-down"></div>
</div>

Bounce in right

<div class="animated-parent">
	<div class="animated animate__bounce-in-right"></div>
</div>

Bounce in up

<div class="animated-parent">
	<div class="animated animate__bounce-in-up"></div>
</div>

Bounce in left

<div class="animated-parent">
	<div class="animated animate__bounce-in-left"></div>
</div>

Fade in down short

<div class="animated-parent">
	<div class="animated animate__fade-in-down-short"></div>
</div>

Fade in up short

<div class="animated-parent">
	<div class="animated animate__fade-in-up-short"></div>
</div>

Fade in left short

<div class="animated-parent">
	<div class="animated animate__fade-in-left-short"></div>
</div>

Fade in right short

<div class="animated-parent">
	<div class="animated animate__fade-in-right-short"></div>
</div>

Fade in down

<div class="animated-parent">
	<div class="animated animate__fade-in-down"></div>
</div>

Fade in up

<div class="animated-parent">
	<div class="animated animate__fade-in-up"></div>
</div>

Fade in left

<div class="animated-parent">
	<div class="animated animate__fade-in-left"></div>
</div>

Fade in right

<div class="animated-parent">
	<div class="animated animate__fade-in-right"></div>
</div>

Fade in

<div class="animated-parent">
	<div class="animated animate__fade-in"></div>
</div>

Grow in

<div class="animated-parent">
	<div class="animated animate__grow-in"></div>
</div>

Shake

<div class="animated-parent">
	<div class="animated animate__shake"></div>
</div>

Shake up

<div class="animated-parent">
	<div class="animated animate__shake-up"></div>
</div>

Rotate in

<div class="animated-parent">
	<div class="animated animate__rotate-in"></div>
</div>

Rotate in up left

<div class="animated-parent">
	<div class="animated animate__rotate-in-up-left"></div>
</div>

Rotate in up right

<div class="animated-parent">
	<div class="animated animate__rotate-in-up-right"></div>
</div>

Rotate in down right

<div class="animated-parent">
	<div class="animated animate__rotate-in-down-right"></div>
</div>

Rotate in down left

<div class="animated-parent">
	<div class="animated animate__rotate-in-down-left"></div>
</div>

Rotate in down right

<div class="animated-parent">
	<div class="animated animate__rotate-in-down-right"></div>
</div>

Roll in

<div class="animated-parent">
	<div class="animated animate__roll-in"></div>
</div>

Wiggle

<div class="animated-parent">
	<div class="animated animate__wiggle"></div>
</div>

Swing

<div class="animated-parent">
	<div class="animated animate__swing"></div>
</div>

Tada

<div class="animated-parent">
	<div class="animated animate__tada"></div>
</div>

Wobble

<div class="animated-parent">
	<div class="animated animate__wobble"></div>
</div>

Pulse

<div class="animated-parent">
	<div class="animated animate__pulse"></div>
</div>

Light speed in right

<div class="animated-parent">
	<div class="animated animate__light-speed-in-right"></div>
</div>

Light speed in left

<div class="animated-parent">
	<div class="animated animate__light-speed-in-left"></div>
</div>

Flip

<div class="animated-parent">
	<div class="animated animate__flip"></div>
</div>

Flip in X

<div class="animated-parent">
	<div class="animated animate__flip-in-x"></div>
</div>

Flip in Y

<div class="animated-parent">
	<div class="animated animate__flip-in-y"></div>
</div>