DEV Community: Keerthi

Crash course in interactive 3d animation with React-three-fiber and React-spring

Keerthi — Tue, 15 Mar 2022 09:50:30 +0000

Introduction

There are a growing number of sites out there that utilises interactive 3d animations. The interaction experience of these sites gives you a feeling that you are interacting with real world objects. This trend is only going to grow because of the huge investment that companies are pledging so that they can get a foot in door in the Metaverse world.

Here are two great industry recognised examples of the usage of interactive 3d animation:
1] Bruno Simons award winning website - This site is designed like a 3D game, and you can navigate it using the car.

2] Github home page - Github has incorporated this interactive 3d globe that you can interact with to see live Github commits.

Both these sites are built with three.js. The problem with three.js is that it has a very steep learning curve. You have to write a lot of code to do simple things. Luckily in react we have a solution in the form of react-three-fiber. React-three-fiber has simplified much of the complex coding by taking advantage of component based patterns which have simplified apis. Under the hood it is still three.js without compromising anything.

If you are intending to use interactive 3D animation in a future React.js project and would like to learn more about react-three-fiber, then this post will be perfect to start that journey.

What will be covered in this post are :

Quick intro to three.js, React-three-fiber and interactivity
A basic introduction to 3D concepts like the 3d co-ordinate system
Some basic concepts about how 3d projects are structured in three.js
A walk through on how to build your first 3d interactive app with react-three-fiber and react-spring

If you want a Video version on building the demo app you can skip the article and watch this Youtube video :

I also have an advanced video on building a product customizer

If you enjoy the theory part then enjoy reading the rest of this article.

Quick intro to three.js, React-three-fiber and interactivity

Three.js is the defacto 3d animation library that has become popular among Javascript developers. React-three-fiber is the three.js renderer for React.js. Everything that you can do with three.js can be done with react-three-fiber. Additionally 3d objects can also be made interactive relatavily easily. For example you can attach event handlers to handle hover and click events. In React.js you can manage the state of the 3d objects with state management in turn change its properties. In the demo we are going to build , we will change the color and size of a 3d Cube when hovered and clicked respectively.

React-three-fiber has a great ecosystem around it too. It even includes integration of the popular animation library react-spring. In this post you will learn how to integrate react-spring with react-three-fiber. You can check here for more libraries that work with react-three-fiber . You can also see that it has an accessibility module that is well documented too.

..and if you want to see more great examples made by react-three-fiber, you can go here

A bit about 3d coordinate system

When you work with CSS and Html, you position things with relative or absolute positions, Where you would set values for left, right, top and bottom properties of a div to absolute position that div. When you work with 3D, you would need to know about positioning things in 3d space, which is a whole new concept to grasp. Imagine you are in a room and there is a chair floating in thin air between the floor and the ceiling, in 3d you have a way of pin pointing its location using three values, this is the x, y and Z value. These values will be relative to some origin, lets just say for this the origin will be a chosen corner of the room. Lets look at another example of a transparent cube positioned in the corner of a room.

The cube has dimension of 2 units for height, width and depth. In the diagram I have marked the 8 corners of the cube with a circle and the associated co-ordinate, the corner of room is the origin (0,0,0). I have also marked the X,Y and Z axis with red arrows. We are used to dealing with X and Y axis, this is seen as 2D. But here we have an extra Z axis which can be seen as depth. As you can see in the example. If you look at the cube corner with (2,2,2) value, you see that this is the only point of the cube that does not touch the left wall, right wall or the floor but is elevated from the ground. This is the only point that has no zero value as well. So the important thing here is that the first 2 numbers are the x, y axis positions as in 2D, and the third number deals with depth. This is a basic explanation but please note that all of the axis can be negative numbers as well, this will mean that the points will fall outside of our visible room. You can think of it as absolute positioned div where you would give negative left or negative top value to move it outside of its parent div.

As an exercise you can go to three.js official playground where you can try out things. The link is https://threejs.org/editor/

In the above screen shot all I did was add a box, drag the handle and observed the positional values. You can drag all handles and experiment with this. The playground can do much more complex things, but that's for another day when you progress from the basics.

Structure of a very basic 3D project in three.js

Before we dive into React-three-fiber, you need to have a basic idea of how a project is structured in three.js. Below is a diagram outlining this.

To summarise I have listed the the items shown in the above diagram.:

Scene - A scene will contain all of the 3D objects. Each object is also referred to as a Mesh
Mesh - This is a basic scene object , and it's used to hold the geometry and the material needed to represent a shape in 3D space.
Geometry - Geometry defines the shape, You can think of it as a skeleton structure without the graphical details
Material - Defines how the surface of the shape looks, this would be the graphical details.
Camera - This will capture everything in the scene and it also has a position value. Light - You need a light source to see your object. If you don't have light source then you wont see the colour and shadows as you would in real life.

and a basic code to render a cube with out light or color would look like this:



//The renderer will have access to the Canvas DOM element to
//update the display to show our 3d cube
const renderer = new THREE.WebGLRenderer()
renderer.setSize(width, height)
document.querySelector('#canvas-container').appendChild(renderer.domElement)

// Create Scene and camera
const scene = new THREE.Scene()
const camera = new THREE.PerspectiveCamera(75, width / height, 0.1, 1000)

//Mesh  - Holds the 3d object that will be added to scene
const mesh = new THREE.Mesh()

//Geometry  is a property of Mesh
// Our mesh will have a geometry for a box or cube
mesh.geometry = new THREE.BoxGeometry()
//Material  is also a property of Mesh
mesh.material = new THREE.MeshStandardMaterial()

//Add our Mesh to the scene
scene.add(mesh)

// After you have composed your scene with your mesh 
// and added the camera, you can render the whole thing
// with animation loop
function animate() {
  requestAnimationFrame(animate)
  renderer.render(scene, camera)
}

animate()

If you read the comments in the code, you will have a rough idea of the structure. I will not go deep into this as its quiet complex already. This is where React and React-three-fiber comes to the rescue. React-three-fiber abstracts out the above complexities and allows us to create 3D animation declaratively. In the rest of this post I will show you how to build our interactive cube with smooth animation using react-three-fiber and spring animation.

Part2 : How to build your first 3d interactive app with react-three-fiber and react-spring

In this section we will build an interactive cube that will be rotating, change colour when you hover over it and it will grow bigger when you mouse click on it. We will be using react-spring for smooth animation too.

Step 1: Project setup

I will be assuming that you have already setup a basic react app already using create-react-app . Then you can run npm install three @react-three/fiber , this will install three.js and react-three-fiber. Afterwards install the Drei dependency npm install @react-three/drei. Note the drei component gives react-three.fiber some super powers, but we will only be using it for the light source.

Step 2: Add some basic styling

Then in your app.css copy the following basic styles:



//app.css
html,
body,
#root {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

Step 3: Basic app.js structure to set the canvas, scene and light.

This is a skeleton structure of our app.js. We will be filling in the blansk as we go along.




import {useState,useRef} from "react"
import {Canvas, useFrame} from "@react-three/fiber"
import  "./app.css"

function Cube(props) {

      // Code for our 3d cube  goes here. In other words Our mesh

}


function App() {
  return (
   <Canvas>
     <ambientLight />
     <Cube />
   </Canvas>
  );
}

export default App;

At the top we have the dependencies. We are going to use useState and useRef.



import {useState,useRef} from "react"
import {Canvas, useFrame} from "@react-three/fiber"
import  "./app.css"

We will be letting react-three-fiber deal with the rendering, thats why we are use useRef, this allows us to access the DOM directly.

We import Canvas from react-three-fiber, this allows us to create a WebGl container to render our 3D. The useFrame is standard animation hook for react-three-fiber.

We are also attaching the app.css that we wrote in the last step.

Lets look at our App function:



 function App() {
  return (
   <Canvas>
     <ambientLight />
     <Cube />
   </Canvas>
  );
}

In the JSX part of our App function, we are using the react-three-fiber Canvas component as the wrapper. This has two child elements, one is a light source <ambientLight />. Second element is <Cube /> , The component will be rendering our mesh that defines our 3d cube. We have yet to write code for this as you saw in our skeleton code previously.

Note that typically you would also add a camera, but for our example we can leave it because React-three-fiber adds a camera automatically with a default position. So we will just go along with the default.

Step 4: Lets write code to define our 3d Cube

Our cube function will look like this:



function Cube(props) {
  // Use useRef hook to access the mesh element
  const mesh=useRef()

  // Jsx to rnder our cube
  return (
          <mesh ref={mesh}>
             <boxGeometry args={[2,2,2]}/>
             <meshStandardMaterial /> 
          </mesh>

  )
}

All we are doing here is creating a <mesh /> element that has a ref={mesh} attribute, we are using this so that react-three-fiber can access the mesh element directly. Hence we have the line const mesh=useRef() to declare this ref value. The <mesh /> element has a child element and <meshStandardMaterial />. Remeber In three.js mesh elements have a geometry and material and thats what these elements are for.

The args in <boxGeometry args={[2,2,2]}/> element is for the dimensions. We are using na array with three values to create a cube with height, width and depth all equal to units.

Our code for app.js looks like this now :



import { useState, useRef } from "react";
import { Canvas, useFrame } from "@react-three/fiber";
import "./app.css";

