super-big-text

**JavaScript + jQuery effects**

## JS doesn’t do effects—CSS does - All the effects we see are created by CSS - JavaScript has no concept of animations—it’s all CSS - We trigger CSS into action with JS

That’s not entirely true, just simplified. JS can do effects with the `<canvas>` tag: it’ll do full 2D & 3D graphics and interactions.

## Trigger with classes 1. JavaScript will add a class to an element 2. The class will have associated CSS 3. That `animation` or `transition` will be triggered

interactive

<div></div>

div { background-color: darkred; transition: all .5s linear; } .is-clicked { background-color: orange; }

num text 3 Remember that the `transition` must **always** be on the default state—never on the `:hover` or the class that JS adds.

div { height: 200px; width: 200px; }

$('div').on('click', function (e) { $(this).toggleClass('is-clicked'); });

<script src="proxy.php?url=https%3A%2F%2Fwww.github.com%2F%3Ca+href%3D"https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script" rel="nofollow">https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

interactive

<div></div>

div { height: 200px; width: 200px; } .is-clicked { animation: spin 1s ease; } @keyframes spin { 0% { transform: rotate(0); } 100% { transform: rotate(360deg); } }

num text 5 The `.is-clicked` class doesn’t exist anywhere in our HTML—it’s added by the JavaScript code. It’s a fairly common convention to prefix the classes with `is-` or `js-` to denote that JavaScript is the thing that is affecting this class.

div { height: 200px; width: 200px; background-color: darkred; }

$('div').on('click', function (e) { $(this).addClass('is-clicked'); });

<script src="proxy.php?url=https%3A%2F%2Fwww.github.com%2F%3Ca+href%3D"https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script" rel="nofollow">https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

## Events Animations & transitions dispatch events that our JS can respond to: - `animationstart`, `animationiteration`, `animationend` - `transitionend`

interactive

<div></div>

div { height: 200px; width: 200px; background-color: darkred; animation: none 1s ease; } .is-clicked { animation-name: spin; } @keyframes spin { 0% { transform: rotate(0); } 100% { transform: rotate(360deg); } }

$('div').on('click', function (e) { $(this).addClass('is-clicked'); }); $('div').on('animationend', function (e) { $(this).removeClass('is-clicked'); });

num text 5 Here we’re listening to the special `animationend` event that isn’t triggered by the user, but’s triggered by the CSS when the keyframe animation completes. This event allows us to do things after the animation has finished playing.

<script src="proxy.php?url=https%3A%2F%2Fwww.github.com%2F%3Ca+href%3D"https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script" rel="nofollow">https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

## Let’s no forget SVG! Treat it the same as any other HTML—just add classes, transitions & animations

interactive

<svg viewBox="0 0 200 200" width="200" height="200"> <circle fill="midnightblue" cx="100" cy="100" r="90" /> </svg>

circle { transition: all 1s ease; } .is-clicked { fill: purple; }

$('svg').on('click', function (e) { $('circle').toggleClass('is-clicked'); });

<script src="proxy.php?url=https%3A%2F%2Fwww.github.com%2F%3Ca+href%3D"https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script" rel="nofollow">https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

## Videos & tutorials - [JavaScript + jQuery effects ➔](/topics/javascript-jquery-effects/)