Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Articles by Ath Tripathi
Page 8 of 8
Auto-scrolling animation in React.js using react-spring
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 MoreAdding Lottie animation in React JS
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 MoreCreating 3D Text using React-three-fiber
In this article, we will see how to create a 3D text using react-threefiber. We will first download the font of JSON and then we will add it in our Text Geometry object. We will add orbit control to it which will allow moving the text on the screen and view the 3D text properly. So, let's get started.ExampleFirst, download important libraries −npm i --save @react-three/fiber threeThis library react-three/fiber will be used to add webGL renderer to the website and to connect threejs and React.Now install a typeface font JSON and put it inside “src” folder. You can download a ...
Read MoreCreating 3D Globe using React-three-fiber
In this article, you will learn how to create a globe using react-threefiber. We will first make a sphere and then map a whole Earth map on it. This is an interesting texture loader feature using which we canmake any image to wrap over a sphere as texture. So, let's get started!ExampleFirst, download important libraries −npm i --save @react-three/fiber threeThis library react-three/fiber will be used to add webGL renderer to the website and to connect threejs and React.Download an image of Earth map and place it in the “src” folder. We have named the image file as "world-map.gif".Add the following ...
Read More