function Cube(props) {
  // Use useRef hook to access the mesh element
  const mesh=useRef()

  // Jsx to render our 3d cube. Our cube will have height
  // width and depth equal 2 units. 
  // You also need a material so that you can add color
  // and show shadows. We are using the standard
  // material <<meshStandardMaterial /> 
  return (
          <mesh ref={mesh}>
             <boxGeometry args={[2,2,2]}/>
             <meshStandardMaterial /> 
          </mesh>

  )
}

// Basic app structure to render a 3d cube
//<ambientLight /> is the standard light to use, otherwise
// everything comes out as black
function App() {
  return (
    <Canvas>
      <ambientLight />
      <Cube />
    </Canvas>
  );
}

export default App;

In the browser you would see a grey box , as shown below. But its actually a cube. We only see the front face at the moment. In the next section we will add some colour and rotation.

Step 5: Add some fancy lights, colour and animation

To give our cube realistic shadows, we need to add a specific point light element with a position, which looks like this <pointLight position={[10,10,10]} />. This is to be added our App function just after the <ambientLight />.

Our App function looks like this now :



function App() {
  return (
    <Canvas>
      <ambientLight />
      <pointLight position={[10,10,10]} />
      <Cube />
    </Canvas>
  );
}

Now lets turn our attention to our Cube function to add colour and basic animation. To add colour to our cube we add an attribute to the meshStandardMaterial element, so it becomes <meshStandardMaterial color={"orange"}/> . Here we are setting color to orange.

To add a basic rotation animation we use the animation frame hook, and it will look like this useFrame ( ()=> (mesh.current.rotation.x += 0.01)) . Here we are accessing the mesh.current.rotation.x value to increase it by 0.01 unit. Its basically rotating on the x axis.

Our code looks like this:



import { useState, useRef } from "react";
import { Canvas, useFrame } from "@react-three/fiber";
import "./app.css";

function Cube(props) {
  // Use useRef hook to access the mesh element
  const mesh = useRef();

  //Basic animation to rotate our cube using animation frame
  useFrame ( ()=> (mesh.current.rotation.x += 0.01))

  // Jsx to render our 3d cube. Our cube will have height
  // width and depth equal 2 units.
  // You also need a material so that you can add color
  // and show shadows. We are using the standard
  // material <<meshStandardMaterial />   

  return (
    <mesh ref={mesh}>
      <boxGeometry args={[2, 2, 2]} />
      <meshStandardMaterial />
      <meshStandardMaterial color={"orange"}/> 
    </mesh>
  );
}

// Basic app structure to render a 3d cube
//<ambientLight /> is the standard light to use, otherwise
// everything comes out as black
function App() {
  return (
    <Canvas>
      <ambientLight />
      <pointLight position={[10,10,10]} />
      <Cube />
    </Canvas>
  );
}

export default App;

Hooray, our 3D cube is alive with colour, shadows and its moving in 3d space.

Step 6: Make cube interactively change colour on hover

What we aim to do here is to have the cube change colour when you hover over it. As you know in react if you are going to change some property in the display then you would need to use state variables and event handlers.

In the Cube function, lets introduce a state variable to store the hover state :
const [hovered,setHover] = useState(false)

Now all we have to do is bind an event handler to the <mesh /> element. Luckily mesh component has its event handlers for hover event , they are : onPointerOver and onPointerOut. This allows us to toggle the value on hovering in and out. So our mesh element opening tag would look like this :



<mesh ref={mesh} 
               onPointerOver={ (event)=> setHover(true)} 
               onPointerOut={(event)=> setHover(false)} >

The last part is to change the colour to hotpink when the state changes to hovered. This can be done with a ternary expression on color property of meshStandardMaterial element. So that becomes :



<meshStandardMaterial color={hovered ? "hotpink" : "orange"}/>

Our cube function looks like this now :



function Cube(props) {
  // Use useRef hook to access the mesh element
  const mesh = useRef();

  // State values for hover
  const [hovered, setHover] = useState(false);

  //Basic animation to rotate our cube using animation frame
  useFrame(() => (mesh.current.rotation.x += 0.01));

  // Jsx to render our 3d cube. Our cube will have height
  // width and depth equal 2 units.
  // You also need a material so that you can add color
  // and show shadows. We are using the standard
  // material <<meshStandardMaterial />

  return (
    <mesh
      ref={mesh}
      onPointerOver={(event) => setHover(true)}
      onPointerOut={(event) => setHover(false)}
    >
      <boxGeometry args={[2, 2, 2]} />
      <meshStandardMaterial color={hovered ? "hotpink" : "orange"} />
    </mesh>
  );
}

Thats all there is to it to change colour on hover.

Step 7: Add smooth animation to resize cube on click event

Three.js has its own animation hooks, but what three.js cant do we can achieve with react-spring animation. To resize our cube smoothly, we can use the react-spring hook this time.

Just a reminder, to install react-spring so you can use it with react-three-fiber, you need to run the following : npm install three @react-spring/three. Then you need to import it into the app.js, like :
import { useSpring, animated } from '@react-spring/three'

The import section at the top of our app.js looks like this now :



import {useState,useRef} from "react"
import {Canvas, useFrame} from "@react-three/fiber"
import { useSpring, animated } from "@react-spring/three";

Going back to our task in hand, we need to resize the cube on the click event. Again like like previous task of changing colour, we need a state variable to store active state for our mesh when clicked. So we add the following line to our cube function:



const [active,setActive] = useState(false)

Now we add a on click handler to the mesh, as before we have an arrow function to change the state on click: onClick = {(event)=> setActive(!active)}, so our mesh element opening tag looks like:



<mesh ref={mesh}
            onPointerOver={ (event)=> setHover(true)}
            onPointerOut={(event)=> setHover(false)}
            onClick = {(event)=> setActive(!active)}
          >

Next we need to increase the scale of our cube by 1.5 if the active state is true. Now the tricky part is that react-spring is going to handle the size change. We are going to apply this to the mesh element, so what we need to do is first rename mesh element to animated.mesh. so <mesh>....</mesh> will become <animated.mesh>....</animated.mesh>. We are also going to set a scale property, this scale property will be handled by a react-spring hook so we simply say something like <animated.mesh scale={scale}>....</animated.mesh> so our mesh opening and closing tags will look like this now:



          <animated.mesh ref={mesh}
            onPointerOver={ (event)=> setHover(true)}
            onPointerOut={(event)=> setHover(false)}
            onClick = {(event)=> setActive(!active)}
            scale = { scale}
          >  .......

            ....
          </animated.mesh>

now we simply use the react-spring hook to to set the size and deal with the animation. The following line of code does the trick



 const { scale } = useSpring({ scale: active ? 1.5 : 1 })

What is happening here is , we are passing a ternary expression to check if the active state is true or false. and react-spring will deal with the animation.

Thats it your done!. The final code for your app.js looks like:



import {useState,useRef} from "react"
import {Canvas, useFrame} from "@react-three/fiber"
import { useSpring, animated } from "@react-spring/three"
import "./app.css"



function Cube(props) {
  // Use useRef hook to access the mesh element
  const mesh = useRef();

  // State values for hover and active state
  const [hovered, setHover] = useState(false);
  const [active, setActive] = useState(false);

  //Basic animation to rotate our cube using animation frame
  useFrame(() => (mesh.current.rotation.x += 0.01));

  //Spring animation hook that scales size based on active state
  const { scale } = useSpring({ scale: active ? 1.5 : 1 });

  // Jsx to render our 3d cube. Our cube will have height
  // width and depth equal 2 units.
  // You also need a material so that you can add color
  // and show shadows. We are using the standard
  // material <<meshStandardMaterial />

  return (
    <animated.mesh
      ref={mesh}
      onPointerOver={(event) => setHover(true)}
      onPointerOut={(event) => setHover(false)}
      onClick={(event) => setActive(!active)}
      scale={scale}
    >
      <boxGeometry args={[2, 2, 2]} />
      <meshStandardMaterial color={hovered ? "hotpink" : "orange"} />
    </animated.mesh>
  );
}

function App() {
  return (
    <Canvas>
      <ambientLight />
      <pointLight position={[10, 10, 10]} />
      <Cube />
    </Canvas>
  );
}

export default App;

You can see the final code here on Codesandbox

A crash course in React.js and D3

Keerthi — Tue, 16 Nov 2021 15:41:30 +0000

Introduction

I created a crash course type video on using D3 and React.js. You can see the video here.

For most use cases involving creation of standard charts, D3 is not practical, because of the complex nature of the API. In this post I try to explain scenarios where you would use D3 with React.js rather than use easier chart libraries like Recharts or the ones mentioned in one of my previous post :

The top four React chart libraries that you need to know for 2021

Keerthi ・ Jan 8 '21

#react #webdev #reactnative #javascript

These libraries do a really good job of creating simple line charts like the one in my video. They are much easier to use and provide really good features out the box. I would recommend that for most use cases, where the visual and interaction requirements are not that complex then you should use those suggested in my previous post. (You can also got to the end and check out my videos on Recharts and react-chartJs if you are not interested in D3.js)

At the end of this post, I will recommend other resources that will get you started with D3 if you think D3 will be a good fit for your next project or side project.

