When deciding between utilizing a Javascript animation library and generating dynamically injected <style> tags in the header, consider the pros and cons of each

Question

When deciding between utilizing a Javascript animation library and generating dynamically injected <style> tags in the header, consider the pros and cons of each

We are currently in the process of developing a sophisticated single-page application that allows users to create animations on various widgets. For example, a widget button can be animated from left to right with changes in opacity over a set duration. Additionally, one widget can trigger animations on another, creating layered transition effects.

Users have the ability to define and trigger these animations through JavaScript in a complex manner. The animations can be customized in different combinations, utilizing an object-oriented programming approach for animation data management. Users can also reverse, pause, and play the animations as needed.

In terms of animation technology, we are considering two options:

01 - Utilizing CSS Transitions by generating dynamic CSS classes and injecting them into the header of the page. This approach involves manipulating the DOM to handle class switching for animations.

02 - Using a JavaScript library such as Velocity.js or Greensock to animate the DOM elements directly using inline styles.

03 - Although we experimented with Web Animation API (and CSS Animation), we encountered some limitations that hindered its adoption.

We would greatly appreciate your feedback regarding the following approaches:

Approach 01:

Is it feasible to manage programmatically with JavaScript?
Can properties within style tags be dynamically edited without causing flickering or relying on complex regex?
Are there any issues associated with dynamically adding tags to the header, such as potential flickering?
Have you experienced performance drawbacks when running multiple parallel animations with CSS Transition?
Do you know of any projects that successfully utilize this approach?
How is the control of animation functions like reversing, stopping, and pausing handled?

Approach 02:

Do you believe this approach is generally more manageable with JavaScript?
Are there any drawbacks that would lead one to choose Approach 01 instead?
How is the control of animation functions managed in this approach?

We welcome any feedback you may have on this matter.

Here's a helpful article I came across: https://davidwalsh.name/css-js-animation

javascript jquery css css-transitions velocity

Answer 1

Answer №1

If you have dynamic animation that needs to be controlled during execution, it's best to use JavaScript instead of CSS. The choice of library for this task is up to your discretion.

Answer 2

If you have dynamic animation that needs to be controlled during execution, it's best to use JavaScript instead of CSS. The choice of library for this task is up to your discretion.

Answer 3

Answer №2

One downside of utilizing a JavaScript library is the need to troubleshoot both hardware and JS animations, in addition to understanding the idiosyncrasies of those libraries. Over the past three years, I've discovered that CSS animations and transitions are easier to work with and debug, making them a preferable choice. Efficient debugging plays a crucial role in web animations.

Nevertheless, there are numerous user-friendly tools available (or libraries) that simplify handling more intricate CSS animations and transitions. If I were in your shoes, I would start by exploring the existing libraries to see if any suit your needs.

Below are two smaller libraries that leverage CSS animations:
https://github.com/FelixRilling/microAnimate
https://github.com/daniel-lundin/snabbt.js

Many of these options can assist you in saving user animations as described.

An example using microAnimate:

var myAdvancedAnimation = new Anim(
  document.getElementById("square"), {
    "0%": [
      ["width", "200px"],
      ["color", "transparent"]
    ],
    "20%": [
      ["width", "100px"],
      ["color", "#fff"],
      function() {
        console.log("callback 2");
      }
    ],
    "100%": [
      ["width", "60px"],
      ["color", "red"],
      function() {
        console.log("callback 3");
      }
    ]
  }, {
    duration: 2000,
    ticklength: 30,
    ease: true,
    retainEndState: true,
    loop: false
  }
);

As illustrated, saving a specific animation for users would be straightforward since it involves objects and arrays that can be stored in localStorage or a centralized database. Furthermore, this approach simplifies coordinating different types of animations.

Answer 4

One downside of utilizing a JavaScript library is the need to troubleshoot both hardware and JS animations, in addition to understanding the idiosyncrasies of those libraries. Over the past three years, I've discovered that CSS animations and transitions are easier to work with and debug, making them a preferable choice. Efficient debugging plays a crucial role in web animations.

Nevertheless, there are numerous user-friendly tools available (or libraries) that simplify handling more intricate CSS animations and transitions. If I were in your shoes, I would start by exploring the existing libraries to see if any suit your needs.

Below are two smaller libraries that leverage CSS animations:
https://github.com/FelixRilling/microAnimate
https://github.com/daniel-lundin/snabbt.js

Many of these options can assist you in saving user animations as described.

An example using microAnimate:

var myAdvancedAnimation = new Anim(
  document.getElementById("square"), {
    "0%": [
      ["width", "200px"],
      ["color", "transparent"]
    ],
    "20%": [
      ["width", "100px"],
      ["color", "#fff"],
      function() {
        console.log("callback 2");
      }
    ],
    "100%": [
      ["width", "60px"],
      ["color", "red"],
      function() {
        console.log("callback 3");
      }
    ]
  }, {
    duration: 2000,
    ticklength: 30,
    ease: true,
    retainEndState: true,
    loop: false
  }
);

As illustrated, saving a specific animation for users would be straightforward since it involves objects and arrays that can be stored in localStorage or a centralized database. Furthermore, this approach simplifies coordinating different types of animations.

When deciding between utilizing a Javascript animation library and generating dynamically injected <style> tags in the header, consider the pros and cons of each

Answer №1

Answer №2

Similar questions

Styling hover effects on links in Bootstrap 4 with underlines

Can someone please advise me on how to output the value of a var_dump for an array using console.log?

Is it possible to have the cursor rotate or animate by 45 degrees when clicked

What is the reason for the excessive width of the final column in this table?

The installed NPM package does not contain the necessary TypeScript compiled JS files and declaration files

Examining the process through which an element attains focus

Activating/Deactivating Checkbox using Jquery

When access to Ajax .responseText in an alert it can be displayed, however it cannot be stored in a variable or

Start by creating a set of vertices and triangles to be utilized by the vertex shader

The user interface design transforms as a PDF file is being generated through html2pdf

Tips on revealing concealed information when creating a printable format of an HTML document

identify when the React component has reached the bottom of the element by reading the

Using JavaScript to place image data on the canvas in an overlay fashion

How to apply custom styling to a specific element within an Angular Material 2 component using CSS based on its Id or

What is the secret to keeping links opaque even after they have been hovered over and their target is visible?

Unforeseeable actions of Bootstrap-datepicker

Tips for adjusting the placement of an object within a table

Using TestCafe selectors to target a classname that has multiple matching nodes

Post request in ExpressJS fails to redirect user after submission

Express: when req.body is devoid of any data