expchart animations

Author: visualdenniss

Easings.md

@@ -0,0 +1,27 @@
+POWER1, POWER2, POWER3, POWER4 from gsap:
+
+Power1.easeOut:
+ease: [0.25, 0.1, 0.25, 1]
+
+Power2.easeOut:
+ease: [0.25, 0.1, 0.25, 1]
+
+Power3.easeOut:
+ease: [0.25, 0.1, 0.25, 1]
+
+Power4.easeOut:
+ease: [0.25, 0.46, 0.45, 0.94]
+
+OTHER TRANSITIONS TO TRY:
+
+ease: [0.645, 0.045, 0.355, 1] (EaseInOutCubic)
+ease: [0.755, 0.05, 0.855, 0.06] (EaseInOutQuart)
+ease: [0.86, 0, 0.07, 1] (EaseInOutSine)
+ease: [0.95, 0.05, 0.795, 0.035] (EaseInOutQuint)
+ease: [0.6, 0.04, 0.98, 0.335] (EaseInOutExpo)
+
+EaseInOut: [0.83, 0, 0.17, 1]
+EaseOutCubic: [0.215, 0.61, 0.355, 1]
+EaseInOutCubic: [0.645, 0.045, 0.355, 1]
+EaseOutQuart: [0.165, 0.84, 0.44, 1]
+EaseInOutQuart: [0.77, 0, 0.175, 1]

src/components/junior/ExpChart/ExpChart.css

@@ -1,8 +1,8 @@
-@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;700&display=swap');
+@import url("https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;700&display=swap");
 
 .expChart {
   min-height: 100vh;
-  font-family: 'DM Sans', sans-serif;
+  font-family: "DM Sans", sans-serif;
   font-size: 18px;
   background-color: hsl(27, 66%, 92%);
   padding: 25px;
@@ -65,6 +65,8 @@
   color: hsl(25, 47%, 15%);
   display: flex;
   flex-direction: column;
+  min-height: 442px;
+  justify-content: space-between;
 }
 
 .expChart-graph-title {
@@ -82,6 +84,7 @@
   display: grid;
   grid-template-columns: repeat(7, 1fr);
   column-gap: 20px;
+  min-height: 220px;
 }
 
 .expChart-graph-data-info {

src/components/junior/ExpChart/ExpChart.jsx

@@ -2,6 +2,8 @@ import React, {useEffect} from 'react'
 import './ExpChart.css'
 import logo from '../ExpChart/assets/expenses-chart-component-main/images/logo.svg'
 import data from '../ExpChart/assets/expenses-chart-component-main/data.json'
+import { motion } from 'framer-motion'
+import { basicFadeUp2Profile, basicFadeUpProfile } from './animation'
 
 const ExpChart = () => {
 
@@ -23,14 +25,44 @@ const ExpChart = () => {
         document.getElementById(highest).classList.add('expChart-graph-data-vis-highest')
     }
 
+
+
+
     useEffect(()=>{
     addStyle()
+
+    // ANIMATE COUNTER 
+    setTimeout(()=> {
+
+        const counters = document.querySelectorAll('.expChart-graph-stats-left-total');
+        const speed = 700;
+    
+        counters.forEach( counter => {
+        const animate = () => {
+            const value = +counter.getAttribute('counter');
+            const data = +counter.innerText;
+            
+            const time = value / speed;
+            if(data < value) {
+                counter.innerText = Math.ceil(data + time);
+                setTimeout(animate, 1);
+                }else{
+                counter.innerText = `$${value}`;
+                }
+            
+        }
+        
+        animate();
+        });
+
+    },1200)
+
     }, [])
 
     return (
         <div className='expChart df'>
             <main className="expChart-container">
-                <header className="expChart-header">
+                <motion.header {...basicFadeUpProfile} className="expChart-header">
                     <div className="expChart-balance-info">
                         <h4 className="expChart-balance-info-title">
                             My balance
@@ -40,17 +72,24 @@ const ExpChart = () => {
                         </p>
                     </div>
                     <img src={logo} alt="" className="expChart-logo"/>
-                </header>
-                <section className="expChart-graph">
+                </motion.header>
+                <motion.section {...basicFadeUp2Profile} className="expChart-graph">
                    <h1 className="expChart-graph-title">
                         Spending - Last 7 days
                    </h1>
                     <ul className="expChart-graph-data-container">
                         {data.map((item, index)=>(
                         <li className="expChart-graph-data-info">
-                            <div className="expChart-graph-data-vis" key={index} id={index} style={{height:`${(Math.floor(item.amount)*3)}px`}}>
+                            <motion.div 
+                            initial={{height:'0px'}}
+                            animate={{height:(Math.floor(item.amount)*3), 
+                            transition:{duration: .2, 
+                            ease:[0.25, 0.46, 0.45, 0.94], 
+                            delay: 1.2+ (0.15 * index)
+                            }}}
+                            className="expChart-graph-data-vis" key={index} id={index} style={{height:`${(Math.floor(item.amount)*3)}px`}}>
                                 <span>${item.amount}</span>
-                            </div>
+                            </motion.div>
                             <div className="expChart-graph-data-day">
                                 {item.day}
                             </div>
@@ -62,8 +101,8 @@ const ExpChart = () => {
                             <div className="expChart-graph-stats-left-desc">
                                  Total this month
                             </div>
-                            <div className="expChart-graph-stats-left-total">
-                                $478.33
+                            <div className="expChart-graph-stats-left-total" counter="478.33">
+                                {/* $478.33 */}
                             </div>
                         </div>
                         <div className="expChart-graph-stats-right">
@@ -75,7 +114,7 @@ const ExpChart = () => {
                             </div>
                         </div>
                     </div>
-                </section>
+                </motion.section>
             </main>
         </div>
     )

src/components/junior/ExpChart/animation.js

@@ -0,0 +1,20 @@
+const ease = [0.25, 0.46, 0.45, 0.94]
+
+export const basicFadeUpProfile = {
+    initial:{opacity:0, y: 40},
+    animate:{opacity:1, y: 0,  
+        transition: {
+            delay: 0, 
+            ease: ease,
+            duration: 1,
+        }}
+}
+export const basicFadeUp2Profile = {
+    initial:{opacity:0, y: 40},
+    animate:{opacity:1, y: 0,  
+        transition: {
+            delay: 0.4,
+            ease: ease,
+            duration: 1,
+        }}
+}