What is D3.js ?

First lets look at what the D3.js website says about D3.js:

D3.js is a JavaScript library for manipulating documents based on data. D3 helps you bring data to life using HTML, SVG, and CSS. D3’s emphasis on web standards gives you the full capabilities of modern browsers without tying yourself to a proprietary framework, combining powerful visualization components and a data-driven approach to DOM manipulation.

So what they are talking about is data visualisation. D3.js is not really a dedicated charting library but a set of visualization and DOM manipulation components. These components will help you build visually stunning data visualisations with custom interactive features. Two of the most appealing things about D3.js is that It has some great animation features and it has its own Dom manipulation capability. Take a look at the graphics capability from these two examples.

You can see the code for this at https://bl.ocks.org/mbostock/1345853

You can see the code for this d3 morphing animation at https://bl.ocks.org/mbostock/3916621

Is D3 easy to learn ?

In D3 you manipulate low level Dom elements and deal with SVG canvas drawing concepts. This has a drawback because it requires a bit of a learning curve to get your head around the query type structure of the D3 method chaining. And then there are the scale functions that map your data onto an SVG canvas, this involves a little bit of head maths. So the overhead of learning D3 is a bit too much just to create standard charts

When should I use D3 then?

To summarize, you should use D3 for the following reasons:

When you want advanced graphics and animation in your visualization

When other chart libraries do not meet specific customization needs, use D3 to build from the ground up

When you want to use specific data format, D3 can handle Array, CSV, TSV, JSON, XML

An example of a visualisation that will be ideal to create in D3 would to build an animated tree chart like this:

You can see the code for this here https://bl.ocks.org/d3noob/8375092.

How do you get started with React and D3.js ?

I would recommend starting of with a line chart and then progress to add other interactive and animation features. This is why I created this video.

Be warned this is a bit of a crash course, so would be suitable for someone who has fairly good grasp of react and JavaScript. But if you want to familiarize the basic concepts of D3 then check out the next section. In my video I cover the following :

Installing React.js with D3

Setup your data in React.js

Setup JSX with SVG canvas and learn how to draw basic line in SVG

Setting up and testing scale functions so that you can map your data onto the SVG canvas. The two scale functions you learn are :

d3.scalePoint // You use this if your dealing with any data that is ordinal by nature, ie categories of things or days of the week (Monday, Tuesday, Wednesday) etc
d3.scaleLinear // You use this to map values that are numerical, continuous and can be measured.

Use the d3.line function to generate a setup commands to draw the line curve.

Use the d3.select and d3.selectAll components manipulate DOM elements. - You can add/remove and change attributes. You would use this to draw things in svg too.

Learn how to generate and draw X and Y axis with labels
using axis components d3.axisBottom and d3.axisLeft

What other resources are there to learn from

A blog post on React and D3 is a good place to start by Amelia Wattenberger. This post covers the basics and touches on other complex visualisations involving maps.

Amelia's blog also has a Visualization of the whole D3 libary. This is a very useful learning tool will allow you to dig deeper into the D3 api.

A site called d3-graph-gallery has some good basic guides but it does not have any React.js examples.

d3indepth.com also has some very good basic tutorial.

Bonus videos on Recharts and react-chartjs-2

If you think that D3 is not going to be suitable for your needs, then check out my popular React chart videos on Recharts and react-chartjs-2.

Create react app vs Vite

Keerthi — Wed, 22 Sep 2021 16:18:16 +0000

I have always relied on the npm command create-react-app to create the starter files for any React.js project. It does what it says on the tin, and creates all my starter template files, setups a local dev server and dev environment. Over the years I have become a little impatient because it takes around 3-4 minutes to setup a basic barebones app. Recently I have come to know about a faster way to setup React apps, which also gives you all the useful features that create-react-app gives you too. It is using a tool called Vite. Vite is another build tool like Webpack (create-react-app uses Webpack under the hood, read more here).

In this post I will take you through the steps on how to install React.js app using Vite and point out some differences too. You can also see a video on the comparison of the two installation methods. In the Video below, You will discover that the installation time, plus time to run local server is astonishingly fast for Vite.

So how do we start the ball rolling

You can refer to the Vite docs, From there, you can choose from a few methods to start off your installation. We are going to use the template method. In their docs, the listed methods are:



#npm 6.x
npm init vite@latest my-vue-app --template vue

#npm 7+, extra double-dash is needed:
npm init vite@latest my-vue-app -- --template vue

#yarn
yarn create vite my-vue-app --template vue

But these commands are for installing Vue.js, just as side note, Vite was originally developed for Vue.js but has been modified to use with other frameworks including React.js. For our case, all we need to do is replace the keyword after '--template', from vue to react. And dont forget to replace the app name to your choosing. So assuming that we are running npm version 6.x, we will run the following command:



npm init vite@latest my-react-app --template react

Then we will cd into our directory and install the remainder of the starter files and run the dev server:



 cd my-react-app
 npm install
 npm run dev

If you goto the browser. You should see a React logo with a counter and a button, as below.

Directory structure of the our newly created app

The thing to note here is that, main.js is the root file that imports/loads App.js. There is also a new file called vite.config.js, this is circled in the above image. This file is used to turn on and set new features for your build process. I will come to this file in the next section below.

One last thing about importing files...

I have noticed that out the box this setup does not allow for absolute paths. With create-react-app, you can do import x from 'components/x'. With Vite, you have to do the relative pathing, like ```import

x from '../../../'


To fix this we need to change the vite.config.js file, which looks like this:

```javascript


import { defineConfig } from 'vite'
import reactRefresh from '@vitejs/plugin-react-refresh'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [reactRefresh()]
})

we need to add an extra setting to resolve the path, this change will go after the "plugins" settings. It will end up looking like this after the change:



import { defineConfig } from 'vite'
import reactRefresh from '@vitejs/plugin-react-refresh'
import path from 'path'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [reactRefresh()],
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src'),
    },
  },
})

and this will allow us to refer to paths as import x from '@/component/x' !IMPORTATNT to prefix with '@' in path.

conclusion

I did find Vite impressingly fast. It took me 55 secs to install and run on local server. I have not done much heavy development using Vite but it looks promising. It is too early for me to say if I will use it on any bigger projects in the future. There are other methods of installing React.js using Vite, these methods are maintained by other communities. Check out other community maintained templates here, you can also find one with Tailwind. Please leave comments on your experiences too.

Note: Vite has templates to build apps in the following frameworks



vanilla
vanilla-ts
vue
vue-ts
react
react-ts
preact
preact-ts
lit-element
lit-element-ts
svelte
svelte-ts

so to create a build in react typescript , just change the last bit to "react-ts" after the "--template" , so it becomes:



npm init vite@latest my-react-app --template react-ts

Scroll animation in Javascript using IntersectionObserver

Keerthi — Wed, 30 Jun 2021 14:39:55 +0000

Using animation in your portfolio site would be a great way to capture the users attention and make them stay longer on your site.

In this post I will show you how to add a special type of Javascript scroll animation to your site that will be activated when you scroll down/up. This will be coded using a feature called intersection observer. Here is a quick preview of what the end animation looks like:

There is also a Youtube video on this :

Step 1] First lets layout our HTML markup and Styling for a basic card UI



<!DOCTYPE html>
<html lang="en">
 <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel='stylesheet' type='text/css' href='./style.css'>
 </head>
 <body>
    <div class="wrapper">
        <div class="card">
            <div class="image"></div>
            <h2>Profile picture</h2>
            <p>Some text goes here. Some text goes here.Some text goes here.Some text goes here....</p>
        </div>
    </div>
  </body>
<html>

and the style.css looks like:



.wrapper {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: space-around;
    background-color: #5dafb8;
    color:white;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
}

.card {
    height: 50vh;
    border-radius: 13px;
    box-shadow: 20px 40px 33px rgba(0,0,0,0.3);
    padding: 2rem;
    width: 35vh;
    background-color:  #6cc2ce;

}

/* Style a div with gradient as Background image */
.image {
    width: 35vh;
    height: 20vh;
    background-image: linear-gradient(70deg, RoyalBlue   , DarkTurquoise );
    background-size: cover;
    background-position: center center;
    box-shadow:  10px 15px 15px 6px #3891b4;
    border-radius: 15px;

}

In this example I have set the background-image to a gradient: background-image: linear-gradient(70deg, RoyalBlue , DarkTurquoise ); , you can set a real image here for your project. so this is what it looks like:

Step 2]Now lets add some basic animation in CSS with keyframe animation

First we are going to add basic css animation with keyframe animations. Lets start by targeting the heading (h2 tag) and content text (p tag):



.card h2 {
        /* Animate Heading, fades in from left to right */
    animation: animTitle 2s infinite;
} 

.card p {
        /* Animate Paragraph, fades in from right to left */
    animation: animContent 2s infinite;
}


@keyframes animTitle {
    from {
            /* Add starting values for animation */
            transform: translateX(-50px);
            opacity: 0;
    } 
    to  {
            /* Add Ending values for animation */
            transform: translateX(0);
            opacity: 1;
   } 
 }

 @keyframes animContent {
    from {
            /* Add starting values for animation */
            transform: translateX(50px);
            opacity: 0;
    } 
    to  {
            /* Add Ending values for animation */
            transform: translateX(0);
            opacity: 1;
   } 
 }

