Search code examples
javascriptanimationstripe-paymentscss-animationsgsap

How is this JS animation created?

Stripe and other sites use this style of "screencast demo" on their marketing pages. Instead of showing a video of their platform or a gif, they create a stylistic JS animation using real HTML elements.

If you inspect their animations, you can see that all of the moving parts are all div elements. No images, videos, gifs, or svgs are used at all.

Animations: https://stripe.com/billing

JS Script Example: https://b.stripecdn.com/site-srv/assets/compiled/js/sprockets-js-v3/billing/interactive-invoice-806d1d5b2d4f6d9c5c27.min.js

I can see the minified JS files from the webpage that are included to create the animation. Its hard to tell if they wrote this JS themselves (seems painstaking considering how many of these animations they have on their site) or if they use a desktop app (like Adobe AfterEffects or similar) or if they use a JS package (like GreenSock).

So what tools are likely used to build these?

Solution

  • If you inspect the elements with F12 and go to the "Computed" tab, you will see that they have CSS transition properties:

    enter image description here

    CSS transition properties simply tells the browser to animate a CSS property from the current value to the new value. Is a really easy and performant way to have animations. I Highly recommend them.

    Here is a snippet with a demo I've just done:

    setTimeout(function() {
    document.querySelector(".yay").classList.add("anim");
}, 1000);
    .yay {
    width: 100px;
    height: 100px;
    background-color: red;
    position: absolute;
    top: 0;
    left: 0;
    transition: background-color 500ms, top 500ms, left 500ms;
}
.anim {
    top: 100px;
    left: 100px;
    background-color: blue;
}
    <div class="yay" />

    You simply have to change its transitioned CSS properties via JavaScript by modifying its class (like this demo) or by modifying the object style properties directly. The browser will do the rest. Pretty cool actually. You can even modify the properties with pseudo-selectors like ::hover, ::active, etc and they will also animate. Zero JavaScript involved!

    What they do is to have those properties animated by CSS and they simply set the destination positions/sizes/whatever each X seconds.

    Addendum: Is easy that all the animations are made using an external tool that converts everything to CSS transitions, but because the market is filled of dozens of tools and they don't set any signature when they export to HTML5, is impossible to know if they've done it manually for each element or not. By the way, is not that hard to create the example you have shown manually. If you are used to HTML5 in the end you lose the same time when doing it with an external tool. By "JS packages" there are packages that use CSS transitions and others that have their own timeline. GreenSock do not use CSS transitions, so definitely is not GreenSock.

    Specifically in Stripe case, they use "Animate Plus" as you can see here: https://b.stripecdn.com/site-srv/assets/compiled/js/sprockets-js-v3/external/animateplus-compat-2.0.1.js-490ccee558f4d2e2d207.min.js