Introduce Simple Animation

This is a set of Sass mixins and code snippets to create and apply animations, specifically the glow animation which creates a glowing effect on text.

The animate mixin takes four arguments: $animation, $duration, $method, and $times. $animation is the name of the keyframes that define the animation (in this case, the glow keyframes that are defined later), $duration is the length of time that the animation should take, $method is the timing function (e.g. linear, ease-in-out, etc.), and $times is the number of times that the animation should repeat (or infinite for it to repeat indefinitely).

The keyframes mixin defines a set of keyframes that can be used by an animation. In this case, the glow keyframes define two sets of text-shadow properties that will transition between each other, creating the glowing effect.

The usage of the glow animation is demonstrated by using the animate mixin with the arguments glow, 1s, linear, and infinite. This will apply the glow animation to an element, with a duration of 1 second, linear timing function, and infinite repetition.

To sum up. Here's a breakdown of the arguments that are being passed to the animate mixin:

• glow: This is the name of the keyframes that define the animation. In this case, the glow keyframes are defined later in the code using the keyframes mixin.
• 1s: This is the length of time that the animation should take. In this case, the animation will last for 1 second.
• linear: This is the timing function that determines the pace of the animation. A linear timing function means that the animation will progress at a steady rate throughout its duration.
• infinite: This is the number of times that the animation should repeat. In this case, the animation will repeat indefinitely.

@mixin animate($animation, $duration, $method, $times){
    animation: $animation $duration $method $times;
}

@mixin keyframes($name){
  @keyframes #{$name}{
      @content;
  }
}

@include keyframes(glow){
  from {
    text-shadow: 0px 0px 10px #fff, 0px 0px 10px #614ad3;
  }
  to {
    text-shadow: 0px 0px 30px #fff, 0px 0px 30px #614ad3;
  }
}

To apply the glow animation to an element, you would simply include the animate mixin with these arguments, like so:

.my-element {
  @include animate(glow, 1s, linear, infinite);
}

This would apply the glow animation to any element with a class of .my-element, causing it to glow in the way defined by the glow keyframes. You can modify the arguments passed to the animate mixin to customize the animation as desired.

What is :local

The :local pseudo-selector is used to specify a local scope for a CSS rule. In the example given, h2:first-child:local would apply the following CSS rule only to the first child h2 element within its local scope. This can be useful to avoid naming conflicts when working with multiple stylesheets or frameworks that may have overlapping class or ID names.

h2:first-child:local

GSAP

react-transition-group

reference

• scss animation