As you can see from above, we have two keyframe animation functions namely @keyframes animTitle {...} and @keyframes animContent { ...} these are called in the css selector rules .card h2 {animation: animContent 2s infinite;} and .card p{animation: animContent 2s infinite;} As you can see they both run for 2 seconds and loop infinitely. These are simple transition/translate on the horizontal x values of the elements.

we are also going to add a special elastic stretch animation for the image. The CSS rule and the animation keyframe function for this will be :



.card .image {
      /* Animate image */
    animation: animImage 2s infinite;
}

@keyframes animImage {
    0% {
      -webkit-transform: scale3d(1, 1, 1);
              transform: scale3d(1, 1, 1);
    }
    30% {
      -webkit-transform: scale3d(1.25, 0.75, 1);
              transform: scale3d(1.25, 0.75, 1);
    }
    40% {
      -webkit-transform: scale3d(0.75, 1.25, 1);
              transform: scale3d(0.75, 1.25, 1);
    }
    50% {
      -webkit-transform: scale3d(1.15, 0.85, 1);
              transform: scale3d(1.15, 0.85, 1);
    }
    65% {
      -webkit-transform: scale3d(0.95, 1.05, 1);
              transform: scale3d(0.95, 1.05, 1);
    }
    75% {
      -webkit-transform: scale3d(1.05, 0.95, 1);
              transform: scale3d(1.05, 0.95, 1);
    }
    100% {
      -webkit-transform: scale3d(1, 1, 1);
              transform: scale3d(1, 1, 1);
    }
  }

I created this animation using an online animation generator called Animista. You can also go there and experiment with other animations as well. The site will generate keyframe code which you can attach to a container you want to animate. Like I have done above (I also renamed the keyframe function).

What we have so far

So far we have all animation controlled by CSS for us to animate on scroll we will have to dabble with Javascript. We also need to reorganise/change some css rules and HTML elements. Thats what we will do next.

Step 3] Make changes to HTML markup before we add intersectionObserver

One of the key problems we have in activating animation via Javascript is accessing the animation keyframe function name and the rule that needs to be applied. In our demo we have the following css rules that achieve this: ```css

.card h2 {
/* Amimate Heading, fades in from left to right */
animation: animTitle 2s infinite;
}

.card p {
/* Animate Paragraph, fades in from right to left */
animation: animContent 2s infinite;
}

.card .image {
/* Animate image */
animation: animImage 2s infinite;
}


To apply this dynamically in javascript, we will need to abandon these css rules and use htmls data attribute to store the animation values shown above. We are also going to attach a class called "animate" to the three elements that we are going to animte. So the HTML markup for the card will look like:
```html


<div class="wrapper">
        <div class="card">
            <div class="image animate" data-animate="animImage 2s"></div>
            <h2 class="animate" data-animate="animTitle 2s ">Profile picture</h2>
            <p class="animate" data-animate="animContent 2s ">Some text goes here.Some text goes here....</p>

        </div>
  </div>

So the import thing here is the data attribute, for example the image containers data attribute is: data-animate="animImage 2s", here we are creating a data item called animate (this is the postfix after the dash) and setting the value to its animation setting that we previously defined in the css style sheet. If this is a bit strange, you can read more about using data attributes here

We also need to add more content so that we can scroll to activate our animation, so I will duplicate three more card wrappers:



<div class="wrapper">
        <div class="card">
            <div class="image animate" data-animate="animImage 2s"></div>
            <h2 class="animate" data-animate="animTitle 2s ">Profile picture</h2>
            <p class="animate" data-animate="animContent 2s ">Some text goes here.Some text goes here....</p>

        </div>
  </div>
 <div class="wrapper">
        <div class="card">
            <div class="image animate" data-animate="animImage 2s "></div>
            <h2 class="animate" data-animate="animTitle 2s ">Profile picture</h2>
            <p class="animate" data-animate="animContent 2s ">Some text goes here....Some text goes here....Some text goes here....Some text goes here....</p>

        </div>
  </div>
  <div class="wrapper">
        <div class="card">
            <div class="image animate" data-animate="animImage 2s "></div>
            <h2 class="animate" data-animate="animTitle 2s ">Profile picture</h2>
            <p class="animate" data-animate="animContent 2s ">Some text goes here....Some text goes here....Some text goes here....Some text goes here....</p>

        </div>
  </div>
  <div class="wrapper">
        <div class="card">
            <div class="image animate" data-animate="animImage 2s "></div>
            <h2 class="animate" data-animate="animTitle 2s ">Profile picture</h2>
            <p class="animate" data-animate="animContent 2s ">Some text goes here....Some text goes here....Some text goes here....Some text goes here....</p>

        </div>
    </div>

Step 4] Add Javascript's intersection observer functionality to detect scroll position

Intersection observer basically observes elements that you tell it to. It will observe changes in the intersection of a target element with an ancestor element. Our ancestor element is going to be the browser viewport and the target elements that we observe for intersection are the three elements of the card namely .image,p tag and h2 tag.
You can read more about Intersection Observer API here. Please note, in the API documentation they have examples where you define a root element, for our case I have left it out beacause I want it to default to browser viewport (If you dont define a root element, it will assume the ancestor as being the root). So our basic code structure for our use case will look like:



    <script>
        const callback = (entries) => {
                   //4] Callback code goes here
         }

        //1]Create a new intersectionObserver object, 
        //which will accept a callback function as 
        //a parameter.

        let observer = new IntersectionObserver(callback);


        //2]Select all elements that have ".animate" 
        //class.In our case we have three 
        //elements (.image,<p> and h<2>).

        const animationItems = document.querySelectorAll('.animate');


          //3]Loop through selected elements and add to the
          //observer watch list.      

          animationItems.forEach(item => {
            observer.observe(item)         
        })


    </script>

Will will add this code inline in the markup, at the very end of the body tag. So to simplify, you have 4 steps

1] Create a IntersectionObserver object
2] Query and select items that you want observed
3] Add the selected items to the watch list of the IntersectionObserver object
4]Provide a callback function that will do something when ever an intersection event occurs. In our case we want it to attach a keyframe animation.

In the above code I did not write the code for the callback function. So thats our next task

Step 5] IntersectionObserver callback function



        const callback = (entries) => {

           // The entries variable will contain the list of
           // elements that you are observing. When ever 
           // intersection occurs, you need to do forEach loop 
           // to find which one intersected. 
           // For this we check a flag on the element called "isIntersecting"
            entries.forEach(
                (entry) => {
                    if (entry.isIntersecting) {
                        console.log("The element is intersecting >");
                        //If intersecting then attach keyframe animation.
                       //We do this by assigning the data attribute 
                       //we coded in the markup to the style.animation 
                       //of the element
                        entry.target.style.animation = 
                        entry.target.dataset.animate;
                    } else {
                        //We take of the animation if not in view
                        entry.target.style.animation="none";
                    }
                }
            );       
        }

The callback will be called whenever a inetrsection occurs. The callback will have access to all the elements that we in the observer list. In the call back we have to loop through to find which one intersected. We do this by checking a flag on the element called isIntersecting. If you inspect the IF statement, you will see this. ```

if (entry.isIntersecting) {...}


If it is intersecting then we attach the keyframe animation to the element, thats what the following line does :

entry.target.style.animation = entry.target.dataset.animate

Here we set the elements style.animation to the fetched data attribute called "data-animate" which was setup in step 3. For example, for the image we would get the string part off the data attribute on the elements markup:

{% raw %}``

in this case its "animImage 2s".

The ELSE part of the code removes the animation because it is not intersecting :
` entry.target.style.animation="none"; `

So if you scroll back and forth the animation will run again.

The end product

Hope you enjoyed this tutorial and you can see the final code on codepen

Styled components cheat sheet for React

Keerthi — Wed, 16 Jun 2021 16:17:59 +0000

The use of Styled components in React.js app development has become quiet popular in the last few years, its popularity is mainly due to the fact that it provides a better developer experience when it comes to writing styles for your app. Traditionally you would have one long css style sheet with all your styling centralized in one place. The problems that you commonly face are CSS name clashes and styling problems due to specificity issues. As well as styled components, many other solutions address these problems particularly BEM, sass, CSS modules, and they all have their pros and cons. This article is not going to discuss which is best to use but rather provide a cheat sheet for styled components. There's also a video that I made on this as well.

Four things that makes me want to use styled components in the future are:

1] Scope level styles, ie component and styles are grouped together, so you dont have to do much searching around finding the style that is breaking your UI.
2] Use of variables and ability to inject props into your components. Yes its dynamic and can use programming logic!
3] No need to waste time thinking up unique class names.
4] Easy to learn.

Lets look at how to code your first styled component

As you can see from the three steps shown above, its quiet easy. You might find the declaration a bit odd because we are calling the styled component function with back ticks.

const Button = styled.button`color:red;`

but this is really same as making a normal function call and passing an array:

const Button = styled.button([`color:red;`])

Calling function without the brackets and putting your arguments between back ticks is called tagged template literals, this is a Javascript feature. When tagged template literals are interpreted, there will always be one argument that will be of type array.

To see some examples and read more about tagged template literals, go to Wes Bos article

From Wes Bos's article you learn that you can inject variables into tagged template literals. So in styled components you can do the following:

let primary_color='red';
const Button = styled.button`color:${primary_color};`

This is what gives styled components super powers and you can do all sorts of tricks with it.

Here is a cheat sheet for beginners who are using styled components for the first time

Here are some code snippets that will help you get started and make the most of styled components. The code examples in this cheat sheet assumes you have created a basic app using npx create-react-app.

1] install

npm install styled-components
yarn add styled-components

2] Import into your scripts

// then, just import it into your script like:
import styled from "styled-components"

3] Basic styling of elements ie h1,h2,div,input,span etc

//Declare wrapper for a h2 element with styling like this
const Headline = styled.h2`
  color: black;
  border-bottom:1px solid black;
