CSS Animations That Leverage the Dad or mum-Little one Relationship

Fashionable CSS has nice methods to place and transfer a gaggle of parts relative to one another, akin to anchor positioning. That mentioned, there are situations the place it might be higher to take up the previous methods for a little bit animation, saving effort and time.

We’ve at all times been in a position to have an effect on a component’s construction, like resizing and rotating it. And after we change a component’s intrinsic sizing, its youngsters are affected, too. That is one thing we are able to 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 perhaps so simple as a

aspect that accommodates 4 little one .circle parts:

So far as rotating issues, there are two choices. We will (1) animate the

mother or father 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 fairly than a single animation. Earlier than we try this, we should ensure that every .circle is contained within the

aspect after which completely place every one within it:

major {
  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

aspect that accommodates the circles, then we would create a selected .animate class only for the rotation:

/* Utilized on  (the mother or father aspect) */
.animate {
  width: 0;
  remodel: rotate(90deg);
  transition: width 1s, remodel 1.3s;
}

…after which set it on the

aspect with JavaScript when the button is clicked:

const MAIN = doc.querySelector("major");
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 mother or father container and altering its width, which rotates and squishes all of the circles in it as properly:

CodePen Embed Fallback

Every .circle is mounted to a respective nook of the

mother or father with absolute positioning. When the animation is triggered within the mother or father aspect — 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

aspect’s middle, and the rotation causes the circles to modify 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 aspect for extra variations, akin to two squares that cross one another through the animation.

/* Utilized on  (the mother or father aspect) */
.animate {
  remodel:  skewY(30deg) rotateY(180deg);
  transition: 1s remodel .2s;
  
  .sq. {
    remodel: skewY(30deg); 
    transition: inherit;
  }
}

CodePen Embed Fallback

See that? The mother or father

aspect makes a 30deg skew and flip alongside the Y-axis, whereas the 2 little one .sq. parts counter that distortion with the identical skew. The result’s that you just see the kid squares flip positions whereas shifting away from one another.

If we wish the squares to kind a separation with out the flip, right here’s a means to do this:

/* Utilized on  (the mother or father aspect) */
.animate {
  remodel:  skewY(30deg);
  transition: 1s remodel .2s;
  
  .sq. {
    remodel: skewY(-30deg); 
    transition: inherit;
  }
}

CodePen Embed Fallback

This time, the

aspect is skewed 30deg, whereas the .sq. youngsters cancel that with a -30deg skew.

Setting skew() on a mother or father aspect helps rearrange the youngsters past what typical rectangular geometry permits. Any change within the mother or father may be complemented, countered, or cancelled by the youngsters relying on what impact you’re searching for.

Right here’s an instance the place scaling is concerned. Discover how the

aspect’s skewY() is negated by its youngsters and scale()s at a special worth to offset it a bit.

/* Utilized on  (the mother or father aspect) */
.animate {
  remodel: rotate(-180deg) scale(.5) skewY(45deg) ;
  transition: .6s .2s; 
  transition-property: remodel, border-radius;
  
  .squares {
    remodel: skewY(-45deg) scaleX(1.5); 
    border-radius: 10px;
    transition: inherit;
  }
}

CodePen Embed Fallback

The mother or father aspect (

) rotates counter-clockwise (rotate(-180deg)), scales down (scale(.5)), and skews vertically (skewY(45deg)). The 2 youngsters (.sq.) cancel the mother or father’s distortion through the use of the destructive worth of the mother or father’s skew angle (skewY(-45deg)), and scale up horizontally (scaleX(1.5)) to vary from a sq. to a horizontal bar form.

There are plenty of these mixtures you’ll be able to give you. I’ve made a number of extra beneath the place, as an alternative of triggering the animation with a JavaScript interplay, I’ve used a

aspect that triggers the animation when it’s in an [open] state as soon as the

aspect is clicked. And every

accommodates an .icon little one demonstrating a special animation when the

toggles between open and closed.

Click on on a

to toggle it open and closed to see the animations in motion.

CodePen Embed Fallback

That’s all I needed to share — it’s simple to overlook that we get some affordances for writing environment friendly animations if we contemplate how reworking a mother or father aspect intrinsically impacts the scale, place, and orientation. That means, for instance, there’s no want to put in writing advanced animations for every particular person little one aspect, however fairly leverage what the mother or father can do, then regulate the habits on the little one degree, as wanted.