Learn Remotion: Create Animated Video with HTML, CSS & React

Creating a video with text, animations, colors, and shapes traditionally requires specialist software and potentially years of motion graphic training. What if you could use your existing toolset, training, and background in web development to do the same?
Remotion allows JavaScript developers to reuse the skills and knowledge they’ve built up to create complex animated videos using HTML, CSS, and React JS. If you can render text with React, animate a CSS style, or organize HTML content, you can now create and edit your own videos using solely code, with no video editing applications or software required.
In this article, I’ll go through the process of using Remotion and talk you through my discoveries as we go along.
You can find the complete code for this article on GitHub.
Remotion: What, and Why?
Remotion is a video creation toolkit for React created by Jonny Burger. This toolkit allows anyone with a basic understanding of React, HTML or CSS to create animated videos using code.
In the video creation space there’s currently a high barrier to entry due to the required software and training needed to use and master these tools. By utilizing JavaScript developers’ existing toolkits, this opens the video creation space to a wider user base. As videos become code, we can leverage existing patterns to allow for more effective video creation — such as automated generation based on parameters or build pipelines.
Getting Started
Thankfully, Remotion has a quick and easy setup process with a Yarn and npm starter kit. For this example, we’ll be sticking with npm as the build and run tool. Before we get started, you’ll need to have Node and npm installed. (For assistance, you can follow this guide to installing Node and npm.) Also check the Remotion installation guide if you’re on Linux, as you may need to install additional tools. After getting Node and npm set up, let’s create a new project by running this code:

This will prompt you for a project name, which is also used as the directory name. In our case, it will be my-video. Once entered, we can move into the my-video directory and start the default video project by running the start script as follows:

After running the start command, the browser should automatically open. If not, open the browser and navigate to http://localhost:3000/. This feature allows you to watch and debug the video you’re creating. The player has controls that include a play button, which allows you to preview the video content. It may also be useful to start by looking at the code for the demo example, which Remotion provides as a guide for how to build your own video.
Hello, World!
We’re going to create our own video animating the text “Hello, World!”, to get to grips with the components and processes supplied in Remotion.
First of all, let’s delete the existing example code (everything in the src folder), as we want to start afresh. Then, let’s create a Demo directory under the src directory, which will hold and manage all our video work for this project. Inside the Demo directory, create a Demo.js file:

import {Composition, interpolate, Sequence, useCurrentFrame, useVideoConfig} from ‘remotion’;
import Title from ‘./Title’;
import Hello from ‘./Hello’;
import “./demo.css”;

const Demo = () => {
return (

{}

);
};

export const DemoVideo = () => {
return (

)
}

The Demo file exports our video code. As you can see, we can create a Demo component that will hold all the visual elements in our video. We can then export a component that renders the Composition of our video. The Composition component allows us to define some basic properties such as the width and height of the video clip, the FPS (frames per second), and the feature that will be rendered. We also import some utils and hooks from Remotion and some additional components that we will create soon.
Currently our Demo component is empty, but let’s add some elements to our video:

