Unforeseen outcomes when setting background colors with Anime.js

I've recently started experimenting with Anime.js. I have a piece of code that I'm using to animate a div element with an id of a.

anime({
    targets: "#a",
    translateX: 250,
    color: "#fff",
    backgroundColor: "hsl(200, 50%, 50%)",
    loop: true,
    direction: 'alternate',
    easing: 'easeInOutQuad'
});

The issue I'm facing is that when the animation starts, the background-color of the element appears black, even though the CSS doesn't specify a background color. After some investigation, it seems that the default background color of the element is rgba(0,0,0,0), and Anime.js may not work well with colors containing alpha channels. Adding a background color in the CSS does resolve the problem, but the alpha channel is not preserved during the animation.

If I want to animate from a transparent color like rgba(0,0,0,0) to a solid color, how can I achieve this using Anime.js? Unfortunately, my search didn't yield much information due to Anime.js being relatively new. If Anime.js doesn't support this feature, I'd appreciate any recommendations for other JavaScript animation libraries that do support animating colors with alpha channels.

To see what I've done so far, you can check out a quick demo I created on CodePen: CodePen Demo

javascriptcssanimation

Answer №1

Although it's a late response, I am currently experimenting with anime.js and came across your inquiry. You have the ability to set a starting value for the background animation.

$(document).ready(function() {
  anime({
    targets: ".box",
    translateX: 250,
    color: "#fff",
    backgroundColor: ["hsl(250, 75%, 50%)", "hsl(200, 50%, 50%)"],
    loop: true,
    direction: 'alternate',
    easing: 'easeInOutQuad'
  });
});
div {
  width: 20px;
  height: 20px;
  background: red;
  position: relative;
  left: 0;
}
<!DOCTYPE html>
<html>

  <head>
    <script data-require="<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="513b202434232811637f637f65">[email protected]</a>" data-semver="2.2.4" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.2.0/anime.js"></script>
    <script src="script.js"></script>
    <link rel="stylesheet" href="style.css" />
  </head>

  <body>
    <h1>Anime.js animate Background Color</h1>
    <div class="box"></div>
  </body>

</html>

Answer №2

It's not clear to me if anime.js supports opacity, but you can achieve this effect using JQuery animate along with JQuery UI.

$('#a').animate({ 'background-color': 'rgba(0, 0, 0, 0.7)' },1000);

You can find more information in How can I animate the opacity of the background of a div

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Encountering a problem creating a hover overlay effect on a transparent PNG image within a parent div that has a background color

I'm struggling with creating an overlay hover effect on an image that has transparency. The issue I'm facing is that the black background of the parent div element is filling in the transparent parts of the PNG image, making it look like those ar ...

htmlcsspngoverlaytransparency

ReactJS encounters errors even when the backend is returning a 200 OK status code

My ReactJS frontend receives an error when sending a GET request, even though the django backend terminal shows [10/Mar/2018 23:31:08] "GET /post/ HTTP/1.1" 200 930. I am using redux sagas in my project. In src/index.js: (index.js code snippet here) In ...

javascriptreactjsreduxredux-saga

When a form contains a ViewChild element, changes to the ViewChild element do not automatically mark the

Let's set the stage: MainComponent.html <form #someForm > <input type="text" name="title" [(ngModel)]="mainVar" /> <child-component /> <input type="submit" [disabled]="someForm.form.pristine" /> </form> ChildComp ...

javascripthtmlformsangularangular2-forms

"Aligning two images side by side in a horizontal

[enter image description here][1]I am trying to place two images on my website, but I am struggling to vertically align them properly. I have attempted using line-height and vertical alignment, however, I cannot seem to pinpoint the issue or identify any m ...

htmlcss

"Enhance your website with a unique Bootstrap 5 carousel featuring multiple

As a beginner in Bootstrap, I am currently working on an ecommerce template to learn about Bootstrap 5. I am interested in creating a carousel that displays multiple slides at once, like a products slider with left and right arrows. Is this possible in Bo ...

javascriptcsstwitter-bootstrapcarouselbootstrap-5

carousel/slider must be accessible

I have been searching for hours and still cannot find the perfect carousel/slider that I need. The one at this link is close to what I want, but it becomes inaccessible when JavaScript is disabled in the browser. I am looking for a jquery infinite carous ...

