Animation Libraries Support

Overview

Some animation libraries are supported in Prysm which runs out of the box.

When to use animation libraries

The use of animation libraries is recommended if there are a lot of different scenarios and the project includes convoluted cases. However, if the project doesn’t have such requirements, using CSS only is the recommended approach.

Defining a CSS @keyframes rule and using it doesn’t directly give much control. The animation is predefined and runs as it is. However, there are some approaches with JavaScript and the animation can be paused, resumed, restarted and with some more effort - reversed.

Even though this might be enough, you can’t execute any code at a specific time of the animation which falls under the “convoluted cases” scenario.

A second-best approach would be to use JavaScript animations. An example is below.

A simple requestAnimationFrame animation: 

const element = document.querySelector('.element');
let xPos = 0;

function animate() {
  xPos += 1;
  element.style.transform = `translateX(${xPos}px)`;
  requestAnimationFrame(animate);
}

animate();

The above example runs the animation to infinity but the duration for the animation can be added with not much effort - Timing your animations with requestAnimationFrame.

Extending this further, a simple API can be created to run an animation on an element with the desired property and duration.

GSAP (core)

Library: https://greensock.com/gsap/

Features like Easing, Controlling Animations, Sequencing, Timeline Control, Callbacks and others work.

You can get more examples from the Getting Started with GSAP page. A very basic example is added below so you can start testing right away.

Example 

<html>
<head>
  <style>
    .element {
      width: 100px;
      height: 50px;
      background: #57A818;
    }
  </style>
</head>
<body>
  <div id="element-1" class="element"></div>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/gsap.min.js"></script>
  <script>gsap.to("#element-1", { duration: 1, x: 20, rotation: 360, ease: "bounce", });</script>
</body>
</html>

You might need a polyfill if the library is installed as an npm package:

// Polyfill for GSAP
CSSStyleDeclaration.prototype.removeAttribute = function (property) {
    this[property] = '';
};

More examples:

AnimeJS

Library: https://animejs.com/

Example 

<html>
<head>
  <style>
    .square {
      width: 50px;
      height: 50px;
      background-color: #F64E4D;
    }
  </style>
</head>
<body>
  <div class="square"></div>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js"></script>
  <script>
    anime({
      targets: '.square',
      translateX: 200,
      translateY: 50,
      scale: 2,
      rotate: '360deg',
      borderRadius: ['0%', '50%'],
      easing: 'easeInOutQuad'
    });
  </script>
</body>
</html>

Framer Motion

Library: https://www.framer.com/motion/

An open-source library for React.

Example

The example is located within your Prysm package in Samples\uiresources\ReactFramerMotion.

To run the sample, go to its root folder, run npm ci and then npm run build. Then run the index.html generated in the dist folder in the Prysm Player.

There is a README.md included for active development mode.

Limitations

As mentioned earlier, each library capability is limited to what is supported in Prysm.

The libraries above should run out of the box without any errors.

This includes DOM API features, CSS features, SVG support and specific behaviors like when using getComputedStyle, Prysm updates the object after 2 to 3 frames after the element has changed.

← Accessing Computed Styles
Animations →