`
function App() {
  //Use Headline wrapper component in your app 
  return (
    <Headline>
      The Headline goes here
    </Headline>
  )
}

There are methods for all html elements so you can style a <diV> by using styled.div , or style <input> by using styled.input

4] Include Pseudo-classes like :hover, :focus, :active etc, by pre-fixing a '&'. Like `&:hover {.....}`

    const Button = styled.button`
        width:100px;
        color:white;
        background-color: green;

        //Add hover styling
        &:hover {
            background-color:gray;
        }

    };`

5] Include media queries in your styled components.

    const Wrapper = styled.div`
    width:50vw;

    //Make it full width on smaller screens 
    @media screen and (max-width: 800px) {
        background-color: lightgray;
        width:100vw;

    }
    `

6] Extending styles in your styled component - You can use a base style, then extend that with new style rules

// Base style for heading 
const Headline = styled.h1`
  border-bottom:2px solid gray;
  color: blue;
`;

//Extend base style to overide color
const HeadlineGreen = styled(Headline)`
  color: green;
`;

function App() {
  return (
    <>

      <Headline>
        Standard Blue headline
      </Headline>
      <HeadlineGreen>
        Extended green headline 
      </HeadlineGreen>
    </>
  );
}

If you look carefully at HeadlineGreen declaration you would see that we are passing Headline as an argument ie

const HeadlineGreen = styled(Headline)`.....`

7] You can still use classes and write styles for selectors like normal css styling


//Style everything inside the wrapper with css selectors
const Wrapper = styled.div`
  width:100%;

  .big-heading {
      border-bottom:2px solid blue;
      color: blue;
  }
  button.primary {
    width:100px;
    height:50px;
    background-color:green;
    color:white;
  }
`

function App() {
  return (
    <Wrapper>      
      <h2 className='big-heading'>
        Standard Blue headline
      </h2>
      <button className='primary'>
        A plain Button
      </button>
    </Wrapper>
  );
}
export default App;

8] You can pass props to your styled component

const Headline = styled.h1`
  color: ${props => props.color};
`
function App() {
  return (
    <>
      {/* We are passing color as a prop, we also set its value to pink*/}
      <Headline color="pink">
        Standard Blue headline
      </Headline>
    </>
  );
}
export default App;

In the above code we are setting the color of Headline dynamically, depending on what is passed as props for the color attribute. You can access props by writing a fragment of code like: ${props => props.color} and in the JSX we set it like <Headline color="pink">.....</Headline>

9] How to apply global styles that target `<body>` and `<html>` or where to put your reset styles.

import styled,{createGlobalStyle} from 'styled-components';
// Remember to import createGlobalStyle as above

const GlobalStyle = createGlobalStyle`
    * {
        margin: 0;
        padding: 0;
    }

    body {
        background: teal;
        font-family: Open-Sans, Helvetica, Sans-Serif;
    }
