In this article, we will see how to make the popular parallax effect in React.js using react-spring animation library. Parallax is a displacement or difference in the apparent position of an object viewed along two different lines of sight, and is measured by the angle of inclination between those two lines. Parallax scrolling is an effect where the background content moves at a different speed than the foreground content. So, let's get started.First create a React project −npx create-react-app tutorialpurposeGo to the project directory −cd tutorialpurposeExampleInstall the following packages −npm install react-spring npm i --save @react-spring/parallaxreact-spring is used to add ... Read More

In this article, we will see how to create a basic cylinder-like shape in React using react-three-fiber. Three.js is a cross-browser JavaScript library and application programming interface used to create and display animated 3D computer graphics in a web browser using WebGL.ExampleFirst download the react-three-fiber package −npm i --save @react-three/fiber threethreejs and react-three/fiber will be used to add webGL renderer to the website. Three-fiber will be used to connect threejs and React.Add the following lines of code in App.js −import React, { useEffect, useRef } from "react"; import { Canvas, useFrame } from "@react-three/fiber"; import * as THREE from "three"; ... Read More

Axes helpers are used to show direction in three-dimensional figures when you apply any orbit control. Axes use the concept of coordinate geometry to show how to make shapes and make orbits for zooming, rotating, sliding, etc. They are really helpful while developing a 3D environment.ExampleFirst download the react-three-fiber package −npm i --save @react-three/fiber threethreejs and react-three/fiber will be used to add webGL renderer to the website. Three-fiber will be used to connect threejs and React.We will first make a cuboid and an orbit control for better viewAdd the following lines of code in App.js −import React, { useEffect } ... Read More

In this article, we are going to see how to make a 3D figure which will look like a donut. We will apply this in a webpage using react-three-fiber. We will use this package to make a donut-like shape which will keep moving and we will see it from inside of it.ExampleFirst, download important libraries −npm i --save @react-three/fiber threethreejs and react-three/fiber will be used to add webGL renderer to the website. Three-fiber will be used to connect threejs and React.Add the following lines of code in App.js −import React, { useRef } from "react"; import { Canvas, useFrame } ... Read More

In this article, we will see how to use Three.js in React by using a third-party package react-three-fiber. Three.js is a cross-browser JavaScript library and application programming interface used to create and display animated 3D computer graphics in a web browser using WebGLExampleFirst of all, install the react-three-fiber package −npm i --save @react-three/fiber threethreejs and react-three/fiber will be used to add webGL renderer to the website.Add the following lines of code in App.js −import React, { useRef, useState } from "react"; import { Canvas, useFrame } from "@react-three/fiber"; function Box(props) {    const mesh = useRef();    useFrame(() => ... Read More

In this article, we will see how to use the react-three-fiber package in React to make a ring which will rotate. Three.js is a cross-browser JavaScript library and application programming interface used to create and display animated 3D computer graphics in a web browser using WebGLExampleFirst, download important libraries −npm i --save @react-three/fiber threethreejs and react-three/fiber will be used to add webGL renderer to the website.Add the following lines of code in index.css −* {    box-sizing: border-box; } html, body, #root{ width: 100%; height: 100%; margin: 0; ... Read More

In this article, we will see how to drag and drop elements in a list. Drag and drop can be a useful feature when you are making a chat, dating, messenger, or any other similar type of web apps.ExampleFirst install the package "react-beautiful-dnd" −npm i --save react-beautiful-dndThis library will be used to add drag-and-droppable elements inside a list.Add the following lines of code in App.js −import { DragDropContext, Droppable, Draggable } from "reactbeautiful-dnd"; import React, { useState } from "react"; import "./App.css"; const finalSpaceCharacters = [    {       id: "gary",       name: "Gary Goodspeed", ... Read More

In this article, we will learn how make an autocomplete and suggestion box in React JS. Autocomplete is one of the basic features that every website has, however implementing it in a React website is very complex and problematic. Here, we will see an easy implementation of autocomplete in React JS.First create a React project −npx create-react-app tutorialpurposeNow go to the project directory −cd tutorialpurposeExampleFirst download a package −npm install --save downshiftThis library is used to add suggestion list for searchbox and the list will be written inside an array.You just copy the following code and change its style and ... Read More

In this article, we will see how to create a scroll to top animation in React JS using the react-spring package.First create a react project −npx create-react-app tutorialpurposeNow go to the project directory −cd tutorialpurposeExampleInstall the react-spring package −npm install react-springreact-spring is used to add Spring concept based animations to our website.Next, Add the following lines of code in App.js −import React, {useState} from 'react' import { useSpring, animated } from 'react-spring' export default function App(){ const [flip, set] = useState(false) const words = ['We', 'came.', 'We', 'saw.', 'We', 'hold', 'it s', ... Read More

Lottie is an open source animation file format that’s tiny, high quality, interactive, and can be manipulated at runtime. Let us learn how to implement Lottie animation in React.js. Lottie animations are mainly used for loader screen or as a start screen. It is written and implemented in JSON format in our React projects.ExampleGo to the official Lottie animation website and download Lottie JSON.Link to animation the I am going to use − https://lottiefiles.com/74546-character-02#/Name the JSON file "myloader.json" and keep it at the same level as App.js.Now install the react-lottie package −npm i --save react-lottieLottie library will be used to add ... Read More