const Demo = ({titleText, titleColor}) => {
const frame = useCurrentFrame();
const videoConfig = useVideoConfig();

const totalOpacity = interpolate(
frame,
[videoConfig.durationInFrames – 25, videoConfig.durationInFrames – 15],
[1, 0],
{
extrapolateLeft: ‘clamp’,
extrapolateRight: ‘clamp’,
}
);

return (





<br /> </Sequence> </div> </p></div> <p> );<br /> };</p> <p>We’ve added a lot to the file, so let’s break this all down.<br /> Firstly in our render section, we can see from the file that we can now return a div with opacity styles, allowing us to fade elements in and out at the start and end of the video. For the opacity value, we use a Remotion helper. The interpolate function allows you to better define animations and map the animation values to the current frame and the video duration. In this example, we pass in the current frame. The function will get called on each frame generated. The input range is calculated from the duration of the video and the output value ranges from 0 to 1, as this is the range for the opacity CSS value. As the Demo component is re-rendered for each frame, the interpolate function is called each time and will return the appropriate opacity value.<br /> Next, we can begin rendering different visual elements on the video screen. In this example, we want the text “Hello, World!” to fade into view then disappear and the text “This is my first Remotion video” to then appear afterwards. To do so, we can render multiple Sequence components.<br /> A Sequence component is another Remotion feature that allows us to define how and when a component renders in a video and for how long. This is great for building complex videos where you want to add timed or layered elements, such as this example. Each Sequence will also show in the browser player and be titled based on the child component name. This allows you to monitor the video you’re generating and the effects you’re adding to it in real time.<br /> Remotion also provides some useful React hooks, and in this example we make use of the useCurrentFrame and useVideoConfig hooks. useCurrentFrame will return the current frame that the video is on, which is useful for animations and implementing actions based on where the current position of the video playback is. useVideoConfig will return an object with different values, such as:<br /> width: the width of the video — useful for positioning elements in the video<br /> height: the height of the video — useful for positioning elements in the video<br /> FPS: frames per second — which can be used to determine the speed of animation or element movement<br /> durationInFrames: the total length of the video in frames — which can be used to calculate animations or times for Sequence show and hide.<br /> In our case, as mentioned, firstly we want our Hello component, the text “Hello, World!”, to appear at the start of the video and remain on screen for half of the time. We do this by using the videoConfig.duration value, which we’ve calculated from the useVideoConfigHook.<br /> For the second Sequence, we want our Title component text, “This is my first Remotion video”, to appear after 35 frames and stay on screen for the full duration of the video. To achieve this, for From we enter 35, and for durationInFrames we enter Infinity.<br /> To style our demo component, we can use CSS along with inline styles. When using CSS, we want to apply styles to the whole video, so let’s create a demo.css file that will hold any styles that cover the whole video area. In our example, we want to make the background white and align out items with Flexbox:</p> <p>.main-container {<br /> flex: 1;<br /> background-color: white;<br /> }</p> <p>Now let’s delve deeper into these elements we’re rendering.<br /> Rendering React Components in an Animation<br /> The Hello component is going to be a basic React component that renders an H1 tag with some inline styles applied and the text “Hello, World!” This is the simplest form of a component we can render. For simplicity’s sake, we can use inline styles. But because this is React, you could also import styles from a CSS file and use a class name, styled-components, CSS modules, or any styling pattern you’re already familiar with as an alternative. Let’s create the Hello component. Inside the Demo folder, create a new file Hello.js: </p> <p>const Hello = () => {<br /> return (</p> <h1 style={{ fontFamily: 'SF Pro Text, Helvetica, Arial', fontWeight: 'bold', fontSize: 100, textAlign: 'center', position: 'absolute', bottom: 500, width: '100%' }} ><br /> Hello, World!<br /> </h1> <p> );<br /> };</p> <p>export default Hello;</p> <p>Now, let’s take a look at a more complex example. In the Demo folder, create a new file called Title.js and add in the component code below:</p> <p>import {spring, useCurrentFrame, useVideoConfig} from ‘remotion’;</p> <p>const Title = ({titleText, titleColor, bottom}) => {<br /> const videoConfig = useVideoConfig();<br /> const frame = useCurrentFrame();<br /> const text = titleText.split(‘ ‘).map((t) => ` ${t} `);<br /> return (</p> <h1 style={{ fontFamily: 'SF Pro Text, Helvetica, Arial', fontWeight: 'bold', fontSize: 100, textAlign: 'center', position: 'absolute', bottom: bottom || 160, width: '100%', }} ><br /> {text.map((t, i) => {<br /> return (<br /> <span key={t} style={{ color: titleColor, marginLeft: 10, marginRight: 10, transform: `scale(${spring({ fps: videoConfig.fps, frame: frame - i * 5, config: { damping: 100, stiffness: 200, mass: 0.5, }, })})`, display: 'inline-block', }} ><br /> {t}<br /> </span><br /> );<br /> })}<br /> </h1> <p> );<br /> };</p> <p>export default Title;</p> <p>We have a lot going on here, so again let’s break down what’s going on.<br /> Remotion has first-class support for TypeScript. This is not required, but it can make the development process better, as you’ll get more detailed autocomplete suggestions in your IDE. However, to make this example more beginner friendly, we’ll just use normal JavaScript.<br /> Our component takes in two props — titleText and titleColor — which will be used later in our render method. This shows that, using React, we can still pass props around the application, therefore making our video elements reusable and dynamic. You may have noticed that, in our Demo component, we passed props in from the Composition component. This shows the power of React in action. We can pass in props from the very top of the React application, making the video responsive, and meaning you could change one block of text to make a new video or to change the whole video context.<br /> After we’ve accessed our props in the Title component, we call the Remotion hooks again to get the videoConfig and frame data. The Title component then breaks the text prop passed and renders it one word at a time using a combination of a map and CSS transform. Here we have the opportunity to use another built-in helper function. Spring takes in values to help generate a smooth output for the animation value. We pass the main video config’s FPS to control the speed of the animation. The frame value controls when the animation starts, and finally we pass in additional configuration options to control the smoothness of the animation.<br /> After we have all our video components created and ready to go, we need to finally create an index.js file in the root of the src folder and add the following content:</p> <p>import {registerRoot} from ‘remotion’;<br /> import { DemoVideo } from ‘./Demo/Demo’;</p> <p>registerRoot(DemoVideo);</p> <p>The index file imports the registerRoot function from Remotion, which allows us to render the video content. Think of this as the ReactDOM render function but for Remotion. Then we pass our DemoVideo component to registerRoot, which will visualize the rendered video in either development or build modes.<br /> We’re now importing the Demo video that will get rendered by Remotion.<br /> Now that we have all of these features combined, we have a fully animated video that provides one example of the different components and helper functions supplied by Remotion.<br /> We can run the video from the root of the project with the following command:</p> <p>./node_modules/.bin/remotion preview src/index.js</p> <p>Or, you can update the start script in the package.json file:</p> <p>– “start”: “remotion preview src/index.tsx”,<br /> + “start”: “remotion preview src/index.js”,</p> <p>Then run the animation using npm start.<br /> Building the StarWars Animation<br /> Now we have a basic understanding of Remotion and the different components on offer, we can challenge ourselves and have a little bit more fun. Let’s build our own version of the iconic Star Wars title intro screen. We want to be able to render a sparkly star background with bright yellow text that scrolls up the screen. We can use the knowledge we have from our “Hello, World!” example as a starting off point.<br /> Let’s start by creating the files we need. In the src folder, create a starWarsIndex.js file and a StarWars folder. In the StarWars folder, create a further four files: starWars.js, starWars.css, starsBackground.js, starsBackground.css.<br /> When you’re done, the src folder should look like this:</p> <p>.<br /> ├── Demo<br /> │ └── Files from “Hello, World!” demo<br /> ├── index.js<br /> ├── StarWars<br /> │ ├── starsBackground.css<br /> │ ├── starsBackground.js<br /> │ ├── starWars.css<br /> │ └── starWars.js<br /> └── starWarsIndex.js</p> <p>Creating the Scrolling Text<br /> First, we start with a StarWarsVideo component, which will render a Composition component to define the video properties. As the scrolling text is longer, we define a higher durationInFrames number.<br /> Add the following to src/starWarsIndex.js:</p> <p>import {registerRoot, Composition, Sequence} from ‘remotion’;<br /> import {useEffect, useState} from ‘react’<br /> import { LoremIpsum } from ‘lorem-ipsum’;</p> <p>import Stars from ‘./StarWars/starsBackground’;<br /> import StarWars from ‘./StarWars/starWars’;</p> <p>const StarWarsVideo = () => {<br /> const [textBlocks, setTextBlocks] = useState([]);</p> <p> useEffect(() => {<br /> setTextBlocks([<br /> lorem.generateSentences(5),<br /> lorem.generateSentences(5),<br /> lorem.generateSentences(5),<br /> ])<br /> }, [])<br /> return (<br /> <><br /> <Composition id='star-wars' component={Video} durationInFrames={580} fps={30} width={1920} height={1080} defaultProps={{ textBlocks }} /><br /> </><br /> );<br /> };</p> <p>registerRoot(StarWarsVideo);</p> <p>We also need to define some React state. In this Star Wars example, we’re going to make use of React state and props to generate random text each time we reload the video. Using the lorem-ipsum npm module we can make the text responsive and different every time it’s generated.<br /> Let’s install the module:</p> <p>Then, in the same file add:</p> <p>const lorem = new LoremIpsum({<br /> sentencesPerParagraph: {<br /> max: 8,<br /> min: 4<br /> },<br /> wordsPerSentence: {<br /> max: 16,<br /> min: 4<br /> }<br /> });</p> <p>const Video = ({ textBlocks }) => {<br /> return (</p> <div> <Sequence from={0} durationInFrames={Infinity}><br /> <Stars/><br /> </Sequence><br /> <Sequence from={0} durationInFrames={Infinity}><br /> <StarWars textBlocks={textBlocks} /><br /> </Sequence> </div> <p> )<br /> }</p> <p>const StarWarsVideo = () => { … };</p> <p>registerRoot(StarWarsVideo);</p> <p>For the Sequence components, we can layer up two main components for the video. The Stars component will render the starry background, and the StarWars component will render the scrolling yellow text. The star background is using standard CSS animation and transforms to display stars. The StarWars component is where we start getting back into Remotion-based animations. We can use the Spring helper function to control the top position, rotate, and translate CSS transform properties to animate the scrolling of the text based on the current time in the video.<br /> Add the following to src/starWars.js:</p> <p>import React from ‘react’;<br /> import ‘./starWars.css’;<br /> import {spring, useCurrentFrame} from ‘remotion’;</p> <p>const StarWars = ({ textBlocks }) => {<br /> const frame = useCurrentFrame()<br /> const fps = 6000;</p> <p> const top = spring({<br /> frame,<br /> from: 0,<br /> to: -6000,<br /> fps,<br /> })</p> <p> const rotate = spring({<br /> frame,<br /> from: 20,<br /> to: 25,<br /> fps,<br /> })</p> <p> const translateZ = spring({<br /> frame,<br /> from: 0,<br /> to: -2500,<br /> fps,<br /> })</p> <p> return (<br /> <></p> <div className="fade"/> <section className="star-wars"> <div className="crawl" style={{ top: `${top}px`, transform: `rotateX(${rotate}deg) translateZ(${translateZ}px)` }} ></p> <div className="title"> <p>Episode IV</p> <h1>A New Hope</h1> </p></div> <p> {<br /> textBlocks.map((block, index) => {<br /> return (</p> <p key={index}>{block}</p> <p> )<br /> })<br /> } </p></div> </section> <p> </><br /> )<br /> }</p> <p>export default StarWars;</p> <p>Note that we’re rendering out the textBlocks prop, which will be our random text each time we generate the video.<br /> All that remains now is to create the Stars component. Add the following to src/starsBackground.js:</p> <p>import React from ‘react’;<br /> import ‘./starsBackground.css’;</p> <p>const Stars = () => {<br /> return (<br /> <></p> <div id='stars'/> <div id='stars2'/> <div id='stars3'/> </><br /> );<br /> }</p> <p>export default Stars;</p> <p>Also add the following styles to src/starsWars.css:</p> <p>.fade {<br /> position: relative;<br /> width: 100%;<br /> min-height: 60vh;<br /> top: -25px;<br /> z-index: 1;<br /> }</p> <p>.star-wars {<br /> display: flex;<br /> justify-content: center;<br /> position: relative;<br /> height: 800px;<br /> color: #feda4a;<br /> font-family: ‘Pathway Gothic One’, sans-serif;<br /> font-size: 500%;<br /> font-weight: 600;<br /> letter-spacing: 6px;<br /> line-height: 150%;<br /> perspective: 400px;<br /> text-align: justify;<br /> }</p> <p>.crawl {<br /> position: relative;<br /> top: 9999px;<br /> transform-origin: 50% 100%;<br /> }</p> <p>.crawl > .title {<br /> font-size: 90%;<br /> text-align: center;<br /> }</p> <p>.crawl > .title h1 {<br /> margin: 0 0 100px;<br /> text-transform: uppercase;<br /> }</p> <p>The src/starsBackground.css is too large to list here. Please grab its contents from the GitHub repo and add it to your own project.<br /> This will result in a fully functional Stars Wars intro video, created using only code, and no video editing software.<br /> The last step to get the StarWars example running is to add the following script to the package.json file:</p> <p>“start:starwars”: “remotion preview src/starWarsIndex.js”,</p> <p>And there we have it — a StarWars intro, fully coded in React.<br /> If you want to insert the actual StarWars text, grab it from here and alter the useEffect method call in src/starWarsIndex.js:</p> <p>useEffect(() => {<br /> setTextBlocks([<br /> – lorem.generateSentences(5),<br /> – lorem.generateSentences(5),<br /> – lorem.generateSentences(5),<br /> + “It is a period of civil war. Rebel spaceships…”,<br /> + “Pursued by the Empire’s sinister agents…”<br /> ])<br /> }, [])</p> <p>Awesome!<br /> Conclusion<br /> We’ve made two examples showcasing the power of Remotion, each of varying complexity. However, this is just scratching the surface of how capable Remotion is. Below are some of the other features that Remotion provides that we didn’t cover.<br /> Don’t forget, all of the code is available on GitHub.<br /> Data Fetching<br /> To add a reactive element to your videos, you can fetch data to help populate the content at build time. Remotion provides hooks to handle the fetching of data, such as continueRender. delayRender can also be used in circumstances to pause the rendering of the video content until the data has been fetched. These features could be used to generate videos based on data imputed into a database. Or they can pull data from the server — for example, creating an intro video for a blog post and pulling the blog’s title and hero image from a server.<br /> Parameterized Rendering<br /> From the examples we used earlier, we could control the flow of props getting passed into video elements. This allows the videos to be responsive. However, this requires code changes each time. With parameterized rendering, you can pass the data in as part of the build command. This means that you could, as part of a CI/CD flow, generate videos depending on passed-in data — for example, auto-generating onboarding videos with the person’s name and title passed in as props.<br /> Asset Imports<br /> You don’t need to create elements only using CSS. You can also import other assets such as images, existing videos, and audio files into your project.<br /> There are many more additional features, and new features are being released regularly in Remotion. Remotion is a fully developed project and is making big steps in the JavaScript-based video space. This is a very powerful tool with a realm of possibilities yet to uncover.<br /> If you’ve used Remotion to build something cool, let me know on Twitter.</p> <p><a href="https://www.sitepoint.com/remotion-create-animated-videos-using-html-css-react/?utm_source=rss" target="_blank" rel="noopener">Coded at </a></p> </div> <div class="ct-share-box" data-location="bottom" data-type="type-1" > <span class="ct-module-title" >Share your love</span> <div data-icons-type="simple"> <a href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fcodinghindi.in%2Flearn-remotion-create-animated-video-with-html-css-react%2F" rel="noopener noreferrer nofollow" data-network="facebook" aria-label="Facebook" > <span class="ct-icon-container" > <svg class="ct-icon" width="20px" height="20px" viewBox="0 0 20 20" aria-label="Facebook Icon"> <path d="M20,10.1c0-5.5-4.5-10-10-10S0,4.5,0,10.1c0,5,3.7,9.1,8.4,9.9v-7H5.9v-2.9h2.5V7.9C8.4,5.4,9.9,4,12.2,4c1.1,0,2.2,0.2,2.2,0.2v2.5h-1.3c-1.2,0-1.6,0.8-1.6,1.6v1.9h2.8L13.9,13h-2.3v7C16.3,19.2,20,15.1,20,10.1z"/> </svg> </span> </a> <a href="https://twitter.com/share?url=https%3A%2F%2Fcodinghindi.in%2Flearn-remotion-create-animated-video-with-html-css-react%2F&text=Learn%20Remotion%3A%20Create%20Animated%20Video%20with%20HTML%2C%20CSS%20%26%23038%3B%20React" rel="noopener noreferrer nofollow" data-network="twitter" aria-label="Twitter" > <span class="ct-icon-container" > <svg class="ct-icon" width="20px" height="20px" viewBox="0 0 20 20" aria-label="Twitter Icon"> <path d="M20,3.8c-0.7,0.3-1.5,0.5-2.4,0.6c0.8-0.5,1.5-1.3,1.8-2.3c-0.8,0.5-1.7,0.8-2.6,1c-0.7-0.8-1.8-1.3-3-1.3c-2.3,0-4.1,1.8-4.1,4.1c0,0.3,0,0.6,0.1,0.9C6.4,6.7,3.4,5.1,1.4,2.6C1,3.2,0.8,3.9,0.8,4.7c0,1.4,0.7,2.7,1.8,3.4C2,8.1,1.4,7.9,0.8,7.6c0,0,0,0,0,0.1c0,2,1.4,3.6,3.3,4c-0.3,0.1-0.7,0.1-1.1,0.1c-0.3,0-0.5,0-0.8-0.1c0.5,1.6,2,2.8,3.8,2.8c-1.4,1.1-3.2,1.8-5.1,1.8c-0.3,0-0.7,0-1-0.1c1.8,1.2,4,1.8,6.3,1.8c7.5,0,11.7-6.3,11.7-11.7c0-0.2,0-0.4,0-0.5C18.8,5.3,19.4,4.6,20,3.8z"/> </svg> </span> </a> <a href="#" rel="noopener noreferrer nofollow" data-network="pinterest" aria-label="Pinterest" > <span class="ct-icon-container" > <svg class="ct-icon" width="20px" height="20px" viewBox="0 0 20 20" aria-label="Pinterest Icon"> <path d="M10,0C4.5,0,0,4.5,0,10c0,4.1,2.5,7.6,6,9.2c0-0.7,0-1.5,0.2-2.3c0.2-0.8,1.3-5.4,1.3-5.4s-0.3-0.6-0.3-1.6c0-1.5,0.9-2.6,1.9-2.6c0.9,0,1.3,0.7,1.3,1.5c0,0.9-0.6,2.3-0.9,3.5c-0.3,1.1,0.5,1.9,1.6,1.9c1.9,0,3.2-2.4,3.2-5.3c0-2.2-1.5-3.8-4.2-3.8c-3,0-4.9,2.3-4.9,4.8c0,0.9,0.3,1.5,0.7,2C6,12,6.1,12.1,6,12.4c0,0.2-0.2,0.6-0.2,0.8c-0.1,0.3-0.3,0.3-0.5,0.3c-1.4-0.6-2-2.1-2-3.8c0-2.8,2.4-6.2,7.1-6.2c3.8,0,6.3,2.8,6.3,5.7c0,3.9-2.2,6.9-5.4,6.9c-1.1,0-2.1-0.6-2.4-1.2c0,0-0.6,2.3-0.7,2.7c-0.2,0.8-0.6,1.5-1,2.1C8.1,19.9,9,20,10,20c5.5,0,10-4.5,10-10C20,4.5,15.5,0,10,0z"/> </svg> </span> </a> <a href="https://www.linkedin.com/shareArticle?url=https%3A%2F%2Fcodinghindi.in%2Flearn-remotion-create-animated-video-with-html-css-react%2F&title=Learn%20Remotion%3A%20Create%20Animated%20Video%20with%20HTML%2C%20CSS%20%26%23038%3B%20React" rel="noopener noreferrer nofollow" data-network="linkedin" aria-label="LinkedIn" > <span class="ct-icon-container" > <svg class="ct-icon" width="20px" height="20px" viewBox="0 0 20 20" aria-label="LinkedIn Icon"> <path d="M18.6,0H1.4C0.6,0,0,0.6,0,1.4v17.1C0,19.4,0.6,20,1.4,20h17.1c0.8,0,1.4-0.6,1.4-1.4V1.4C20,0.6,19.4,0,18.6,0z M6,17.1h-3V7.6h3L6,17.1L6,17.1zM4.6,6.3c-1,0-1.7-0.8-1.7-1.7s0.8-1.7,1.7-1.7c0.9,0,1.7,0.8,1.7,1.7C6.3,5.5,5.5,6.3,4.6,6.3z M17.2,17.1h-3v-4.6c0-1.1,0-2.5-1.5-2.5c-1.5,0-1.8,1.2-1.8,2.5v4.7h-3V7.6h2.8v1.3h0c0.4-0.8,1.4-1.5,2.8-1.5c3,0,3.6,2,3.6,4.5V17.1z"/> </svg> </span> </a> <a href="https://t.me/share/url?url=https%3A%2F%2Fcodinghindi.in%2Flearn-remotion-create-animated-video-with-html-css-react%2F&text=Learn%20Remotion%3A%20Create%20Animated%20Video%20with%20HTML%2C%20CSS%20%26%23038%3B%20React" rel="noopener noreferrer nofollow" data-network="telegram" aria-label="Telegram" > <span class="ct-icon-container" > <svg class="ct-icon" width="20px" height="20px" viewBox="0 0 20 20" aria-label="Telegram Icon"> <path d="M19.9,3.1l-3,14.2c-0.2,1-0.8,1.3-1.7,0.8l-4.6-3.4l-2.2,2.1c-0.2,0.2-0.5,0.5-0.9,0.5l0.3-4.7L16.4,5c0.4-0.3-0.1-0.5-0.6-0.2L5.3,11.4L0.7,10c-1-0.3-1-1,0.2-1.5l17.7-6.8C19.5,1.4,20.2,1.9,19.9,3.1z"/> </svg> </span> </a> <a href="whatsapp://send?text=https%3A%2F%2Fcodinghindi.in%2Flearn-remotion-create-animated-video-with-html-css-react%2F" rel="noopener noreferrer nofollow" data-network="whatsapp" aria-label="WhatsApp" > <span class="ct-icon-container" > <svg class="ct-icon" width="20px" height="20px" viewBox="0 0 20 20" aria-label="WhatsApp Icon"> <path d="M10,0C4.5,0,0,4.5,0,10c0,1.9,0.5,3.6,1.4,5.1L0.1,20l5-1.3C6.5,19.5,8.2,20,10,20c5.5,0,10-4.5,10-10S15.5,0,10,0zM6.6,5.3c0.2,0,0.3,0,0.5,0c0.2,0,0.4,0,0.6,0.4c0.2,0.5,0.7,1.7,0.8,1.8c0.1,0.1,0.1,0.3,0,0.4C8.3,8.2,8.3,8.3,8.1,8.5C8,8.6,7.9,8.8,7.8,8.9C7.7,9,7.5,9.1,7.7,9.4c0.1,0.2,0.6,1.1,1.4,1.7c0.9,0.8,1.7,1.1,2,1.2c0.2,0.1,0.4,0.1,0.5-0.1c0.1-0.2,0.6-0.7,0.8-1c0.2-0.2,0.3-0.2,0.6-0.1c0.2,0.1,1.4,0.7,1.7,0.8s0.4,0.2,0.5,0.3c0.1,0.1,0.1,0.6-0.1,1.2c-0.2,0.6-1.2,1.1-1.7,1.2c-0.5,0-0.9,0.2-3-0.6c-2.5-1-4.1-3.6-4.2-3.7c-0.1-0.2-1-1.3-1-2.6c0-1.2,0.6-1.8,0.9-2.1C6.1,5.4,6.4,5.3,6.6,5.3z"/> </svg> </span> </a> </div> </div> <nav class="post-navigation "> <a href="https://codinghindi.in/how-project-management-software-helps-to-increase-productivity-in-healthcare/" class="nav-item-prev"> <figure class="ct-image-container ct-lazy"><img width="300" height="300" class="attachment-medium size-medium" alt="" loading="lazy" data-ct-lazy="https://anadea.info/uploads/image_attachment/image/2523/Hospital-management-software_benefits.jpg" data-object-fit="~" itemprop="image" /><noscript><img fifu-featured="1" width="300" height="300" src="https://anadea.info/uploads/image_attachment/image/2523/Hospital-management-software_benefits.jpg" class="attachment-medium size-medium" alt="" title="" loading="lazy" /></noscript><svg width="20px" height="15px" viewBox="0 0 20 15"><polygon points="0,7.5 5.5,13 6.4,12.1 2.4,8.1 20,8.1 20,6.9 2.4,6.9 6.4,2.9 5.5,2 "/></svg><span data-loader="circles"><span></span><span></span><span></span></span><span class="ct-ratio" style="padding-bottom: 100%"></span></figure> <div class="item-content"> <span class="item-label"> Previous <span>Post</span> </span> <span class="item-title"> How Project Management Software Helps to Increase Productivity in Healthcare? </span> </div> </a> <a href="https://codinghindi.in/reviews-of-digital-photo-development-with-darktable-for-learning-darktable-hackr-io/" class="nav-item-next"> <div class="item-content"> <span class="item-label"> Next <span>Post</span> </span> <span class="item-title"> Reviews of Digital Photo Development with Darktable for learning Darktable | Hackr.io </span> </div> <figure class="ct-image-container ct-lazy"><img width="300" height="300" class="attachment-medium size-medium" alt="" loading="lazy" data-ct-lazy="https://hackr.io/tutorials/learn-darktable/og_image" data-object-fit="~" itemprop="image" /><noscript><img fifu-featured="1" width="300" height="300" src="https://hackr.io/tutorials/learn-darktable/og_image" class="attachment-medium size-medium" alt="" title="" loading="lazy" /></noscript><svg width="20px" height="15px" viewBox="0 0 20 15"><polygon points="14.5,2 13.6,2.9 17.6,6.9 0,6.9 0,8.1 17.6,8.1 13.6,12.1 14.5,13 20,7.5 "/></svg><span data-loader="circles"><span></span><span></span><span></span></span><span class="ct-ratio" style="padding-bottom: 100%"></span></figure> </a> </nav> </article> </div> <div class="ct-comments-container"> <div class="ct-container-narrow"> <div class="ct-comments" id="comments"> <h3 class="ct-comments-title"> 4 Comments </h3> <ol class="ct-comment-list"> <li id="comment-938" class="comment even thread-even depth-1 ct-has-avatar"> <div class="ct-comment-inner" id="ct-comment-inner-938"> <div class="ct-comment-info"> <figure class="ct-image-container ct-lazy"><img data-ct-lazy="https://secure.gravatar.com/avatar/8ea72430f15dded6925205a356fc19f1?s=100&d=mm&r=g" data-object-fit="~" width="100" height="100" alt="Angel Vanbrocklin" ><noscript><img src="https://secure.gravatar.com/avatar/8ea72430f15dded6925205a356fc19f1?s=100&d=mm&r=g" data-object-fit="~" width="100" height="100" alt="Angel Vanbrocklin" ></noscript><span data-loader="circles"><span></span><span></span><span></span></span><span class="ct-ratio" style="padding-bottom: 100%"></span></figure> <section> <div class="ct-comment-author"> Angel Vanbrocklin </div> <div class="ct-comment-meta"> <a href="https://codinghindi.in/learn-remotion-create-animated-video-with-html-css-react/#comment-938"> Sep 16, 2021 / 10:26 am </a> <a rel='nofollow' class='comment-reply-link' href='#comment-938' data-commentid="938" data-postid="501" data-belowelement="ct-comment-inner-938" data-respondelement="respond" data-replyto="Reply to Angel Vanbrocklin" aria-label='Reply to Angel Vanbrocklin'>Reply</a> </div> </section> </div> <div class="ct-comment-content entry-content"> <p>if you have a local east meets west in your mall they sell smudge sticks there too</p> </div> </div> </li> <li id="comment-983" class="comment odd alt thread-odd thread-alt depth-1 ct-has-avatar"> <div class="ct-comment-inner" id="ct-comment-inner-983"> <div class="ct-comment-info"> <figure class="ct-image-container ct-lazy"><img data-ct-lazy="https://secure.gravatar.com/avatar/d541cfe6ce462166a75f8e9f03682350?s=100&d=mm&r=g" data-object-fit="~" width="100" height="100" alt="slot gacor" ><noscript><img src="https://secure.gravatar.com/avatar/d541cfe6ce462166a75f8e9f03682350?s=100&d=mm&r=g" data-object-fit="~" width="100" height="100" alt="slot gacor" ></noscript><span data-loader="circles"><span></span><span></span><span></span></span><span class="ct-ratio" style="padding-bottom: 100%"></span></figure> <section> <div class="ct-comment-author"> slot gacor </div> <div class="ct-comment-meta"> <a href="https://codinghindi.in/learn-remotion-create-animated-video-with-html-css-react/#comment-983"> Sep 21, 2021 / 6:04 am </a> <a rel='nofollow' class='comment-reply-link' href='#comment-983' data-commentid="983" data-postid="501" data-belowelement="ct-comment-inner-983" data-respondelement="respond" data-replyto="Reply to slot gacor" aria-label='Reply to slot gacor'>Reply</a> </div> </section> </div> <div class="ct-comment-content entry-content"> <p>It’s going to be ending of mine day, but before finish I am reading this impressive paragraph to increase my know-how.</p> </div> </div> </li> <li id="comment-1006" class="comment even thread-even depth-1 ct-has-avatar"> <div class="ct-comment-inner" id="ct-comment-inner-1006"> <div class="ct-comment-info"> <figure class="ct-image-container ct-lazy"><img data-ct-lazy="https://secure.gravatar.com/avatar/ded66ceef3ed6090a105ea7e134984c1?s=100&d=mm&r=g" data-object-fit="~" width="100" height="100" alt="montres suisses lausanne" ><noscript><img src="https://secure.gravatar.com/avatar/ded66ceef3ed6090a105ea7e134984c1?s=100&d=mm&r=g" data-object-fit="~" width="100" height="100" alt="montres suisses lausanne" ></noscript><span data-loader="circles"><span></span><span></span><span></span></span><span class="ct-ratio" style="padding-bottom: 100%"></span></figure> <section> <div class="ct-comment-author"> montres suisses lausanne </div> <div class="ct-comment-meta"> <a href="https://codinghindi.in/learn-remotion-create-animated-video-with-html-css-react/#comment-1006"> Sep 23, 2021 / 7:42 pm </a> <a rel='nofollow' class='comment-reply-link' href='#comment-1006' data-commentid="1006" data-postid="501" data-belowelement="ct-comment-inner-1006" data-respondelement="respond" data-replyto="Reply to montres suisses lausanne" aria-label='Reply to montres suisses lausanne'>Reply</a> </div> </section> </div> <div class="ct-comment-content entry-content"> <p>I have been surfing online more than 3 hours today, yet I never found any interesting article like yours.<br /> It’s pretty worth enough for me. In my opinion, if all webmasters and bloggers made good content as you did, the internet will be a lot more useful than ever before.</p> </div> </div> </li> <li id="comment-1101" class="comment odd alt thread-odd thread-alt depth-1 ct-has-avatar"> <div class="ct-comment-inner" id="ct-comment-inner-1101"> <div class="ct-comment-info"> <figure class="ct-image-container ct-lazy"><img data-ct-lazy="https://secure.gravatar.com/avatar/c01a4d1c373c224b7280f37015cc25fa?s=100&d=mm&r=g" data-object-fit="~" width="100" height="100" alt="pro zeny" ><noscript><img src="https://secure.gravatar.com/avatar/c01a4d1c373c224b7280f37015cc25fa?s=100&d=mm&r=g" data-object-fit="~" width="100" height="100" alt="pro zeny" ></noscript><span data-loader="circles"><span></span><span></span><span></span></span><span class="ct-ratio" style="padding-bottom: 100%"></span></figure> <section> <div class="ct-comment-author"> pro zeny </div> <div class="ct-comment-meta"> <a href="https://codinghindi.in/learn-remotion-create-animated-video-with-html-css-react/#comment-1101"> Sep 30, 2021 / 6:34 pm </a> <a rel='nofollow' class='comment-reply-link' href='#comment-1101' data-commentid="1101" data-postid="501" data-belowelement="ct-comment-inner-1101" data-respondelement="respond" data-replyto="Reply to pro zeny" aria-label='Reply to pro zeny'>Reply</a> </div> </section> </div> <div class="ct-comment-content entry-content"> <p>Hey There. I discovered your blog using msn. That<br /> is a very neatly written article. I’ll make sure<br /> to bookmark it and return to read more of your useful info.<br /> Thanks for the post. I will definitely comeback.</p> </div> </div> </li> </ol> <div id="respond" class="comment-respond"> <h2 id="reply-title" class="comment-reply-title">Leave a Reply<span class="ct-cancel-reply"><a rel="nofollow" id="cancel-comment-reply-link" href="/learn-remotion-create-animated-video-with-html-css-react/#respond" style="display:none;">Cancel Reply</a></span></h2><form action="https://codinghindi.in/wp-comments-post.php" method="post" id="commentform" class="comment-form has-website-field"><p class="comment-form-input-author"> <label for="author">Name <b class="required"> *</b></label> <input id="author" name="author" type="text" value="" size="30" aria-required='true' /> </p> <p class="comment-form-input-email"> <label for="email">Email <b class="required"> *</b></label> <input id="email" name="email" type="text" value="" size="30" aria-required='true' /> </p> <p class="comment-form-input-url"> <label for="url">Website</label> <input id="url" name="url" type="text" value="" size="30" /> </p> <p class="comment-form-textarea"> <label for="comment">Add Comment</label> <textarea id="comment" name="comment" cols="45" rows="8" aria-required="true"></textarea> </p><p class="comment-form-cookies-consent"><input id="wp-comment-cookies-consent" name="wp-comment-cookies-consent" type="checkbox" value="yes" /><label for="wp-comment-cookies-consent">Save my name, email, and website in this browser for the next time I comment.</label></p><p class="form-submit"><button type="submit" name="submit" id="submit" class="submit" value="Post Comment">Post Comment</button> <input type='hidden' name='comment_post_ID' value='501' id='comment_post_ID' /> <input type='hidden' name='comment_parent' id='comment_parent' value='0' /> </p></form> </div><!-- #respond --> </div> </div> </div> <div class="ct-related-posts-container"> <div class="ct-container"> <div class="ct-related-posts" data-layout="grid:columns-3"> <h3 class="ct-block-title"> Related Posts </h3> <article itemscope="itemscope" itemtype="https://schema.org/CreativeWork" > <a class="ct-image-container ct-lazy" href="https://codinghindi.in/sitepoint-nfts-or-how-we-floated-rhinos-on-the-opensea-sitepoint/" aria-label="SitePoint NFTs – or how we floated rhinos on the OpenSea – SitePoint" tabindex="-1"><img width="300" height="300" class="attachment-medium size-medium" alt="" loading="lazy" data-ct-lazy="https://uploads.sitepoint.com/wp-content/uploads/2021/10/1634858073291_-_The_Rackley_Rhino.jpg" data-object-fit="~" itemprop="image" /><noscript><img fifu-featured="1" width="300" height="300" src="https://uploads.sitepoint.com/wp-content/uploads/2021/10/1634858073291_-_The_Rackley_Rhino.jpg" class="attachment-medium size-medium" alt="" title="" loading="lazy" /></noscript><span data-loader="circles"><span></span><span></span><span></span></span><span class="ct-ratio" style="padding-bottom: 56.3%"></span></a> <h3 class="related-entry-title" itemprop="name" > <a href="https://codinghindi.in/sitepoint-nfts-or-how-we-floated-rhinos-on-the-opensea-sitepoint/" itemprop="url" >SitePoint NFTs – or how we floated rhinos on the OpenSea – SitePoint</a> </h3> <ul class="entry-meta" data-type="simple:slash" ><li class="meta-date" itemprop="datePublished" ><time class="ct-meta-element-date" datetime="2021-10-22T03:11:21+00:00" >October 22, 2021</time></li></ul> </article> <article itemscope="itemscope" itemtype="https://schema.org/CreativeWork" > <a class="ct-image-container ct-lazy" href="https://codinghindi.in/is-magento-2-migration-worth-it-the-process-explained-sitepoint/" aria-label="Is Magento 2 Migration Worth It? The Process Explained – SitePoint" tabindex="-1"><img width="300" height="300" class="attachment-medium size-medium" alt="" loading="lazy" data-ct-lazy="https://uploads.sitepoint.com/wp-content/uploads/2021/10/1634620880magento-2-migration.jpg" data-object-fit="~" itemprop="image" /><noscript><img fifu-featured="1" width="300" height="300" src="https://uploads.sitepoint.com/wp-content/uploads/2021/10/1634620880magento-2-migration.jpg" class="attachment-medium size-medium" alt="" title="" loading="lazy" /></noscript><span data-loader="circles"><span></span><span></span><span></span></span><span class="ct-ratio" style="padding-bottom: 56.3%"></span></a> <h3 class="related-entry-title" itemprop="name" > <a href="https://codinghindi.in/is-magento-2-migration-worth-it-the-process-explained-sitepoint/" itemprop="url" >Is Magento 2 Migration Worth It? The Process Explained – SitePoint</a> </h3> <ul class="entry-meta" data-type="simple:slash" ><li class="meta-date" itemprop="datePublished" ><time class="ct-meta-element-date" datetime="2021-10-21T11:59:20+00:00" >October 21, 2021</time></li></ul> </article> <article itemscope="itemscope" itemtype="https://schema.org/CreativeWork" > <a class="ct-image-container ct-lazy" href="https://codinghindi.in/back-to-basics-for-in-loops-in-javascript-sitepoint/" aria-label="Back to Basics: for…in Loops in JavaScript – SitePoint" tabindex="-1"><img width="300" height="300" class="attachment-medium size-medium" alt="" loading="lazy" data-ct-lazy="https://uploads.sitepoint.com/wp-content/uploads/2021/10/1634532628for-in-loops.jpg" data-object-fit="~" itemprop="image" /><noscript><img fifu-featured="1" width="300" height="300" src="https://uploads.sitepoint.com/wp-content/uploads/2021/10/1634532628for-in-loops.jpg" class="attachment-medium size-medium" alt="" title="" loading="lazy" /></noscript><span data-loader="circles"><span></span><span></span><span></span></span><span class="ct-ratio" style="padding-bottom: 56.3%"></span></a> <h3 class="related-entry-title" itemprop="name" > <a href="https://codinghindi.in/back-to-basics-for-in-loops-in-javascript-sitepoint/" itemprop="url" >Back to Basics: for…in Loops in JavaScript – SitePoint</a> </h3> <ul class="entry-meta" data-type="simple:slash" ><li class="meta-date" itemprop="datePublished" ><time class="ct-meta-element-date" datetime="2021-10-20T12:17:15+00:00" >October 20, 2021</time></li></ul> </article> </div> </div> </div> </main> <footer class="ct-footer" data-id="type-1" itemscope="" itemtype="https://schema.org/WPFooter" ><div data-row="middle" ><div class="ct-container" ><div data-column="menu" > <nav id="footer-menu" class="footer-menu " data-id="menu" data-menu-direction="horizontal" data-stretch itemscope="" itemtype="http://schema.org/SiteNavigationElement" > <ul id="menu-footer-menu" class="menu"><li id="menu-item-1039" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-home menu-item-1039"><a href="https://codinghindi.in">Home</a></li> <li id="menu-item-1040" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1040"><a href="https://codinghindi.in/frontend-submission/">Create</a></li> <li id="menu-item-1037" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-privacy-policy menu-item-1037"><a href="https://codinghindi.in/privacy-policy/">Privacy Policy</a></li> <li id="menu-item-1139" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-1139"><a href="https://www.dmca.com/Protection/Status.aspx?ID=02c68149-326f-4214-8ef7-c5f6585e2cef">DMCA Protected</a></li> </ul></nav> </div><div data-column="ghost"></div><div data-column="socials" > <div class="ct-footer-socials" data-id="socials" > <div class="ct-social-box" data-icon-size="custom" data-color="custom" data-icons-type="rounded:solid" > <a href="https://codepen.io/codinghindi" rel="noopener noreferrer nofollow" data-network="codepen" aria-label="CodePen" target="_blank" > <span class="ct-icon-container" > <svg class="ct-icon" width="20" height="20" viewBox="0 0 20 20" aria-label="CodePen Icon"> <path d="M10,0L0,6.4v7.3L10,20l10-6.4V6.4L10,0z M10,12l-2.8-2L10,8.1l2.8,1.9L10,12z M11,6.5V2.8l6.4,4.1l-2.9,2L11,6.5z M9,6.5L5.5,8.9l-2.9-2L9,2.8V6.5z M3.9,10l-1.9,1.3V8.7L3.9,10z M5.5,11.2L9,13.6v3.5l-6.4-4.1L5.5,11.2z M11,13.6l3.5-2.5l2.8,1.9L11,17.2V13.6z M16.1,10l1.9-1.4v2.7L16.1,10z"/> </svg> </span><span class="ct-label" hidden="" >CodePen</span> </a> <a href="https://www.instagram.com/piotechindia/" rel="noopener noreferrer nofollow" data-network="instagram" aria-label="Instagram" target="_blank" > <span class="ct-icon-container" > <svg class="ct-icon" width="20" height="20" viewBox="0 0 20 20" aria-label="Instagram Icon"> <circle cx="10" cy="10" r="3.3"/> <path d="M14.2,0H5.8C2.6,0,0,2.6,0,5.8v8.3C0,17.4,2.6,20,5.8,20h8.3c3.2,0,5.8-2.6,5.8-5.8V5.8C20,2.6,17.4,0,14.2,0zM10,15c-2.8,0-5-2.2-5-5s2.2-5,5-5s5,2.2,5,5S12.8,15,10,15z M15.8,5C15.4,5,15,4.6,15,4.2s0.4-0.8,0.8-0.8s0.8,0.4,0.8,0.8S16.3,5,15.8,5z"/> </svg> </span><span class="ct-label" hidden="" >Instagram</span> </a> <a href="https://www.youtube.com/channel/UC5bkSPKJNRroCEQ7UEeFP3g?sub_confirmation=1" rel="noopener noreferrer nofollow" data-network="youtube" aria-label="YouTube" target="_blank" > <span class="ct-icon-container" > <svg class="ct-icon" width="20" height="20" viewbox="0 0 20 20" aria-label="YouTube Icon"> <path d="M15,0H5C2.2,0,0,2.2,0,5v10c0,2.8,2.2,5,5,5h10c2.8,0,5-2.2,5-5V5C20,2.2,17.8,0,15,0z M14.5,10.9l-6.8,3.8c-0.1,0.1-0.3,0.1-0.5,0.1c-0.5,0-1-0.4-1-1l0,0V6.2c0-0.5,0.4-1,1-1c0.2,0,0.3,0,0.5,0.1l6.8,3.8c0.5,0.3,0.7,0.8,0.4,1.3C14.8,10.6,14.6,10.8,14.5,10.9z"/> </svg> </span><span class="ct-label" hidden="" >YouTube</span> </a> <a href="https://www.facebook.com/CodingHindi" rel="noopener noreferrer nofollow" data-network="facebook" aria-label="Facebook" target="_blank" > <span class="ct-icon-container" > <svg class="ct-icon" width="20px" height="20px" viewBox="0 0 20 20" aria-label="Facebook Icon"> <path d="M20,10.1c0-5.5-4.5-10-10-10S0,4.5,0,10.1c0,5,3.7,9.1,8.4,9.9v-7H5.9v-2.9h2.5V7.9C8.4,5.4,9.9,4,12.2,4c1.1,0,2.2,0.2,2.2,0.2v2.5h-1.3c-1.2,0-1.6,0.8-1.6,1.6v1.9h2.8L13.9,13h-2.3v7C16.3,19.2,20,15.1,20,10.1z"/> </svg> </span><span class="ct-label" hidden="" >Facebook</span> </a> <a href="https://t.me/codinghindi" rel="noopener noreferrer nofollow" data-network="telegram" aria-label="Telegram" target="_blank" > <span class="ct-icon-container" > <svg class="ct-icon" width="20px" height="20px" viewBox="0 0 20 20" aria-label="Telegram Icon"> <path d="M19.9,3.1l-3,14.2c-0.2,1-0.8,1.3-1.7,0.8l-4.6-3.4l-2.2,2.1c-0.2,0.2-0.5,0.5-0.9,0.5l0.3-4.7L16.4,5c0.4-0.3-0.1-0.5-0.6-0.2L5.3,11.4L0.7,10c-1-0.3-1-1,0.2-1.5l17.7-6.8C19.5,1.4,20.2,1.9,19.9,3.1z"/> </svg> </span><span class="ct-label" hidden="" >Telegram</span> </a> </div> </div> </div></div></div><div data-row="bottom" ><div class="ct-container" data-columns-divider="md:sm" ><div data-column="copyright" > <div class="ct-footer-copyright" data-id="copyright" > <p>Copyright © 2021 <a href="https://codinghindi.in/">Coding Hindi</a> -  Product of  <a href="https://piotechindia.in/">Piotech INDIA</a></p></div> </div></div></div></footer></div> <div class="ct-drawer-canvas"> <div id="search-modal" class="ct-panel" data-behaviour="modal"> <div class="ct-panel-actions"> <span class="ct-close-button"> <svg class="ct-icon" width="12" height="12" viewBox="0 0 15 15"> <path d="M1 15a1 1 0 01-.71-.29 1 1 0 010-1.41l5.8-5.8-5.8-5.8A1 1 0 011.7.29l5.8 5.8 5.8-5.8a1 1 0 011.41 1.41l-5.8 5.8 5.8 5.8a1 1 0 01-1.41 1.41l-5.8-5.8-5.8 5.8A1 1 0 011 15z"/> </svg> </span> </div> <div class="ct-panel-content"> <form role="search" method="get" class="search-form" action="https://codinghindi.in" data-live-results="thumbs"> <input type="search" class="modal-field" placeholder="Try ... css animation" value="" name="s" autocomplete="off" title="Search Input" /> <button class="search-submit" aria-label="Search button"> <svg class="ct-icon" width="15" height="15" viewBox="0 0 15 15" aria-label="Search icon"> <path d="M14.8,13.7L12,11c0.9-1.2,1.5-2.6,1.5-4.2c0-3.7-3-6.8-6.8-6.8S0,3,0,6.8s3,6.8,6.8,6.8c1.6,0,3.1-0.6,4.2-1.5l2.8,2.8c0.1,0.1,0.3,0.2,0.5,0.2s0.4-0.1,0.5-0.2C15.1,14.5,15.1,14,14.8,13.7z M1.5,6.8c0-2.9,2.4-5.2,5.2-5.2S12,3.9,12,6.8S9.6,12,6.8,12S1.5,9.6,1.5,6.8z"/> </svg> <span data-loader="circles"><span></span><span></span><span></span></span> </button> <input type="hidden" name="post_type" value="post"> </form> </div> </div> <div id="offcanvas" class="ct-panel ct-header" data-behaviour="right-side" data-device="mobile" ><section> <div class="ct-panel-actions"> <span class="ct-close-button"> <svg class="ct-icon" width="12" height="12" viewBox="0 0 15 15"> <path d="M1 15a1 1 0 01-.71-.29 1 1 0 010-1.41l5.8-5.8-5.8-5.8A1 1 0 011.7.29l5.8 5.8 5.8-5.8a1 1 0 011.41 1.41l-5.8 5.8 5.8 5.8a1 1 0 01-1.41 1.41l-5.8-5.8-5.8 5.8A1 1 0 011 15z"/> </svg> </span> </div> <div class="ct-panel-content" data-device="desktop" ></div><div class="ct-panel-content" data-device="mobile" > <nav class="mobile-menu has-submenu" data-id="mobile-menu" data-type="type-1" > <ul id="menu-mainmenu-1" class=""><li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-home menu-item-99"><a href="https://codinghindi.in/">Home</a></li> <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-198"><a href="#">Categories<span class="child-indicator" aria-label="Menu dropdown indicator"><svg width="8" height="8" viewBox="0 0 15 15" aria-label="Menu dropdown icon"><path d="M2.1,3.2l5.4,5.4l5.4-5.4L15,4.3l-7.5,7.5L0,4.3L2.1,3.2z"/></svg></span></a> <ul class="sub-menu"> <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-has-children menu-item-189"><a href="https://codinghindi.in/category/button-animations/">HTML<span class="child-indicator" aria-label="Menu dropdown indicator"><svg width="8" height="8" viewBox="0 0 15 15" aria-label="Menu dropdown icon"><path d="M2.1,3.2l5.4,5.4l5.4-5.4L15,4.3l-7.5,7.5L0,4.3L2.1,3.2z"/></svg></span></a> <ul class="sub-menu"> <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-1213"><a href="https://codinghindi.in/category/social-icons/">Social Icons</a></li> <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-197"><a href="https://codinghindi.in/category/web-tools/">Toggle Buttons</a></li> </ul> </li> <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-has-children menu-item-190"><a href="https://codinghindi.in/category/checkbox-button/">CSS<span class="child-indicator" aria-label="Menu dropdown indicator"><svg width="8" height="8" viewBox="0 0 15 15" aria-label="Menu dropdown icon"><path d="M2.1,3.2l5.4,5.4l5.4-5.4L15,4.3l-7.5,7.5L0,4.3L2.1,3.2z"/></svg></span></a> <ul class="sub-menu"> <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-1212"><a href="https://codinghindi.in/category/loading-screen-animation/">Loading Animation</a></li> <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-192"><a href="https://codinghindi.in/category/html-loader/">Text Animations</a></li> <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-193"><a href="https://codinghindi.in/category/login-signup-form/">Button Animations</a></li> <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-194"><a href="https://codinghindi.in/category/social-icons/">Social Icon Animation</a></li> <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-196"><a href="https://codinghindi.in/category/toggle-button/">Toggle Animation</a></li> </ul> </li> <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-1214"><a href="https://codinghindi.in/category/javascript/">Javascript</a></li> </ul> </li> </ul></nav> </div></section></div></div><script src='https://codinghindi.in/wp-content/plugins/coblocks/dist/js/coblocks-animation.js?ver=2.16.0' id='coblocks-animation-js'></script> <script src='https://codinghindi.in/wp-content/plugins/qubely/assets/js/common-script.min.js?ver=1.7.2' id='qubely-block-common-js'></script> <script src='https://codinghindi.in/wp-content/plugins/qubely/assets/js/interaction.min.js?ver=1.7.2' id='qubely-interaction-js'></script> <script id='ct-scripts-js-extra'> var ct_localizations = {"ajax_url":"https:\/\/codinghindi.in\/wp-admin\/admin-ajax.php","nonce":"fe47328ea0","public_url":"https:\/\/codinghindi.in\/wp-content\/themes\/blocksy\/static\/bundle\/","rest_url":"https:\/\/codinghindi.in\/wp-json\/","search_url":"https:\/\/codinghindi.in\/search\/QUERY_STRING\/","show_more_text":"Show more","more_text":"More","dynamic_js_chunks":[{"id":"blocksy_account","selector":".ct-header-account[href*=\"account-modal\"], .must-log-in a","url":"https:\/\/codinghindi.in\/wp-content\/plugins\/blocksy-companion\/static\/bundle\/account.js","trigger":"click"},{"id":"blocksy_dark_mode","selector":"[data-id=\"dark-mode-switcher\"]","url":"https:\/\/codinghindi.in\/wp-content\/plugins\/blocksy-companion\/static\/bundle\/dark-mode.js","trigger":"click"},{"id":"blocksy_sticky_header","selector":"header [data-sticky]","url":"https:\/\/codinghindi.in\/wp-content\/plugins\/blocksy-companion\/static\/bundle\/sticky.js"}]}; </script> <script src='https://codinghindi.in/wp-content/themes/blocksy/static/bundle/main.js?ver=1.8.3.3' id='ct-scripts-js'></script> <script src='https://codinghindi.in/wp-includes/js/comment-reply.min.js?ver=5.8.1' id='comment-reply-js'></script> <script src='https://codinghindi.in/wp-includes/js/wp-embed.min.js?ver=5.8.1' id='wp-embed-js'></script> <script id='fifu-image-js-js-extra'> var fifuImageVars = {"fifu_lazy":"","fifu_woo_lbox_enabled":"1","fifu_woo_zoom":"inline","fifu_is_product":"","fifu_is_flatsome_active":"","fifu_rest_url":"https:\/\/codinghindi.in\/wp-json\/","fifu_nonce":"abdc95eeb4"}; </script> <script src='https://codinghindi.in/wp-content/plugins/featured-image-from-url/includes/html/js/image.js?ver=3.7.7' id='fifu-image-js-js'></script> <script src='https://cdn.onesignal.com/sdks/OneSignalSDK.js?ver=5.8.1' async='async' id='remote_sdk-js'></script> <script type="text/javascript">(function (undefined) {var _localizedStrings={"redirect_overlay_title":"Hold On","redirect_overlay_text":"You are being redirected to another page,<br>it may take a few seconds."};var _targetWindow="prefer-popup"; window.NSLPopup = function (url, title, w, h) { var userAgent = navigator.userAgent, mobile = function () { return /\b(iPhone|iP[ao]d)/.test(userAgent) || /\b(iP[ao]d)/.test(userAgent) || /Android/i.test(userAgent) || /Mobile/i.test(userAgent); }, screenX = window.screenX !== undefined ? window.screenX : window.screenLeft, screenY = window.screenY !== undefined ? window.screenY : window.screenTop, outerWidth = window.outerWidth !== undefined ? window.outerWidth : document.documentElement.clientWidth, outerHeight = window.outerHeight !== undefined ? window.outerHeight : document.documentElement.clientHeight - 22, targetWidth = mobile() ? null : w, targetHeight = mobile() ? null : h, V = screenX < 0 ? window.screen.width + screenX : screenX, left = parseInt(V + (outerWidth - targetWidth) / 2, 10), right = parseInt(screenY + (outerHeight - targetHeight) / 2.5, 10), features = []; if (targetWidth !== null) { features.push('width=' + targetWidth); } if (targetHeight !== null) { features.push('height=' + targetHeight); } features.push('left=' + left); features.push('top=' + right); features.push('scrollbars=1'); var newWindow = window.open(url, title, features.join(',')); if (window.focus) { newWindow.focus(); } return newWindow; }; var isWebView = null; function checkWebView() { if (isWebView === null) { function _detectOS(ua) { if (/Android/.test(ua)) { return "Android"; } else if (/iPhone|iPad|iPod/.test(ua)) { return "iOS"; } else if (/Windows/.test(ua)) { return "Windows"; } else if (/Mac OS X/.test(ua)) { return "Mac"; } else if (/CrOS/.test(ua)) { return "Chrome OS"; } else if (/Firefox/.test(ua)) { return "Firefox OS"; } return ""; } function _detectBrowser(ua) { var android = /Android/.test(ua); if (/Opera Mini/.test(ua) || / OPR/.test(ua) || / OPT/.test(ua)) { return "Opera"; } else if (/CriOS/.test(ua)) { return "Chrome for iOS"; } else if (/Edge/.test(ua)) { return "Edge"; } else if (android && /Silk\//.test(ua)) { return "Silk"; } else if (/Chrome/.test(ua)) { return "Chrome"; } else if (/Firefox/.test(ua)) { return "Firefox"; } else if (android) { return "AOSP"; } else if (/MSIE|Trident/.test(ua)) { return "IE"; } else if (/Safari\//.test(ua)) { return "Safari"; } else if (/AppleWebKit/.test(ua)) { return "WebKit"; } return ""; } function _detectBrowserVersion(ua, browser) { if (browser === "Opera") { return /Opera Mini/.test(ua) ? _getVersion(ua, "Opera Mini/") : / OPR/.test(ua) ? _getVersion(ua, " OPR/") : _getVersion(ua, " OPT/"); } else if (browser === "Chrome for iOS") { return _getVersion(ua, "CriOS/"); } else if (browser === "Edge") { return _getVersion(ua, "Edge/"); } else if (browser === "Chrome") { return _getVersion(ua, "Chrome/"); } else if (browser === "Firefox") { return _getVersion(ua, "Firefox/"); } else if (browser === "Silk") { return _getVersion(ua, "Silk/"); } else if (browser === "AOSP") { return _getVersion(ua, "Version/"); } else if (browser === "IE") { return /IEMobile/.test(ua) ? _getVersion(ua, "IEMobile/") : /MSIE/.test(ua) ? _getVersion(ua, "MSIE ") : _getVersion(ua, "rv:"); } else if (browser === "Safari") { return _getVersion(ua, "Version/"); } else if (browser === "WebKit") { return _getVersion(ua, "WebKit/"); } return "0.0.0"; } function _getVersion(ua, token) { try { return _normalizeSemverString(ua.split(token)[1].trim().split(/[^\w\.]/)[0]); } catch (o_O) { } return "0.0.0"; } function _normalizeSemverString(version) { var ary = version.split(/[\._]/); return (parseInt(ary[0], 10) || 0) + "." + (parseInt(ary[1], 10) || 0) + "." + (parseInt(ary[2], 10) || 0); } function _isWebView(ua, os, browser, version, options) { switch (os + browser) { case "iOSSafari": return false; case "iOSWebKit": return _isWebView_iOS(options); case "AndroidAOSP": return false; case "AndroidChrome": return parseFloat(version) >= 42 ? /; wv/.test(ua) : /\d{2}\.0\.0/.test(version) ? true : _isWebView_Android(options); } return false; } function _isWebView_iOS(options) { var document = (window["document"] || {}); if ("WEB_VIEW" in options) { return options["WEB_VIEW"]; } return !("fullscreenEnabled" in document || "webkitFullscreenEnabled" in document || false); } function _isWebView_Android(options) { if ("WEB_VIEW" in options) { return options["WEB_VIEW"]; } return !("requestFileSystem" in window || "webkitRequestFileSystem" in window || false); } var options = {}; var nav = window.navigator || {}; var ua = nav.userAgent || ""; var os = _detectOS(ua); var browser = _detectBrowser(ua); var browserVersion = _detectBrowserVersion(ua, browser); isWebView = _isWebView(ua, os, browser, browserVersion, options); } return isWebView; } function isAllowedWebViewForUserAgent() { var nav = window.navigator || {}; var ua = nav.userAgent || ""; if (ua.match(new RegExp([ 'Instagram', 'FBAV', 'FBAN', 'Line', ].join('|')))) { return true; } return false; } window._nslDOMReady(function () { window.nslRedirect = function (url) { var overlay = document.createElement('div'); overlay.id = "nsl-redirect-overlay"; overlay.insertAdjacentHTML("afterbegin", "<div id='nsl-redirect-overlay-container'><div id='nsl-redirect-overlay-spinner'></div><p id='nsl-redirect-overlay-title'>" + _localizedStrings.redirect_overlay_title + "</p><p id='nsl-redirect-overlay-text'>" + _localizedStrings.redirect_overlay_text + "</p></div>"); document.body.appendChild(overlay); window.location = url; }; var targetWindow = _targetWindow || 'prefer-popup', lastPopup = false; var buttonLinks = document.querySelectorAll(' a[data-plugin="nsl"][data-action="connect"], a[data-plugin="nsl"][data-action="link"]'); buttonLinks.forEach(function (buttonLink) { buttonLink.addEventListener('click', function (e) { if (lastPopup && !lastPopup.closed) { e.preventDefault(); lastPopup.focus(); } else { var href = this.href, success = false; if (href.indexOf('?') !== -1) { href += '&'; } else { href += '?'; } var redirectTo = this.dataset.redirect; if (redirectTo === 'current') { href += 'redirect=' + encodeURIComponent(window.location.href) + '&'; } else if (redirectTo && redirectTo !== '') { href += 'redirect=' + encodeURIComponent(redirectTo) + '&'; } if (targetWindow !== 'prefer-same-window' && checkWebView()) { targetWindow = 'prefer-same-window'; } if (targetWindow === 'prefer-popup') { lastPopup = NSLPopup(href + 'display=popup', 'nsl-social-connect', this.dataset.popupwidth, this.dataset.popupheight); if (lastPopup) { success = true; e.preventDefault(); } } else if (targetWindow === 'prefer-new-tab') { var newTab = window.open(href + 'display=popup', '_blank'); if (newTab) { if (window.focus) { newTab.focus(); } success = true; e.preventDefault(); } } if (!success) { window.location = href; e.preventDefault(); } } }); }); var googleLoginButtons = document.querySelectorAll(' a[data-plugin="nsl"][data-provider="google"]'); if (googleLoginButtons.length && checkWebView() && !isAllowedWebViewForUserAgent()) { googleLoginButtons.forEach(function (googleLoginButton) { googleLoginButton.remove(); }); } });})();</script> </body> </html> <!-- Page generated by LiteSpeed Cache 4.4.2 on 2021-10-23 20:47:41 --> <!-- Performance optimized by W3 Total Cache. Learn more: https://www.boldgrid.com/w3-total-cache/ Served from: codinghindi.in @ 2021-10-23 20:47:41 by W3 Total Cache -->