`;

function App() {
  return (
    <> {/*Place the GlobalStyle tag at the very top of your app component tree.*/}
      <GlobalStyle />
      <h1>
        This is a landing page
      </h1>
    </>
  );
}

Remember to import createGlobalStyle from styled-components like this:import styled,{createGlobalStyle} from 'styled-components';. You can place the tag at the very top of your app component tree.

Hope you enjoy using styled components

So I hope this introduction cheat sheet to styled components gets you off and running in your next project. Remember this is just the tip of the ice-burg. You can do so much with it.

Create fancy borders for your images.

Keerthi — Thu, 27 May 2021 13:48:42 +0000

Recently I needed to make odd shaped borders for some images in a card UI. Most of the times you would create these images in photoshop or some other imaging software. So I looked into border radius and its advanced features.

Most developers know that in CSS you can achieve rounded corners by applying border-radius:

here I have 2 values for border-radius which are 10% and 20%.

But you can have upto 8 values, below is a list of configurations for border-radius values and how those are applied:



/* Radius is set for all 4 sides */
border-radius: 10px;

/* top-left-and-bottom-right | top-right-and-bottom-left */
border-radius: 10px 5%;

/* top-left | top-right-and-bottom-left | bottom-right */
border-radius: 2px 4px 2px;

/* top-left | top-right | bottom-right | bottom-left */
border-radius: 1px 0 3px 4px;

/* The syntax of the second radius allows one to four values */
/* (first radius values) / radius */
border-radius: 10px / 20px;

/* (first radius values) / top-left-and-bottom-right | top-right-and-bottom-left */
border-radius: 10px 5% / 20px 30px;

/* (first radius values) / top-left | top-right-and-bottom-left | bottom-right */
border-radius: 10px 5px 2em / 20px 25px 30%;

/* (first radius values) / top-left | top-right | bottom-right | bottom-left */
border-radius: 10px 5% / 20px 25em 30px 35em;

The above values are from MDN Web Docs https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius. Here they try to explain how these values are applied. But the problem is when you apply two values to a single corner. This makes it very confusing. This configuration is achieved by separating values with a single '/' (slash).With this configuration, You can create complex borders like :

There is an article that explains this further https://9elements.com/blog/css-border-radius/ .

But how can you practically use this?

I have come to the conclusion that you have to be a genius to create meaningful shapes from the top of your head with the 8 value configuration. But luckily there is a border radius generator you can use here https://9elements.github.io/fancy-border-radius/

Here you can graphically adjust the borders with the little handles and you copy and paste the border-radius values into your CSS styles.

Create a Navbar in NextJs using shared layouts and CSS modules.

Keerthi — Tue, 23 Mar 2021 15:27:54 +0000

This is a video tutorial on how to create a shared layout in Next.js

This tutorial covers the following :

Customize _app.js and create a layout component for your website
Create global and layout styles using css modules
Navbar markup and styling
Navbar toggle and animation code logic
Add about and contact page

Enjoy the video

The top 5 ReactJs chart libraries, video review.

Keerthi — Fri, 12 Feb 2021 15:17:49 +0000

Further to my one of my previous posts titled "The top four React chart libraries that you need to know for 2021", I have created a video review of the chart libraries plus a an extra chart library called "react-chartjs-2". This is basically the react version of the popular javascript library chart.js.

The top four React chart libraries that you need to know for 2021

Keerthi ・ Jan 8 '21

#react #webdev #reactnative #javascript

In the video I go through some sample codes, how to install and use and cover the range of charts each library is capable of producing.You can see the whole video here :

To recap I have listed the reviews of the 5 chart libraries in the below section

📊 1.Recharts

Recharts is an easy to use component based chart library that works nicely with React. The good thing about recharts is that it provides very nice looking charts out the box. The bad point is that its difficult to customize if you don't like the chart designs it provides. This is one of the first goto chart libraries that most developers turn to first, and is been popular for many years, so has a large community and is well maintained.

Github Stars: 15.5k
Dev Community: large community size and a very good number of developers contributing to the continual development
Built With: ReactJS and D3.js
Drawing support: SVG Only
Mobile Support: No version specifically for React Native
Client Side/ Server side: Client side
Animation: Very basic animation, NO custom animation support
Responsive: Not by default, need to add wrapper component
Customisation flexibility: There are quite a few little things that are difficult to customize like rendering order and animation.
Example with live code: Good documentation and live code examples at https://recharts.org/en-US/examples

Recharts Demo with code: Area chart with cool gradients and animated tooltips https://codesandbox.io/s/bar-chart-recharts-cqsbn

📊 2.Victory

Victory charts provide average looking charts out the box, but it gives you the option to fine tune the designs the way you want it. It also provides some flexibility on the animation front. Its selling point is that it's designer friendly and supports Android and IOS through a React Native version that uses the same API

Github Stars: 7k
Dev Community: Its maintained by team of designers and developers from a respected software development company, Formidable.
Built With: React and D3.js
Drawing support: SVG
Mobile Support: Has a React Native version so can develop for ios and Android
Client Side/ Server side: Client side
Animation: fairly good animation support without external animation Libraries.
Responsive: Provides responsive feature by default for SVG charts
Customisation flexibility: Provides adequate customization through its properties, very designer friendly library. But there is a little bit of a learning curve on using it.
Examples with live code: Good interactive documentation with editable code at https://formidable.com/open-source/victory/docs

Victory Demo with code: Animated pie chart https://codesandbox.io/s/victory-pie-chart-bcmx6

📊 3.VISX (VX)

VISX (VX) uses D3 to perform mathematical computations while you use React to update the DOM. It comprises of small primitive visualization components that can be used to construct complex visualizations like chord, dendrograms, treemap, and Voronoi diagram. It evolved from projects carried out at Airbnb

From Airbnb developer site :
"At Airbnb, we made it a goal to unify our visualization stack across the company, and in the process, we created a new project that brings together the power of D3 with the joy of React."
Advantages are: Keep bundle sizes down, Un-opinionated on purpose, and Not a charting library

Github Stars: 12k stars on Github
Dev Community: Originally developed by Airbnb, Fairly Large community, well maintained
Built With: React and D3.js
Drawing support: SVG
Mobile Support: No support for Mobile
Client Side/ Server side: Client side
Animation: Can support animation with react-spring
Responsive: Not by default, need to add wrapper component
Customisation flexibility: The Use small d3 based primitive visualization components allows you the freedom to build complex visualizations.
Examples with live code: Quite hard to navigate the documentation, Doesn't explain things very well, but do provide examples with code at https://vx-demo.now.sh/gallery

VX Demo with code: Advanced animated Pie chart with inner and outer segments https://vx-demo.now.sh/pies

📊 4.nivo

Nivo s the only Charting library on this list that provides us the ability to generate charts on the server-side as well.

Nivo is capable of generating responsive charts using pure HTML, SVG, and canvas. Canvas charts are faster than SVG for extremely large datasets. HTML charts are ideal for email. So Nivo is a very complete library, unlike the rest in the list. Its also designer friendly.

Github Stars: 8.1k stars on Github
Dev Community: Fairly good community and well maintained
Built With: React and D3.js
Drawing support: SVG,Canvas,HTML
Mobile Support: No support for Mobile
Client Side/ Server side: Both
Animation: Supports animation.
Responsive: Provides responsive feature by default for most charts
Customization flexibility: Fairly good customization, can build a chart using their interactive playground or Storybook.
Examples with live code: Very good interactive documentation and live code on storybook at https://nivo.rocks/storybook/?path=/story/bar--stacked

Nivo Demo with code: Race chart https://codesandbox.io/s/race-chart-lz5s3

📊 5.REACT-CHARTJS-2

REACT-CHARTJS-2 Is the ReactJS version of Chart.js. It has very good out the box features. The vanilla javascript version has been a very popular javascript chart library for many years, but it has no specific documentation on the usage with React framework. It produces canvas based charts, so that means it good on performance when dealing with large data sets.

Github Stars: 3.7k stars on Github
Dev Community: Fairly maintained, considering that it is a wrapper for chart.js
Built With: Vanilla javascript
Drawing support: Canvas
Mobile Support: No support for Mobile
Client Side/ Server side: Client side
Animation: Can support animation
Responsive: Responsive out the box
Customisation flexibility: Fairly customizable with extra plugins
Examples with live code: There's no specific documentation for react.js, but refer to github page https://github.com/reactchartjs/react-chartjs-2

Top 5 most hearted animations and designs on codepen, whats under the hood ?

Keerthi — Mon, 18 Jan 2021 09:46:59 +0000

Codepens 100 "The MOST HEARTED of 2020" list is out, and as usual consists of very exciting designs and animations,you can see the whole list here All are handcrafted with diverse skillsets. So in this post, I have chosen the top 5 and for each, I will give you a glimpse of what is under the hood, and indicate what skillsets are used to achieve such amazing creations. I will also give some resources for you to look up and research further.

1 Card Hover Interactions

by Ryan Mulligan
This creation took the top spot, it comprises three cards with scenic backgrounds and some text content. Hovering over the cards produces a very smooth animation of the different elements, this technique is called staggered animation.

You can inspect the core of the CSS transition animation by referring to block of code in the CSS from lines 171 to 204



@media (hover: hover) and (min-width: $bp-md) {
  .card:after {
    transform: translateY(0);
  }

  .content {
    transform: translateY(calc(100% - 4.5rem));

    > *:not(.title) {
      opacity: 0;
      transform: translateY(1rem);
      transition:
        transform var(--d) var(--e),
        opacity var(--d) var(--e);
    }
  }

  .card:hover,
  .card:focus-within {
    align-items: center;

    &:before { transform: translateY(-4%); }
    &:after { transform: translateY(-50%); }

    .content {
      transform: translateY(0);

      > *:not(.title) {
        opacity: 1;
        transform: translateY(0);
        transition-delay: calc(var(--d) / 8);
      }
    }
  }

Yes its a bit complex to explain because its written in sass and also uses variables, its basically using staggered CSS Transitions animation. You can learn more about it here : https://css-tricks.com/staggered-css-transitions/

Skillset needed

pug - This is used for generating HTML
sass - This is used to generate css
CSS - Transform animation, Responsive CSS grid, css variables
Resources
https://css-tricks.com/staggered-css-transitions/

2 Airplanes

by Steve Gardner
In this sleek animation, the scrollbar is used as a way to control the animation of the airplane. As you scroll the airplane flies in 3d, and the text content scrolls the opposite way.

This animation uses two different animation libraries. It uses three.js to deal with the 3D aspects of the model of the airplane, then uses greensocks scrollTrigger and drawsvg plugins to do large part of the animation. If you want to know how these things work then read more about it here:
scrollTrigger: https://greensock.com/scrolltrigger/
drawsvg: https://greensock.com/drawsvg/
three.js: https://threejs.org/

Skillset needed

HTML
sass - This is used to generate css
Key CSS techniques - Clip path, multiple background-images
SVG
Javascript - Use of three.js to create 3d models , use greensocks animation libraries especially scrollTrigger.
Resources
GSAP: https://greensock.com/get-started/
scrollTrigger: https://greensock.com/scrolltrigger/
drawsvg: https://greensock.com/drawsvg/
three.js: https://threejs.org/

3 CSS Grid: Newspaper Layout

by Olivia Ng

This is a clever precision engineered layout to simulate an old fashioned newspaper layout that is also responsive. This is a good example of how to configure a complex design layout to fit all screen sizes.

The most important trickery to note here is how some of the nested layout is defined by the use of column-count. Usually, most people use CSS grid for the main grid and use flex box to achieve a nested layout within the grid. But a better cleaner solution is to use column-count. From the screenshot below, You can see how the bottom highlighted content is defined with column-count:2 :

And the main grid area config is shown below labeled as 1 in the screenshot. The second style property, labeled 2, shows how one of the grid area is defined.

Skillset needed

Pug - Generates html
SASS - Creates css
CSS variables
CSS - An advanced understanding of Grid plus the use of column-count.
Resources
https://css-tricks.com/snippets/css/complete-guide-grid/
https://developer.mozilla.org/en-US/docs/Web/CSS/column-count

4 Candy Color Button Animation

by Yuhomyan
This is a collection of 16 buttons each with its individual animation applied in the css. The animation ranges from changing colors of background, applying gradients to 3d rotation.

below is the properties for button 12, this has a 3d rotation applied to 2 surfaces of the button. Rotation is applied with "transform: rotateX(-90deg);" setting:



.btn-12 span:nth-child(2) {
  -webkit-transform: rotateX(0deg);
  -moz-transform: rotateX(0deg);
  transform: rotateX(0deg);
  -webkit-transform-origin: 50% 50% -20px;
  -moz-transform-origin: 50% 50% -20px;
  transform-origin: 50% 50% -20px;
}
.btn-12:hover span:nth-child(1) {
  box-shadow:inset 2px 2px 2px 0px rgba(255,255,255,.5),
   7px 7px 20px 0px rgba(0,0,0,.1),
   4px 4px 5px 0px rgba(0,0,0,.1);
  -webkit-transform: rotateX(0deg);
  -moz-transform: rotateX(0deg);
  transform: rotateX(0deg);
}
.btn-12:hover span:nth-child(2) {
  box-shadow:inset 2px 2px 2px 0px rgba(255,255,255,.5),
   7px 7px 20px 0px rgba(0,0,0,.1),
   4px 4px 5px 0px rgba(0,0,0,.1);
 color: transparent;
  -webkit-transform: rotateX(-90deg);
  -moz-transform: rotateX(-90deg);
  transform: rotateX(-90deg);
}

Skillset needed

HTML
CSS - Average understanding of CSS and specifically transition and keyframe animation. Also how to apply multiple shadows and linear gradients.
Resources
https://developer.mozilla.org/en-US/docs/Web/CSS/animation
https://www.youtube.com/watch?v=cH0TC9gWiAg

5 Impossible Checkbox v2

by Jhey
This is an svg animation created using GSAP timeline animation. It's like a little game with a character. When you click on the check box switch it moves to the other side, then you see a little paw switch it back. When you keep clicking on it a bear gradually reveals itself, then it gets angry. Try it out yourself! The actual bear is a set of svg drawings that consist of three parts as shown below :

The trick is to hide these parts behind the button switch and animate them separately with co-ordination. That's where GSAP comes in. You can use the timeline feature in GSAP to construct the animation of the different assets so that you have better control over your animation. There are also some rules built into the animation so that different variations of the animations are presented depending on the number of times the switch has been clicked. This demo is built using react.js, and the bulk of the animation logic is inside the useEffect hook which starts at line 53. At line 82 is particularly important, that's where the timeline is declared, which looks like :const bearTL = timeline({ delay: Math.random(), onComplete })

Skillset needed

Pug - Generates html
Stylus - Generates css
SVG - Good understanding of how to create and manipulate svg artwork especially for animation.
Javascript - ReactJS framework, GSAP animation using timeline
Resources
Gsap - https://greensock.com/get-started/

Hope you enjoyed this review and dont forget to read my other posts...

Animating lists in Vue 3: Create friend-list UI

Keerthi ・ Nov 18 '20

#javascript #vue #css

ReactJs Animation: Create login/register form with react-spring animation

Keerthi ・ Sep 28 '20

#react #css #javascript #animation

A basic responsive bar chart in reactjs can be hand coded easily.

Keerthi ・ Oct 30 '20

#javascript #react #css #webdev

The top four React chart libraries that you need to know for 2021

Keerthi — Fri, 08 Jan 2021 15:27:23 +0000

Representing your data in the form of visual charts is a great way to engage with your users. There are countless ways of representing your data visually and it can be daunting trying to choose the right one, ie bar charts, pie charts, infographics charts, and the list goes on. When you are faced with undertaking a challenging ReactJS data visualization project, what are your choices?. This article will address just that.

How do I narrow the choices for picking the right React Chart library for my project ❓

There is a sea of ReactJS chart libraries out there, for the benefit of this article I have reduced it to 4 that I consider you should research first, depending on your project requirements. Below is the criteria that will be used to evaluate the libraries :

Github Stars: This will give an indication of how popular the library is on Github
Dev Community: Is the development community large and is it well maintained ie regular bug fixes, new features, etc
Built With: What is the underlying library that it is built on,for Majority of cases, its d3.js
Drawing support: Charts can be outputted as SVG, Canvas, or HTML
Mobile Support: Does the library support React native to enable development for android and IOS
Client Side/ Server side: Most are client side libraries, but does the library have any support for server side.
Animation: What level of animation support does the library have
Responsive: How are charts made responsive, some have wrappers, some are out the box ready
Customization flexibility: What level of customization is available, especially for designers.
Examples with live code: Is there good examples of code and documentation

📊 1.Recharts

Recharts Demo with code: Area chart with cool gradients and animated tooltips https://codesandbox.io/s/bar-chart-recharts-cqsbn

📊 2.Victory

Victory Demo with code: Animated pie chart https://codesandbox.io/s/victory-pie-chart-bcmx6

📊 3.VISX (VX)

VX Demo with code: Advanced animated Pie chart with inner and outer segments https://vx-demo.now.sh/pies

📊 4.nivo

Nivo s the only Charting library on this list that provides us the ability to generate charts on the server-side as well.

Nivo Demo with code: Race chart https://codesandbox.io/s/race-chart-lz5s3

Additional Video Resource

Recharts

React-chartjs-2 (This is also popular, I did not cover this in the above review but worth a look)

Conclusion

Hopefully, this review would help for those seeking a chart library for ReactJs. Choosing the right one is up to you and it all stems from the project requirements. If you want something built on the server side then Nivio is best, If you want to develop for browser and Mobile then Victory is the best, and if you want something quick and clean then Recharts is best. If I had more time I would have included the following libraries too :
React-Vis , React-chartjs-2 and BizCharts. Please leave a comment if you have used these and think they should have been on the list too.

How I re-wrote a hand-coded ReactJs bar chart to Svelte

Keerthi — Tue, 29 Dec 2020 15:39:31 +0000

This article is the second part to an article I wrote previously: "A basic responsive bar chart in ReactJs can be hand-coded easily." The article discussed how to hand-code a bar chart in RecatJs. In this article, I will discuss how I rewrote the ReactJs bar chart code to svelte framework code. I outline the process I went through to re-write the React code to Svelte. You may find this useful if you have a reasonable knowledge of React and want to experiment with Svelte.

TL:DR I rewrote Reactjs code by copying over as much blocks of code I can from Recatjs to Svelte. The only bits I couldn't copy over was any code that had references to state data, but I only had to make very small adjustments for that. The final Svelte code had 80% reused code from React. My opinion is that Svelte single file components are very easy to grasp and work with especially if you are developing small app or if you are developing a prototype, and there is a great reduction in boiler plate code

You can see the full video here (All github code included in Video description):

The visual structure of the demo chart app

Below is the basic visual structure of the app, we have a legend, and SVG that houses the chart and a button. There is a function associated with the button, we will call this refreshChart(), which should generate a random set up expenses. As you can see we also need a function to return the highest expense, we will call this calculateHihestExpense().

Installation process for React and Svelte using CLI

I did the initial install of both demo apps using their respective CLI commands. See below

// For react run :
npx create-react-app chart-demo

// For Svelte run:
npx degit sveltejs/template chart-demo

For svelte you can get more info about installation here: https://svelte.dev/blog/the-easiest-way-to-get-started

Comparison of the folder structure of the source directory

After the initial setup of the app in React and in svelte, I did some cleanup and took out unnecessary code that you usually get with the boilerplate code. Above shows the simplified folder structure of our source directory, after my clean up.

The barebones code needed to bootstrap your app

The above diagram compares the barbones code/files needed to bootstrap a basic app.

Things to note about the default code that comes out the box for React and Svelte:

Svelte - After the build process your app code will be injected into DOM object document.body
React - After the build process your app code will be injected into DOM oject document.getElementById('root').
Svelte - Uses single file component concept, where you name component file with extension 'svelte'. You put your js code in between script tags. Your HTML template for the component will be wrapped around a normal HTML tag. Finally, the css will be wrapped around a style tag. Basically, when you look at a svelte component file it resembles more of HTML file structure.
React -Uses the function component concept. You write your component as a function, the name would start with capitals ie App.js. In the component file you will have the export default statement at the end to signify what is to be imported when using the import command in other areas of your app. Your template that is to be rendered will be in the form of JSX code. And last, your css is going to be imported from an external file.

Now lets fast forward to the final re-written code for our Svelte chart app.

Now lets look at the bulk of the JS code logic, in the diagram above, we have App.js (React) on the left side and App.svelte (Svelte) on the right. The green blocks of code are the code that I have copied over without any modifications. The white boxes contain code that I had made modifications to. The above image only shows the main data and logic of our app, the rendering of the view is cut off from the image, we will look at the rendering in the next section. The green blocks are mainly our initialization data and methods ie our initial expenses data (block numbered 1), general settings for our chart (block numbered 3). These green blocks numbered 1,3,4 and 6, can be copied straight to the script section in App.svelte.

The white boxes labeled 2,5 and 7 contain code that references state related data, In react, the useState hooks are used to change state data during the life cycle of our app. In svelte you are not forced to use any state management patterns and you are free to change values as you please using normal variables.

To summarise we have roughly reused more than 60% of the react JavaScript logic code. The only brain intensive task we had to do was convert the state related logic to svelte, which is quite easy, just assign values to these variables as normal. The reused code formed 90% of svelte code, so that's a great win for us too

This is how to re-write the JSX render related code to svelte

React code has all the rendering templates and logic in the form of JSX. The above diagram shows how I reconstructed the rendering logic and template in Svelte. The white boxes represent the code that I used to do this reconstruction. In Svelte , I first have a wrapper for the app, this will be a div with id of "root". As you know in our react app, the default wrapper is , so I will follow that convention so that our css styles can be copied over nicely.

The first box in the above diagram is the JSX code for the legend, this will nicely be copied over to the svelte side. Next is the refresh button, this can be converted as below:.

<button onClick={refreshChart}>Refresh Chart</button>

Converted to svelte, it becomes  --->

<button on:click={refreshChart}>Refresh Chart</button>

As you can see above the click handler onClick event in react becomes on:click in svelte. This small change will enable our call back function to be called when the button is clicked.

Next element to convert is the box labelled SVG. This is the chart component that holds the JSX for the SVG element and its attributes. This can be copied over to Svelte as below :

<svg
    viewBox={`0 0 ${width} ${height}`}   
    width="100%"
    height="70%"
    preserveAspectRatio="xMidYMax meet"
  >
    {children}
  </svg>

Converted to svelte, it becomes  --->

<svg
  viewBox={`0 0 ${width} ${chartHeight}`}   
  width="100%"
  height="70%"
  preserveAspectRatio="xMidYMax meet"
>  </svg>

Two things to note, We remove the {children} reference. This is a JSX thing, we use this pattern to construct nested components, we basically saying that this has child components. Instead we will populate it with the mark-up for the bars and text. I have also renamed the template variable ${height} to ${chartHeight}, this was minor thing that made sense in svelte.

Next we are going to reconstruct the rectangle bars and text. In the last section, we removed the reference to ${children}, in its place we are going to construct the bars and text for our chart, by modifying the JSX version as shown below:

<rect x={x} y={y} width={width} height={height} fill={ highestExpense===height ?`purple`:`black`} /> 
      <text x={x + width / 3} y={y - 5}>
         {highestExpense===height ? `${expenseName}: ${height}` : `${height}`}
      </text>

Converted to svelte, it becomes  --->

{#each expensesData as data,index}
  <rect x={index * (barWidth + barMargin)} y={chartHeight - data.expense} width={barWidth} height={data.expense} fill={highestExpense===data.expense ? `purple` : `black`} /> 
  <text x={index * (barWidth + barMargin) } y={chartHeight - data.expense - 5}>
    {highestExpense === data.expense ? `${data.name}: ${data.expense}` : `${data.expense}`}
  </text>
 {/each}

Please note that the bars and text was generated by the bar component in react. But in Svelte we are going to alleviate the chart and bar component and instead we are constructing the chart with single template. In svelte, the template section has full access to our data, so for us to iterate through the data to construct the bars we use the #each looping construct, which has the following pattern:

{#each expensesData as data,index}
.....
....
{/each}

Finally the CSS styles....

we can copy the entire css styles from App.css, with an exception of the styles for body and html elements. We can place it at the end of App.svelte. You just need to remember that styles are enclosed by tag, as you would expect in HTML file. Now I mentioned that the styles for body and html elements were left out, the reason being is that App.svelte is a single file component, and the scope of the app is everything between the wrapper

. So only the styles inclusive of the div element with id=root will be styled properly. For our style sheet to target body and html elements, we need to declare it with :global(...) in our styles, as shown below:

:global(html){
  height:100%;
  padding:0;
  margin:0;
  font-family: 'Open Sans', sans-serif; 
  font-size: 2vh;;
}

:global(body) {

  width:100%;
  height:100%;
  background-color:#ccc;  
  display:flex;
  justify-content:center;
  align-items:center;
  flex-direction: column;

}

So this is what I have learned...

I was able to reuse much of the react code, the code that was written in Svelte was composed of 80% code copied straight from the React version of the app. The fact Svelte is a compiled language and that it is designed to be reactive meant that I do not have to implement any state management, this is a plus, so I can just assign new values to variables without any state management code. But I do realize that in a more complex app you do have state management requirements and there are components for that in Svelte.

In the React version of our app, we had the nested child components, Chart and Bar, to represent the nested views, this is following the React recommended pattern. The problem with this is that it produces an awful amount of code. In Svelte, this is all abstracted out. The single file component is an easy concept to grasp and it makes the code more readable. When writing the code, all you do is you write the code like if you are writing HTML code and if you have a list of items to render, svelte provides you with a handy looping block construct #each. You are sort of focusing more on the html markup and less focus on functions.

In svelte, the CSS is scoped for single file components, so I was able to reuse the style sheet from the react version. But I did have a css reference to html and body elements, which are outside of scope. To make my app style properly I had to declare out of scope elements with the :global() declaration.

Animating lists in Vue 3: Create friend-list UI

Keerthi — Wed, 18 Nov 2020 18:42:05 +0000

Animations in web applications are very effective if done right. They can prolong the time a user spends on your website if the animation is smooth and captivating. But if the animation is inappropriate or choppy in its motion then users get frustrated and leave very quickly.

When it comes to web application frameworks and animation, One thing that developers like about Vue.js is the fact that Vuejs has support for animations built-in, that's right no need to fiddle around and research 3rd party libraries. You just need to install Vue.js and you're off!.

In this article, we will be looking at some common animation features of Vue3.

Video Tutorial - How to create friend list UI in Vue 3

Preview of UI

How does Vue.js make it easy to add animations?

Out of the box, Vuejs supports transitions and animations. Transitions are based on two-state animation, where you have a start animation state and an end animation state and you apply some sort of motion algorithm to make a transition from the start state to end state.

You dont have to worry about the motion algorithm, thats all taken care off in the browser.

Usually states change when something is added or removed from the dom. Vue 3 provides Hooks for components entering and leaving the DOM. This is achieved by using the built-in and component wrappers, as shown in the example below:

In the above example, the

tag with the message "This will be added and removed from the DOM" is wrapped around a tag. Also, note that we have the V-If="show" as an attribute. This is the mechanism that allows us to decide if this tag is to be rendered or not, changing the value of show to false will remove it from the display.

If you look closer at the wrapper transition tag you will see that we also gave a name attribute which is set to fade, as shown here: . Under the hood, the transition component provides some hooks that do some magic to make the animation possible. These hooks will add enter-leave css classes, these are prefixed with the name attribute that you specified in the transition tag. In this example these dynamically generated classes are : .fade-enter-active, .fade-leave-active,.fade-enter-from, .fade-leave-to.



.fade-enter-active, .fade-leave-active {
  transition: opacity .5s;
}
.fade-enter-from, .fade-leave-to  {
  opacity: 0;
}

So the above css will animate the opacity of our

tag whenever it is added or removed from the DOM.

Take it a step further and use

You can take this further by animating a group of items like a list. Please see the example below:

The key part in the template is the block of code for rendering the list :



<transition-group name="list" tag="ul">
    <li v-for="item in items" :key="item" class="list-item">
      Item: {{ item }}
    </li>
  </transition-group>

We are using .We are replacing a normal

with . In the transition tag we have a tag attribute which we set to "ul". This makes sure that we are rendering a ul. And we also specify the name attribute as "list". Knowing this we can add the animation style properties for the dynamically generated classes as shown below:



.list-enter-active,
.list-leave-active {
  transition: all 1s ease;
}

.list-enter-from,
.list-leave-to {
  opacity: 0;
  transform: translateY(30px);
}

This will apply a transition to all properties, but we only animate the opacity and y position.. Ie We start at y-position at 30px then move it to position 0, we also apply an opacity of 0 as end with opacity 1.

Now for more advanced animation, we use key frames.

We can use keyframes to apply intermediate states between our start state and end state to achieve advanced animation. In the example below, we add an effect of the item bouncing in and out.

So our styling for the Vue generated animation state classes becomes:
To bounce out we use the same animation in reverse. That is why we have the keyword reverse in the .list-leave-active class :



.list-leave-active {
  animation: bounce-in 0.5s reverse;
}

These are the simple features you can use to animate in Vue 3, please see the video it goes through how to create an animated friend list UI, using these techniques.

DEV Community: Keerthi

Crash course in interactive 3d animation with React-three-fiber and React-spring

Introduction

What will be covered in this post are :

Quick intro to three.js, React-three-fiber and interactivity

A bit about 3d coordinate system

Structure of a very basic 3D project in three.js

Part2 : How to build your first 3d interactive app with react-three-fiber and react-spring

Step 1: Project setup

Step 2: Add some basic styling

Step 3: Basic app.js structure to set the canvas, scene and light.

Step 4: Lets write code to define our 3d Cube

Step 5: Add some fancy lights, colour and animation

Step 6: Make cube interactively change colour on hover

Step 7: Add smooth animation to resize cube on click event

A crash course in React.js and D3

Introduction

The top four React chart libraries that you need to know for 2021

Keerthi ・ Jan 8 '21

What is D3.js ?

Is D3 easy to learn ?

When should I use D3 then?

How do you get started with React and D3.js ?

What other resources are there to learn from

Bonus videos on Recharts and react-chartjs-2

Create react app vs Vite

So how do we start the ball rolling

Directory structure of the our newly created app

One last thing about importing files...

conclusion

Scroll animation in Javascript using IntersectionObserver

Step 1] First lets layout our HTML markup and Styling for a basic card UI

Step 2]Now lets add some basic animation in CSS with keyframe animation

What we have so far

Step 3] Make changes to HTML markup before we add intersectionObserver

Step 4] Add Javascript's intersection observer functionality to detect scroll position

Step 5] IntersectionObserver callback function

The end product

Styled components cheat sheet for React

Lets look at how to code your first styled component

Here is a cheat sheet for beginners who are using styled components for the first time

1] install

2] Import into your scripts

3] Basic styling of elements ie h1,h2,div,input,span etc

4] Include Pseudo-classes like :hover, :focus, :active etc, by pre-fixing a '&'. Like &:hover {.....}

5] Include media queries in your styled components.

6] Extending styles in your styled component - You can use a base style, then extend that with new style rules

7] You can still use classes and write styles for selectors like normal css styling

8] You can pass props to your styled component

9] How to apply global styles that target <body> and <html> or where to put your reset styles.

Hope you enjoy using styled components

Create fancy borders for your images.

But how can you practically use this?

Create a Navbar in NextJs using shared layouts and CSS modules.

This is a video tutorial on how to create a shared layout in Next.js

Enjoy the video

The top 5 ReactJs chart libraries, video review.

The top four React chart libraries that you need to know for 2021

Keerthi ・ Jan 8 '21

To recap I have listed the reviews of the 5 chart libraries in the below section

📊 1.Recharts

📊 2.Victory

📊 3.VISX (VX)

📊 4.nivo

📊 5.REACT-CHARTJS-2

Top 5 most hearted animations and designs on codepen, whats under the hood ?

1 Card Hover Interactions

Skillset needed

2 Airplanes

Skillset needed

3 CSS Grid: Newspaper Layout

Skillset needed

4 Candy Color Button Animation

Skillset needed

5 Impossible Checkbox v2

Skillset needed

Animating lists in Vue 3: Create friend-list UI

Keerthi ・ Nov 18 '20

ReactJs Animation: Create login/register form with react-spring animation

Keerthi ・ Sep 28 '20

4] Include Pseudo-classes like :hover, :focus, :active etc, by pre-fixing a '&'. Like `&:hover {.....}`

9] How to apply global styles that target `<body>` and `<html>` or where to put your reset styles.