demo

Human vision is attracted to change, especially color. Like a neon billboard from the 1980s, it’s hard not to be drawn to it.

The principle of

The core of flicker animation effect is to control the color change of elements, master the control of time, so that the color change has a compelling display, so that in a static page, it will naturally attract the eye of the user.

In actual combat

Here are three ways to write a flicker animation:

CSS implements Blink animation

CSS animations can also achieve various types of flicker effects, such as making the entire element switch between show and hide (via the display property), but it is best not to do this, as this can cause browser backflow and some performance overhead; The flickering effect of text can also be achieved by controlling opacity of the color (color property) and so on. Here’s an example of a flicker animation:

You can try it at CodePen at 👇

Codepen. IO/xiaoluobodi…

This animation makes the text transition to transparent, but it will change back to the original color, but it is enough to “flicker”, how to make the transition smoother, in fact, the flicker animation with animation-direction property will work better. The animation-direction property is set to alternate or alternate-reverse (default: normal), which adds a cycle to the animation. To achieve the desired effect, halve the animation-duration.

You can try it at CodePen at 👇

Codepen. IO/xiaoluobodi…

SVG implements Blink animation

SVG SMIL Animation can also flicker graphics by declaring attributeName fill to specify the color you want to change. Setting the animation duration causes the SVG graphics to flicker. Core code:

<polygon fill="#4fd2dd" points="6,66, 18,12,12, 18,12, 24,6 27,6 30,9 36,9 39,6 84,6 81,9 75,9 73.2,7 40.8,7 37.8,10.2 24,10.2 12,21 12,24 9,27 9,51 7.8, 7.8, 54, 63">
  <animate
    attributeName="fill"
    values="#4fd2dd; #235fa7; #4fd2dd"
    dur="0.5 s"
    begin="0s"
    repeatCount="indefinite"
  />
</polygon>
Copy the code

The code above specifies that the Polygon polyline changes colors in an infinite loop in the following color order, creating a flickering effect

You can try it at CodePen at 👇

Codepen. IO/xiaoluobodi…

By specifying an animation setting for each line, you can make multiple lines flash together to create a composite animation.

GSAP implements flicker animation

In this example, the border has three polygons. Notice that all three polygons are animated simultaneously. Each polygon has its own animation Settings. So we can’t use timeline in GSAP, animation is not linear, it’s parallel.

So let’s define the ID property for the polyline

<div class="gs-border-blink">
  <svg width="300px" height="300px" class="left-top">
    <polygon id="line1" fill="#4fd2dd" points="6,66, 18,12,12, 18,12, 24,6 27,6 30,9 36,9 39,6 84,6 81,9 75,9 73.2,7 40.8,7 37.8,10.2 24,10.2 12,21 12,24 9,27 9,51 7.8, 7.8, 54, 63"> </polygon>
    <polygon id="line2" fill="#235fa7" points="27.599999999999998, 4.8, 38.4, 4.8, 35.4, 7.8, 30.599999999999998, 7.8,"></polygon>
    <polygon id="line3" fill="#4fd2dd" points="9,54, 9,63 7.19999999999999999,66 7.19999999999999999,75 7.8,78 7.8,110 8.4,110 8.4,66 9.6,66 9.6,54"></polygon>
  </svg>
</div>
Copy the code

Here we go

// line 1, #4fd2dd -> #235fa7 -> #4fd2dd
gsap
  .to('#line1', {
    fill:'#235fa7'.repeat: -1.yoyo: true.duration: 0.25.repeatDelay: 0
  })
gsap
  .to('#line1', {
    fill:'#4fd2dd'.repeat: -1.yoyo: true.duration: 0.25.repeatDelay: 0.25
  });

// line 2, #235fa7 -> #4fd2dd
gsap
  .to('#line2', {
    fill:'#4fd2dd'.repeat: -1.yoyo: true.duration: 0.3.repeatDelay: 0
  })
  
// line 3, #4fd2dd -> transparent -> #235fa7
gsap
  .to('#line3', {
    fill:'transparent'.repeat: -1.yoyo: true.duration: 0.5.repeatDelay: 0
  })
gsap
  .to('#line3', {
    fill:'#235fa7'.repeat: -1.yoyo: true.duration: 0.5.repeatDelay: 0.3
  });
Copy the code

Reuse SVG graphics and animation

Imagine that we have a border animation at the top left corner. Just flip the entire shape with CSS control to get the top right corner, bottom left corner, bottom right corner. The four groups of borders make up a big border animation.

Top left border

Complete frame

But our SVG code needs to have four groups, which in fact have exactly the same shape and animation. What’s a good way to reuse a set of code? Fortunately, SVG provides defS and use tags to solve this problem.

SVG defS on MDN looks like this:

The

element is used to store graphical objects that will be used at a later time. Objects created inside a

element are not rendered directly. To display them you have to reference them (with a

element for example).


Reuse SVG graphics:

1. First group the SVG graphics as blink-border and wrap them under the DEFS tag

<div class="gs-border-blink">
  <svg viewBox="0 0 320 180">
    <defs>
      <g id="blink-border">. polygons</g>
    </defs>
  </svg>
</div>
Copy the code

2. Use the use tag to refer to the declared graph and define the class

<svg class="left-top">
  <use xlink:href="#blink-border" />
</svg>
<svg class="right-top">
  <use xlink:href="#blink-border" />
</svg>
<svg class="left-bottom">
  <use xlink:href="#blink-border" />
</svg>
<svg class="right-bottom">
  <use xlink:href="#blink-border" />
</svg>
Copy the code

3. Write rollover styles

.gs-border-blink {
  position: relative;
}

.left-top {
  position: absolute;
  top: 0;
  left: 0;
}

.right-top {
  position: absolute;
  top: 0;
  right: 0;
  transform: rotateY(180deg);
}

.left-bottom {
  position: absolute;
  bottom: 0;
  left: 0;
  transform: rotateX(180deg);
}

.right-bottom {
  position: absolute;
  right: 0;
  bottom: 0;
  transform: rotateX(180deg) rotateY(180deg);
}
Copy the code

This completes a scalable, responsive flashing border animation.

You can try it at CodePen at 👇

Codepen. IO/xiaoluobodi…

To summarize: it’s not hard to write flicker animations, and there are several ways to do it. However, the core attributes used in each method are similar in concept. Take a look at the comparison of the three methods:

# duration repeat delay direction
CSS Property animation-duration animation-iteration-count animation-delay animation-direction
SMIL dur repeatCount begin from, to
GSAP duration repeat delay yoyo

reference

  • Developer.mozilla.org/en-US/docs/…
  • Developer.mozilla.org/en-US/docs/…
  • Developer.mozilla.org/en-US/docs/…

about

This is the eighth chapter of the SVG animation Development series.

Version of the Notion

The litany was written on Notion, so I’ve kept a shared version of Notion, which you can also view here.

Making version

The brochure offers a GitHub version of the online reading experience, Portal

Wechat official account version

Follow my technical official number, also can find this booklet series, currently in the update…