jquerycssjquery-uixhtml

Error: Trying to destructure a non-iterable object with useContext in React is not valid

ERROR [TypeError: Invalid attempt to destructure non-iterable instance. In order to be iterable, non-array objects must have a Symbol.iterator method.] Using UserContext : import React, { useContext, useEffect, useLayoutEffect, useState } from "reac ...

javascriptreactjsreact-nativereact-context

Utilizing the components within the range set by paper.setStart() and paper.setFinish() in Raphaels

My question has two parts - the first and second part. Let's consider an example code that I am working on. I am creating a map of my country with regions, and I want to perform actions on the entire map such as scaling or translating (as seen in the ...

javascriptraphael

An ELIFECYCLE error was encountered during the production deployment process, resulting in error number

I am currently struggling with a perplexing issue and urgently need to resolve it, so any guidance would be greatly appreciated. My project is built using Laravel and Vue, with Docker managing the image container. The application is deployed on AWS. The ...

javascriptnode.jslaravelvue.jswebpack

Continuously running loop to retrieve data

I've been working on a function that retrieves data from the backend and then assigns it to the state for display in a web browser. Although everything seems to be functioning correctly, I've noticed that every time I make a request, the function ...

javascriptreactjs

Easily accessible jQuery tabs with the option to directly link to a specific tab

I currently have tabs set up on my webpage. The code for these tabs is as follows: $('ul#tabs li a').click(function(){ var id = $(this).attr('id'); var counter = 1; $("ul#tabs a.current").removeClass('cur ...

javascriptjquerytabsaccessibility

The split() function returns a string that remains unaltered and intact, without any

I am attempting to separate this string: 120,00 m² into two distinct parts like this: 120 m² This is the code I have been using: var test = jQuery('#wpsight-listing-details-3 .span4:nth-child(4) .listing-details-value').html(); var pa ...

javascriptjquerysplit

Save the array as a variable in your JavaScript code so that you can easily access it

I am currently working on generating a list only when a specific page is visited using JS/jQuery. I then need to be able to access this list when navigating to other pages and retrieve the variables within it. How can I effectively store this list? Initia ...

javascriptjquery

Binding events within other events can be achieved using D3

Trying to implement code from Scott Murray's book "Interactive Data Visualization for the Web" to create versatile bar graphs. Though the code successfully generates and updates graphs, it seems that the sorting functionality is not functioning as exp ...

javascriptd3.js

Unable to get CSS First Child Pseudo Element to Work Properly

I'm having trouble with this code in CSS and would appreciate any help. I can't figure out why the margin-left won't apply to the first i element. Below is the CSS I'm using: header.site-header .right_side_menu i:first-child { marg ...

htmlcsscss-selectorspseudo-element

Unable to establish connection with Uploadthing due to a timeout error

I am facing timeout errors while setting up the upload feature. app/api/uploadthing/core.ts import { createUploadthing, type FileRouter } from "uploadthing/next"; import { auth } from "@clerk/nextjs"; const handleAuth = () => { c ...

javascriptreactjsnext.jsupload

Using either Canvas.toBlob or Canvas.toDataURL results in me obtaining an image with a transparent

Hey there! I'm currently working on a project that requires the user to crop and upload images. For cropping, I am utilizing react-cropper. My challenge lies in dealing with Chrome's limitation on dataURL to 65529 pixels as mentioned in this M ...

javascripthtmlgoogle-chromecanvasdata-uri

How to ensure router state synchronization in a custom Vue library component with <router-link>?

I'm currently in the process of developing a reusable navigation component that utilizes vue-router <router-link> for navigation. The unique aspect of this component is that the navigation elements change styles based on active links. When I im ...

javascriptvue.jsvue-router

HTML code displaying a fixed message at the top of the webpage

I'm working on a web page that has a lot of content. I need to have a message always visible at the bottom of the browser window, even when scrolling. Can anyone help me achieve this using simple CSS, HTML, jQuery, or PHP? Thanks! ...

phpjavascriptjqueryhtmlcss

Increase the jQuery Array

After successfully initializing an Array, how can I add items to it? Is it through the push() method that I've heard about? I'm having trouble finding it... ...

javascriptjquery