Table of Contents
In a perfect world, JavaScript will sit quietly in its side of the dinner table. CSS will sit quietly at the other side. HTML will just be as awkward as ever, but we won't talk about it for now. Anyway, to a certain extent, this perfect world existed for quite some time. The kinds of things people built for a long time fell within the confines of this perfect world.
Today, what people build for the web has changed. Both JavaScript and CSS are no longer little children. Unlike the characters on the Simpsons, they have grown up and aged in a world that increasingly blurred the lines between what JavaScript and CSS should do:
[ the Simpsons family has aged really well over the years (credit: usps) ]
This blurring is extremely apparent when it comes to animations. Traditionally, when talking about the HTML world, you created all of your animations using JavaScript. With the rapid acceptance of CSS3 animations and transitions, nowadays you are seeing more and more animations created purely using CSS. What you are also seeing is CSS and JavaScript working together to make animations.
In this tutorial, I will touch upon one small but very important intersection where JavaScript and CSS animations meet. This point is one where you use JavaScript to analyze the values of CSS properties as they are being animated. I know you are as excited about how to do this as I am.
Let's get started.
Nothing makes something boring and abstract make more sense than an example, so let's look at an example of what I am referring to. Hover over the blue image below using your mouse cursor:
Notice that as you are hovering over the image, the image slides up. As the slide is happening, you should see some numbers rapidly changing below the image. These numbers correspond to the value of the top CSS property that is being animated to give you the sliding effect that you see.
There are two things you will need to learn in order to inspect the value of a CSS property while it is being animated. The first is the star of this episode, the JavaScript function called getComputedStyle. This API gets the final, used value of any CSS property. Next, knowing when to call getComputedStyle is important - especially if you are continuously needing to check for a particular value. That's the second piece of the puzzle.
Let's look at both of these pieces in greater detail.
Normally, the way you get the value of a particular CSS property is by using the following approach:
myElement.style.CSSPropertyName
If you use this approach for getting the value for something that is animated, you will be disappointed. This approach only gets the value as defined by the style object that lives on each element. In other words, only values of properties defined explicitly in CSS or set via JavaScript will appear.
A property that is animating falls into neither of those two categories. Animated CSS properties and their values are determined only at runtime deep in the internals of your browser. A shallow approach that involves inspecting the style object will not work. You need something that cuts deeper, and that is made possible via the Surgeon-approved getComputedStyle function.
This function works as follows:
var myValue = getComputedStyle(myElement).CSSPropertyName;
You simply call the getComputedStyle function by passing it a reference to the object the CSS property is being applied to. You round it out by then specifying the name of the CSS property itself. This function then returns the final used value of the style you are looking for as it is applied to an object.
To make this more concrete, below is the snippet from my sliding example that returns the value of the top CSS property:
var textField = document.getElementById("results"); var imageTopPosition = getComputedStyle(image).top;
When this code runs, the value of my image element's top property is inspected and stored - even if that property is being animated.
Now that you know how to check the value of a CSS property that is being animated, the simpler challenge is figuring out when you want to run your code containing getComputedStyle.
More than likely, you want to check the value of something that is being animated continuously. This can be done by either using setInterval or by using the much more awesome requestAnimationFrame. Because we are dealing with animations and fiddling with them as they are running, requestAnimationFrame is designed for this sort of thing.
While I won't describe this function in great detail here, you can certainly get your spoonful of knowledge about it from my Animating with requestAnimationFrame tutorial. What I will discuss is how I used this function for this example.
Take a look at the following code:
var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame; requestAnimationFrame(updateValue); function updateValue() { var imageTopPosition = getComputedStyle(image).top; textField.textContent = imageTopPosition; requestAnimationFrame(updateValue); }
Notice that the updateValue function that contains our call to getComputedStyle exists in all its glory to help you get the value of whatever CSS property you want...which, in this case, is top. Because the requestAnimationFrame is sync'ed to your browser's refresh rate, every frame update results in your code getting called. That's exactly what we want.
You can use getComputedStyle in all situations that involve needing to poll the value of a CSS property. It isn't limited to just animations and transitions. Don't let the animation-heavy focus of this article keep you from enjoying the breadth of happiness getComputedStyle brings to the table.
The future will be littered with animations that combine the best that CSS and JavaScript have to offer. I can't say I've seen what that future will look like or what tips and techniques you will need to be successful. From where everything stands today, though, knowing how to get the value of animated properties using JavaScript is something that I am pretty certain you will be using a whole lot in the upcoming weeks, months, and years!
Just a final word before we wrap up. If you have a question and/or want to be part of a friendly, collaborative community of over 220k other developers like yourself, post on the forums for a quick response!
:: Copyright KIRUPA 2024 //--