Is it possible to animate a CSS variable using jquery?

Question

I'm new to Web development and javascript. At the moment, I've got a page with a button on it, and when it is pressed, it changes the value of one of my css variables. The result of pushing the button is that certain parts of the page instantaneously change colour. I wanted to alter this behaviour so that the change in colour is gradual. But I can't seem to get it to work. My code is below:

HTML

<div id="background">
  <div id="quote-box">
    <div id="text-wrapper">
      <p id="text" class="cutout-text">I think, therefore I am.</p>
    </div>
    <div id="author-wrapper">
      <p id="author" class="cutout-text">- Rene Descartes</p>
    </div>
    <div id="buttons-wrapper">
      <a href=# id="tweet-quote">
        <div class="icon cutout-bg">
          <i class="fa fa-twitter remains"></i>
        </div>
      </a>
      <div id="buttons-spacer"></div>
      <div id="new-quote" class="button cutout-bg">
        <p class=".remains">New Quote</p>
      </div>
    </d>
  </div>
</div>

SCSS

:root {
  --bg-colour: blue;
  --box-colour: white;
  --box-height: 250px;
  --box-width: 500px;
  --button-height: 3em;
}

@mixin center-content {
  align-items: center;
  display: flex;
  justify-content: center;
}

* {
  margin: 0;
  padding: 0;
}

*:link {
  text-decoration: none;
}

#background {
  @include center-content;
  background-color: var(--bg-colour);
  height: 100vh;
  width: 100vw;
}

#quote-box {
  background-color: var(--box-colour);
  border-radius: 2%;
  height: var(--box-height);
  padding: 50px;
  width: var(--box-width);
}

.cutout-text {
  color: var(--bg-colour);
}

.cutout-bg {
  background-color: var(--bg-colour);
}

.remains {
  color: var(--box-colour);
  font-size: 1.6em;
  padding: 5px;
}

#text-wrapper {
  font-size: 2em;
  margin-bottom: 1em;
  text-align: center;
  width: var(--box-width);
}

#author-wrapper {
  font-size: 1.2em;
  margin-bottom: 3.6em;
  text-align: right;
  width: var(--box-width);
}

#buttons-wrapper {
  display: flex;
  width: var(--box-width)
}

#buttons-spacer {
  flex-grow: 1;
}

.icon {
  @include center-content;
  border-radius: 10%;
  height: var(--button-height);
  width: var(--button-height);
}

.button {
  @include center-content;
  border-radius: 7%;
  color: var(--box-colour);
  height: var(--button-height);
  width: calc(var(--button-height) * 3);
}

.button:hover {
  cursor: pointer;
}

JQUERY


 const QUOTES = [
    "Veni, vidi, vici",
    "I think, therefore there I am."
  ];
  
 const COLOURS = [
    "orange",
    "blue",
    "red",
    "purple"
  ];

function randomColour() {
  return COLOURS[Math.floor(Math.random() * COLOURS.length)];
}

function randomQuote() {
  return QUOTES[Math.floor(Math.random() * QUOTES.length)];
}

function randomState() {
  var colour = randomColour();
  var quote = randomQuote();
  var author =  "Random Quote Machine";
  return {
    colour: colour, quote: quote, author: author}
}

function initialView() {
  let state = randomState();
  $(":root").css('--bg-colour', state.colour);
  $("#text").text(state.quote);
  $("#author").text(state.author);
}

function nextView() {
  let state = randomState();
  $(":root").animate({'--bg-colour': state.colour}, "slow");
}


function respondToButton() {
  $(".button").on("click", nextView)
}

$(document).ready(function() {
  initialView();
  respondToButton();
});

The jquery function initialView() works as expected, it styles the page according to the values stored in state. The page updates instantaneously.

The alternative function nextView() is the function I'm having trouble with. I expected that when I click on a .button element, the CSS variable --bg-colour would begin animating, which would be portrayed as the background of the page changing colour gradually. In reality, nothing happens when I click the button. However, The function respondToButton() definately works, which can be verified by switching nextView to initialView. Then, when the button is pressed, the background instantly changes colour.

What can I do to fix nextView() so it does what I intended?

You can just use CSS transition for the background color property. — Terry
– Terry, Commented Jan 8, 2022 at 21:02
There are better ways to do this type of animation, but to answer your question as to how you were trying to achieve it, you can't target CSS text like regular HTML elements on the DOM. For that, you need to use the CSSOM -- see the reference: developer.mozilla.org/en-US/docs/Web/API/CSS_Object_Model — skyline3000
– skyline3000, Commented Jan 8, 2022 at 21:49

mrmonsieur · Accepted Answer · 2022-01-08 20:59:14Z

1

I found this

All animated properties should be animated to a single numeric value, except as noted below; most properties that are non-numeric cannot be animated using basic jQuery functionality (For example, width, height, or left can be animated but background-color cannot be, unless the jQuery.Color plugin is used)

on the following site: https://api.jquery.com/animate/. It seems it is a jQuery problem so you could use a plugin, or use css since the background-colourproprty can be animated. Just do something like

/* css */
#background, .cutout-text, .cutout-bg {
  transition: background-color 400ms linear;
}

/* jQuery */

function nextView() {
  let state = randomState();
  $(":root").css('--bg-colour', state.colour);
}

answered Jan 8, 2022 at 20:59

mrmonsieur

3341 silver badge5 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Is it possible to animate a CSS variable using jquery?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related