OiO.lk Community platform!

Oio.lk is an excellent forum for developers, providing a wide range of resources, discussions, and support for those in the developer community. Join oio.lk today to connect with like-minded professionals, share insights, and stay updated on the latest trends and technologies in the development field.
  You need to log in or register to access the solved answers to this problem.
  • You have reached the maximum number of guest views allowed
  • Please register below to remove this limitation

Way to determine the exact style properties currently being applied by a web animation (without being mixed in with all styles currently applied)

  • Thread starter Thread starter Blasterdude8
  • Start date Start date
B

Blasterdude8

Guest
I'm working on a project where I'd like to be able to determine exactly what style properties an animation is currently applying to an element, and ideally only those changes imparted by the animation (though if there are multiple animations currently acting on an element it's fine and maybe even preferred if the result is a list / object of all style properties actively imparted by any animations on the element). I've seen some quality examples using getComputedStyle() and I think that's fairly close to what I want but ideally I'd like an object or css string that only contains the style properties that are being applied by the animation (so no baseline style params that come from a css file or applied by other means).

Given the example below, I'd want to be able to know exactly how the scale and rotate properties are set no matter where I paused the animation without having to sort through inherent properties like padding or the blue color imparted by the other button.

I've looked through the web animation API docs pretty extensively and I haven't found anything to directly address my needs. A reasonable naive approach is to look at the first or last (depending on animation direction) keyFrameEffect object in the animation and inspect the property value pairs for relevant properties but with how many ways animations can be paused or end at in between / unexpected spots in the animation cycle this doesn't seem like a thorough solution. For example, this would not work if the animation is paused or even in a finish state if a value such as iterationStart is set since it now offsets the finish state away from the final keyframe.

Perhaps there's a way to take the animation object and apply its exact current state to an otherwise blank object via commitStyles() or something so the resulting styles object on the blank element is contains only properties applied by the animation? I worry about custom elements / properties but maybe I'm overthinking it.

No matter what it's critical I don't directly change the element being animated or any of its properties so I'd need to be careful and make sure the commitStyles only affected the blank object. Possibly by changing the target of the keyframes then setting it back when finished?

Thanks in advance for any suggestions!

Example:


Code:
const newspaper = document.querySelector(".newspaper");
const colorChange = document.querySelector(".color-change");
const pauseButton = document.querySelector(".pause");
const finish = document.querySelector(".finish");

// I want a way to directly get the current value of these properties 
// without being mixed in with other non animation related css properties
const newspaperSpinning = [
  { transform: "rotate(0) scale(1)" },
  { transform: "rotate(360deg) scale(0.7)" },
];

const newspaperTiming = {
  duration: 2000,
  iterations: 999,
  fill: 'forwards',
  iterationStart: 0.3
};

const newspaperKeyFrames = new KeyframeEffect(
  newspaper, // element to animate
  newspaperSpinning,
  newspaperTiming, // keyframe options
);

const animation = new Animation(
  newspaperKeyFrames,
  document.timeline,
);


newspaper.addEventListener("click", () => {
  animation.play()
});

colorChange.addEventListener("click", () => {
  newspaper.style.color = 'blue';
});

pauseButton.addEventListener("click", () => {
  animation.pause();
});

finish.addEventListener("click", () => {
  animation.finish();
});

Code:
html,
body {
  height: 100%;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: black;
}

button {
  cursor: pointer;
}

.newspaper {
  padding: 0.5rem;
  text-transform: uppercase;
  text-align: center;
  background-color: white;
  cursor: pointer;
}

Code:
<div class="newspaper">click to start spinning newspaper animation</div>
<button class="color-change">click to change the color</button>
<button class="pause">click to pause the animation</button>
<button class="finish">click to finish the animation</button>
<p>I'm working on a project where I'd like to be able to determine exactly what style properties an animation is currently applying to an element, and ideally only those changes imparted by the animation (though if there are multiple animations currently acting on an element it's fine and maybe even preferred if the result is a list / object of all style properties actively imparted by any animations on the element). I've seen some <a href="https://stackoverflow.com/a/54602379">quality examples</a> using <code>getComputedStyle()</code> and I think that's fairly close to what I want but ideally I'd like an object or css string that only contains the style properties that are being applied by the animation (so no baseline style params that come from a css file or applied by other means).</p>
<p>Given the example below, I'd want to be able to know exactly how the <code>scale</code> and <code>rotate</code> properties are set no matter where I paused the animation without having to sort through inherent properties like <code>padding</code> or the blue <code>color</code> imparted by the other button.</p>
<p>I've looked through the web animation API docs pretty extensively and I haven't found anything to directly address my needs. A reasonable naive approach is to look at the first or last (depending on animation direction) keyFrameEffect object in the animation and inspect the <a href="https://developer.mozilla.org/en-US/docs/Web/API/KeyframeEffect/getKeyframes#property_value_pairs" rel="nofollow noreferrer">property value pairs</a> for relevant properties but with how many ways animations can be paused or end at in between / unexpected spots in the animation cycle this doesn't seem like a thorough solution. For example, this would not work if the animation is paused or even in a finish state if a value such as <code>iterationStart</code> is set since it now offsets the finish state away from the final keyframe.</p>
<p>Perhaps there's a way to take the animation object and apply its exact current state to an otherwise blank object via <a href="https://developer.mozilla.org/en-US/docs/Web/API/Animation/commitStyles" rel="nofollow noreferrer">commitStyles()</a> or something so the resulting styles object on the blank element is contains only properties applied by the animation? I worry about custom elements / properties but maybe I'm overthinking it.</p>
<p><strong>No matter what it's critical I don't directly change the element being animated or any of its properties so I'd need to be careful and make sure the commitStyles only affected the blank object.</strong> Possibly by changing the <a href="https://developer.mozilla.org/en-US/docs/Web/API/KeyframeEffect/target" rel="nofollow noreferrer">target of the keyframes</a> then setting it back when finished?</p>
<p>Thanks in advance for any suggestions!</p>
<p>Example:</p>
<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>const newspaper = document.querySelector(".newspaper");
const colorChange = document.querySelector(".color-change");
const pauseButton = document.querySelector(".pause");
const finish = document.querySelector(".finish");

// I want a way to directly get the current value of these properties
// without being mixed in with other non animation related css properties
const newspaperSpinning = [
{ transform: "rotate(0) scale(1)" },
{ transform: "rotate(360deg) scale(0.7)" },
];

const newspaperTiming = {
duration: 2000,
iterations: 999,
fill: 'forwards',
iterationStart: 0.3
};

const newspaperKeyFrames = new KeyframeEffect(
newspaper, // element to animate
newspaperSpinning,
newspaperTiming, // keyframe options
);

const animation = new Animation(
newspaperKeyFrames,
document.timeline,
);


newspaper.addEventListener("click", () => {
animation.play()
});

colorChange.addEventListener("click", () => {
newspaper.style.color = 'blue';
});

pauseButton.addEventListener("click", () => {
animation.pause();
});

finish.addEventListener("click", () => {
animation.finish();
});</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code>html,
body {
height: 100%;
}

body {
display: flex;
justify-content: center;
align-items: center;
background-color: black;
}

button {
cursor: pointer;
}

.newspaper {
padding: 0.5rem;
text-transform: uppercase;
text-align: center;
background-color: white;
cursor: pointer;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code><div class="newspaper">click to start spinning newspaper animation</div>
<button class="color-change">click to change the color</button>
<button class="pause">click to pause the animation</button>
<button class="finish">click to finish the animation</button></code></pre>
</div>
</div>
</p>
Continue reading...
 

Online statistics

Members online
0
Guests online
4
Total visitors
4
Top