The simplest animation component implementation

The essence of animation is nothing more than the transition from one state style to another. For the simplest animation component, we only need to specify two state styles (in style, out style), and a switch (control state), to complete.

Codepen address

Transitions to a set of animations

Transitions to a set of animations. We only need to set a unified switch on the basis of a plurality of the simplest animation components, unified control, multiple animation components animation state can be. If you want interleaved transitions (transitions with time intervals), you just need to set the appropriate delay depending on where the animation component is indexed in a set of elements.

To introduce uniform switch control, we add a parent component to the animation component, whose switch controls the on/off state of all the children. The parent component uses the React.Context to send its status to the child component.

To achieve interlacing, we need to set different lengths of delay for the list neutron components. The latency depends on the status of the sub-components in the index list and the switch.

Such as:

When the switch is set to True, the entry animation needs to be displayed. The delay increases from top to bottom (0ms, 100ms, 200ms, 300ms)

When the switch is set to false, the animation needs to be displayed. The delay decreases from top to bottom (300ms, 200ms, 100ms, 0ms)

Codepen address

Current problems with the above components

  1. Nodes must be rendered in advance, and these animation components can’t do anything about dynamically inserted nodes. (We refer to the ‘ ‘react-transition-group’ implementation below to solve this problem.)
  2. If the element start style hasdisplay: noneThe animation will not work (this is a similar problem to dynamically inserting nodes).
  3. For a set of list nodes. New nodes are inserted, and deleted. The transitions for the other nodes are stilted and not animated (we could use flip animations to solve this problem).

FLIP the animation

The realization principle of FLIP animation is: cache the starting position of the element, and then place the element at the end position, calculate the difference between the end point and the starting point, and apply animation according to the difference.

Let’s start with the power of the Flip animation

Next, let’s implement a simple flip animation step by step, and then try implementing it in React.

flashing

Does the following code cause blinking problems?

Codepen demo

** Answer: No. ** The reason has to do with the browser’s event queue. Click on the event code, we must execute to complete the current task (the execution of the current code segment) before browser rendering.

This is very important to us. To reiterate the principle of flip animation, you cache the starting position of an element, then place the element at the end position, calculate the difference between the end and the starting position, and apply the animation based on the difference.

A prototype

Then, based on the code above, we can now implement a simple Flip animation

Codepen demo

As we can see, the animation has been implemented, but the calculation of the animation is still fixed for now, so let’s try to automate it.

perfect

We’re trying to do an automatic calculation of the difference between the properties of the previous state and the current state.

Codepen demo

So far, we’ve implemented flip animations for width and X-axis.

🤔️ why is it calculated like this (previous position – current position)?

Why do we subtract the current style value from the previous style value?

FLIP animation is based on the current position and the start position of the animation, we are doing the animation, the element has actually reached the end position.

For example, the current position is 100px and the starting position is 0px. The flip animation needs to simulate the process from 0px to 100px, but the current position is already 100px, so we have to use translateX(0-100px) to simulate the position of 0px when the animation started.

100ms

There is a window of 100ms after someone interacts with your site where you’re able to do work without them noticing.

When using Flip animations, keep in mind that you can’t calculate more than 100ms. If you do, you’ll get stuck.

FLIP with the Web Animations API

A real Flip animation library is still a long way off. It would be difficult to continue using requestAnimationFrame, it would be too complex.

Since flip animation is based on the end position and the start position of the animation, then is there any good way, we do not need to manually adjust. Just provide the starting position and the ending position to complete the animation? We can use the Web Animations API.

I don’t want to go into too much detail here about the Web Animations API itself. Just know that using the Web Animations API, all you need to do is set the beginning style, and the end style, and the Animations will take care of themselves.

We have adapted the demo above to use the Web Animations API.

Codepen demo

As you can see, all we need to do in the code is set the styles at the beginning and end, and the animation will transition automatically.

React with the FLIP

How to animate flip in React? Let’s first recall the logic of the Flip animation in JS

  1. Start position of cache element
  2. Moves the element to the end position
  3. Gets the current location and calculates the difference between the current location and the starting location of the cache.
  4. When the next frame starts, start animating

As you can see, steps 1, 2, and 3 all happen before rendering to the screen (or at the moment). In React, what hooks happen when you render to the page? The answer is: The function component is useLayoutEffect. The class component is componentDidUpdate

Let’s review the implementation logic of the Flip animation in React

  1. The first useEffect on the page completes the element rendering. The location of the element is also cached.
  2. The state changes and the component needs to be rerendered
  3. The moment the component is re-rendered to the screen, inuseLayoutEffectIn, we get the latest location. And calculates the difference between the current location and the starting location of the cache.
  4. Animation starts

So let’s implement a prototype flip in React

Codepen demo

bingo! We successfully implemented the Flip animation in React

❓ Current problems

If we were to switch animations while flip animation was running. The animation will flicker, which we will now address.

Let’s think about why this is a problem. In the process of animation running, the animation has not reached the end point, then switch the animation, animation elements will be forcibly moved to the end point, and then the next animation, this is the reason why the animation flicker.

How to solve it?

  1. When switching animations, if the last animation didn’t end, we end it manually
  2. Update the cache of locations when switching animations.

Codepen demo

Although flip animation has been implemented, but the distance from packaging into a usable library is still some distance, if you want to know more, you can see my packaged source code (principle and the above article is exactly the same). Warehouse address: github.com/peoplesing1…

🚧 Flip animation points to note

  1. When flip calculates the position of the animation, it is best not to have the TRANSITION CSS property on the element, which will affect the calculation of the position.
  2. The previous calculation of the cache location was relative to the body location. But if there are scrollbars, the location of the cache can be problematic. The solution is to calculate the position based on the parent element of the animation element, not the body position.

How does Flip achieve interlacing?

All right. Currently in my library, the perfect solution of interleaving effect has not been implemented. But the main idea is there, and a simple implementation version is available at 👇 below

🔍🔍🔍 Animation of dynamically inserted nodes

To solve this problem, I refer to the source of the react-transition-group library. The react-transition-group library is a react-transition-group library.


<react-transition-group>
  {
    list && list.map((item) = > (
      <react-transition>
        { item }
      </react-transition>
    ))
  }
<react-transition-group>
Copy the code

The outermost

component does not render the embedded children directly. Instead, save props. Children as the internal state of the component. This allows us to do some extra work on state before children render.


will not render dynamically inserted nodes. Instead, the animation state of the newly inserted < react-Transition > component is set to ‘Leave’. Then, in < react-Transition >, we will wait for dom rendering to complete and then set the animation state to ‘Entering’ to complete the animation transition from ‘Leave’ to ‘Entering’.


will not delete nodes that are dynamically deleted. Instead, set the animation switch of the < react-Transition > component that needs to remove the outer layer of the node to false, and the animation begins to transition to the ‘Leave’ state. After the animation transition is complete, the onLeave event of the < react-Transition > component is then triggered. The DOM node is deleted in the onLeave event.

To summarize the react-transition-group library handling:

  1. The inserted node renders the DOM first and then animates it
  2. Delete nodes, animate them first, and then delete the DOM

Write in the last

If you are satisfied with my article, please kindly give my article a thumbs-up. If you like my small project, please click a STAR for my small project. Thank you 🙏

Project address: github.com/peoplesing1…

reference

  • The react – the transition – group source
  • FLIP Your Animations