Trendy CSS has nice methods to place and transfer a bunch of parts relative to one another, equivalent to anchor positioning. That stated, there are cases the place it could be higher to take up the outdated methods for a little bit animation, saving effort and time.
We’ve at all times been capable of have an effect on a component’s construction, like resizing and rotating it. And after we change a component’s intrinsic sizing, its kids are affected, too. That is one thing we will use to our benefit.
Let’s say a number of circles want to maneuver in direction of and throughout each other. One thing like this:
Our markup is likely to be so simple as a factor that incorporates 4 youngster .circle parts:
So far as rotating issues, there are two choices. We will (1) animate the mum or dad container, or (2) animate every .circle individually.
Tackling that first choice might be finest as a result of animating every .circle requires defining and setting a number of animations moderately than a single animation. Earlier than we try this, we must make it possible for every .circle is contained within the factor after which completely place every one within it:
essential {
comprise: format;
}
.circle {
place: absolute;
&:nth-of-type(1){
background-color: rgb(0, 76, 255);
}
&:nth-of-type(2){
background-color: rgb(255, 60, 0);
proper: 0;
}
&:nth-of-type(3){
background-color: rgb(0, 128, 111);
backside: 0;
}
&:nth-of-type(4){
background-color: rgb(255, 238, 0);
proper: 0;
backside: 0;
}
}If we rotate the factor that incorporates the circles, then we would create a particular .animate class only for the rotation:
/* Utilized on (the mum or dad factor) */
.animate {
width: 0;
rework: rotate(90deg);
transition: width 1s, rework 1.3s;
} …after which set it on the factor with JavaScript when the button is clicked:
const MAIN = doc.querySelector("essential");
perform play() {
MAIN.className = "";
MAIN.offsetWidth;
MAIN.className = "animate";
}It appears to be like like we’re animating 4 circles, however what we’re actually doing is rotating the mum or dad container and altering its width, which rotates and squishes all of the circles in it as effectively:
Every .circle is mounted to a respective nook of the mum or dad with absolute positioning. When the animation is triggered within the mum or dad factor — i.e. will get the .animate class when the button is clicked — the width shrinks and it rotates 90deg. That shrinking pulls every .circle nearer to the factor’s heart, and the rotation causes the circles to change locations whereas passing by way of each other.
This method makes for a better animation to craft and handle for easy results. You’ll be able to even layer on the animations for every particular person factor for extra variations, equivalent to two squares that cross one another in the course of the animation.
/* Utilized on (the mum or dad factor) */
.animate {
rework: skewY(30deg) rotateY(180deg);
transition: 1s rework .2s;
.sq. {
rework: skewY(30deg);
transition: inherit;
}
} See that? The mum or dad factor makes a 30deg skew and flip alongside the Y-axis, whereas the 2 youngster .sq. parts counter that distortion with the identical skew. The result’s that you simply see the kid squares flip positions whereas shifting away from one another.
If we would like the squares to kind a separation with out the flip, right here’s a method to try this:
/* Utilized on (the mum or dad factor) */
.animate {
rework: skewY(30deg);
transition: 1s rework .2s;
.sq. {
rework: skewY(-30deg);
transition: inherit;
}
} This time, the factor is skewed 30deg, whereas the .sq. kids cancel that with a -30deg skew.
Setting skew() on a mum or dad factor helps rearrange the youngsters past what typical rectangular geometry permits. Any change within the mum or dad could be complemented, countered, or cancelled by the youngsters relying on what impact you’re on the lookout for.
Right here’s an instance the place scaling is concerned. Discover how the factor’s skewY() is negated by its kids and scale()s at a distinct worth to offset it a bit.
/* Utilized on (the mum or dad factor) */
.animate {
rework: rotate(-180deg) scale(.5) skewY(45deg) ;
transition: .6s .2s;
transition-property: rework, border-radius;
.squares {
rework: skewY(-45deg) scaleX(1.5);
border-radius: 10px;
transition: inherit;
}
} The mum or dad factor () rotates counter-clockwise (rotate(-180deg)), scales down (scale(.5)), and skews vertically (skewY(45deg)). The 2 kids (.sq.) cancel the mum or dad’s distortion by utilizing the unfavorable worth of the mum or dad’s skew angle (skewY(-45deg)), and scale up horizontally (scaleX(1.5)) to vary from a sq. to a horizontal bar form.
There are loads of these combos you may provide you with. I’ve made a number of extra under the place, as an alternative of triggering the animation with a JavaScript interplay, I’ve used a
[open] state as soon as the
factor is clicked. And every
incorporates an .icon youngster demonstrating a distinct animation when the
toggles between open and closed.
Click on on a
That’s all I needed to share — it’s straightforward to overlook that we get some affordances for writing environment friendly animations if we contemplate how remodeling a mum or dad factor intrinsically impacts the dimensions, place, and orientation. That method, for instance, there’s no want to put in writing complicated animations for every particular person youngster factor, however moderately leverage what the mum or dad can do, then modify the habits on the youngster stage, as wanted.
