Enhance User Experience with Scroll-Triggered Animations on the Website.

HELLO Gorgeous People !!! on internet. In this article let's learn about how to bring up the animations at the right time while you scroll the website. Here we will be using the FRAMER-MOTION package which helps us to develop animations within seconds.

Here i have also provided the codesandbox url so that you can cook your own receipe.

https://codesandbox.io/s/animate-on-scroll-7h7o72?file=/src/App.js

Ingredients:

• 250 gm of React app

• 150 gm of frame-motion package

• 1 ton of motivation

Let's start cooking:

• After you have created an empty react application. Now it's time to bring the frame-motion package. use the below command to install the package.

npm install frame-motion

• Once you have installed it successfully its time to start the react-app with

npm start

• Now you need to import the motion from the frame motion like this.

import{motion} from 'framer-motion';

• With this import, you get the power to animate the HTML tags within seconds.

• Now let's create 2 parent div where the first div will have a height of 100vh and the second div will be 100vh we will apply the animations on the second div so that we can see the animation when we scroll to the second div from the first div.

import "./styles.css";
import{motion} from 'framer-motion';
export default function App() {

  return (
    <div className="App">
     <div className="firstpage"></div>
     <div className="secondpage">

     </div>
    </div>
  );
}

• Now let's add 3 divs inside of the second parent div. here for each div will we apply different animations.

 import "./styles.css";
import{motion} from 'framer-motion';
export default function App() {

  return (
    <div className="App">
     <div className="firstpage"></div>
     <div className="secondpage">
       <div className="prop1"></div>
        <div className="prop2"></div>
         <div className="prop3"></div>

     </div>
    </div>
  );
}

• And this the CSS file that you need

.App {
  font-family: sans-serif;
  text-align: center;
}
.firstpage{
  width: 100%;
  height:100vh;
  background-color: blue;
}
.secondpage{
  width: 100%;
  border:1px solid black;
  height: 200vh;
}
.prop1,.prop2,.prop3{
  width:100px;
  height: 100px;
  background-color: green;
  margin:100px auto;
}

• Now the action begins here we need to add the motion to the div like this

       <motion.div className="prop1"></motion.div>

• with this div get the power to implement the animations. here we will be using 2 props ie initial and whileinView.

       <motion.div initial={{y:100}}  whileInView={{ y:0, transition:{duration:0.9,type:"spring", bounce: 0.5} }} className="prop1"></motion.div>

• In the initial prop, we need to provide the object and the following properties that you want the div to have at the initial point. here I have chosen to keep my div down by 100px on the y-axis. and here I will use the whileInView prop to show the animation when the user reaches the div while scrolling at that time I will make the y-axis position of the div back to normal position with the duration of 0.9 sec and with the spring type of animation and little bounce effect of 0.5 now that is it we have done the animation to the div.

• If you try to do this in the traditional way it would take a lot of time to figure out the scrolling position and followed by the animation CSS. But here we have done this with just a line of code.

• You can know more about the Framer-motion package and different animations from the framer-motion documentation page.
  https://www.framer.com/docs/

• That is it guys from this article please feel free to like, comment and share your thoughts about the article.

  "Arigato GUYS"