How a new technology saved my final project!

Hello world! Join me for a short read on how I was able to utilize animation to give a little pop to something that would be otherwise considered bland and dull.

I was tasked to choose a new technology to incorporate in my final project. Let me back up for a second first. Nearing completion in the Flatiron School bootcamp for Software Engineering, a key requirement for the final project of the program was to come up with a new technology, something not taught in the curriculum. After searching numerous technologies, one caught my attention almost immediately. Seeing the potential of its functionality I knew I found the proper fit.

What is this unmentioned, mysterious tech you say? The name is Framer Motion, an animation library for React. As you may have already guessed it, you get the ability to create animation styling. I was able to create a simple but effective new tool to amplify my already well put together app.

How was it done? I'll share the few lines of code I used in order to achieve this accomplishment. Firstly, I had to do "npm install framer-motion". Making sure to import it into the component you'll be using it in is crucial, so don't forget.
import { motion } from 'framer-motion';.

<motion.div
                initial={{ opacity: 0, scale: 0.5 }}
                animate={{ opacity: 1, scale: 1 }}
                transition={{ duration: 2, ease: "easeInOut" }}
            >
                <h1 style={headingStyle}>404 - Page Not Found</h1>
                <p style={paragraphStyle}>The page you're looking for doesn't exist.</p>
                <a href="/" style={linkStyle}>Go back to Home</a>
            </motion.div>

"Initial" is the starting position, "animate" is the new end result, and "transition" includes the duration of the animation, including an ease in and out effect. I used it in a simple manner just showing the text of a "404 - Page Not Found". The original opacity and scale allow for a pretty cool transition of the text turned animation. Visually, the text image starts off small and enlarges, starting off nearly invisible then coming to appearing out of what seems to be thin air. Does it work with an image? Not sure... yet, that's my next test when i'm working on my next project. This actually came out better than I could have imagined.