Animations

Prysm supports CSS3 animations. They provide a powerful framework to describe complex animations over many element properties as well as their easing methods.

 /* The animation code */
@keyframes example {
    from {background-color: red;}
    to {background-color: yellow;}
}

/* The element to apply the animation to */
div {
    width: 100px;
    height: 100px;
    background-color: red;
    animation-name: example;
    animation-duration: 4s;
}

Additional resources are available here:

• https://www.w3schools.com/css/css3_animations.asp
• https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations

Additionally JavaScript code can be used to animate styles of elements. When possible, prefer CSS3 animations as they are evaluated in C++ and are significantly faster performance-wise.

Ordering of Keyframe rules #

Repeating @keyframes rules will override the previous ones for the properties that they share. Example:

@keyframes anim {
    0% {
        transform: scale(1) rotate(0deg);
        background-color: black;
    }
    100% {
        transform: scale(1) rotate(360deg);
        background-color: #3498db;
    }
}

@keyframes anim {
    0% {
        opacity: 1;
        transform: translateX(100px);
    }
    100% {
        opacity: 1;
        transform: translateX(100px);
    }
}

Here the background-color property will continue being animated even though it is not present in the second animation.

Web Animations API #

Prysm also supports a subset of the Web Animations API and gives low-level control over animations from JavaScript.

The developer can access the Animations of a DOM node through the Node.getAnimations() method, which returns an array of all animations that are resolved for this element.

Developers can use methods like play, pause, playFromTo and attributes like currentTime to control the playback. playFromTo is a specific Prysm-only API that extends the Web Animations to give easier control to UI developers. The signature of the method is playFromTo(startTimeMs, pauseTimeMs). When called, the animation will seek to startTimeMs and pause when it reaches pauseTimeMs. Both units are in milliseconds counted from the beginning of the animation. Calling play, pause or any other control API while the animation hasn’t reached its pauseTimeMs will cancel the scheduled pause.

Complex Animations #

Prysm’s implementation of the Web Animations API provides a great and easy way to add playback control to animations, but it doesn’t have any functionalities, which enable the creation of more complex animations. CSS animations should always be the preferred choice over JavaScript animations, because CSS animations are faster, as they are evaluated in C++

There are plenty of JavaScript libraries, which can be used for the creation of complex CSS animations. Prysm supports [Anime.js](https://animejs.com/ - a lightweight JavaScript animation library, which works with any CSS Properties. Developers should keep in mind, that some of the examples on the documentation page of Anime.js will not work in Prysm, as they use some unsupported HTML and CSS features. However, there are working alternatives to the unsupported features. The following list should be used to replace the unsupported features with the working alternatives in Prysm:

SVG animations, using Anime.js are not supported.