{"size": 2432, "ext": "js", "max_stars_repo_path": "client/src/components/Palms.js", "max_stars_repo_name": "LiliCecilia23/inBloom", "max_stars_repo_stars_event_min_datetime": "2020-12-09T01:53:43.000Z", "max_stars_repo_stars_event_max_datetime": "2020-12-09T01:53:43.000Z", "max_issues_repo_path": "client/src/components/Palms.js", "max_issues_repo_name": "LiliCecilia23/inBloom", "max_issues_repo_issues_event_min_datetime": "2020-12-15T22:34:53.000Z", "max_issues_repo_issues_event_max_datetime": "2021-01-13T02:31:26.000Z", "max_forks_repo_path": "client/src/components/Palms.js", "max_forks_repo_name": "LiliCecilia23/inBloom", "max_forks_repo_forks_event_min_datetime": "2021-01-15T01:33:39.000Z", "max_forks_repo_forks_event_max_datetime": "2021-01-19T19:13:38.000Z"}
{"max_stars_count": 1, "max_issues_count": 4, "max_forks_count": 2, "avg_line_length": 38.6031746032, "max_line_length": 109, "alphanum_fraction": 0.6225328947}
import React, {useEffect} from 'react';
import rightpalm from "../images/rightpalm.svg";
import leftpalm from "../images/leftpalm.svg";

import gsap from 'gsap';


const Palms = () => {


// gsap animation

useEffect(() => {

    gsap.from('.inbloom', {duration:4, opacity:0})
    gsap.from('#login-container', {duration:4, opacity:0})
    gsap.to('.leftpalm-1', { duration: 4, ease: "slow.out", transformOrigin: 'left bottom', rotate: -75 })

    gsap.to('.rightpalm-1', { duration: 4.5, ease: "slow.out", transformOrigin: 'right bottom', rotate: 75 })
    gsap.to('.leftpalm-2', { duration: 3, ease: "slow.out", transformOrigin: 'left bottom', rotate: -75 })
    gsap.to('.rightpalm-2', { duration: 3.5, ease: "slow.out", transformOrigin: 'right bottom', rotate: 75 })
    gsap.to('.leftpalm-3', { duration: 2, ease: "slow.out", transformOrigin: 'left bottom', rotate: -75 })
    gsap.to('.rightpalm-3', { duration: 2.5, ease: "slow.out", transformOrigin: 'right bottom', rotate: 75 })
    gsap.to('.leftpalm-4', { duration: 2.2, ease: "slow.out", transformOrigin: 'left bottom', rotate: -75 })
    gsap.to('.rightpalm-4', { duration: 2.3, ease: "slow.out", transformOrigin: 'right bottom', rotate: 75 })
    gsap.to('.leftpalm-5', { duration: 2.1, ease: "slow.out", transformOrigin: 'left bottom', rotate: -75 })
    gsap.to('.rightpalm-5', { duration: 2.1, ease: "slow.out", transformOrigin: 'right bottom', rotate: 75 })
    gsap.to('.leftpalm-6', { duration: 2.2, ease: "slow.out", transformOrigin: 'left bottom', rotate: -75 })
    gsap.to('.rightpalm-6', { duration: 2, ease: "slow.out", transformOrigin: 'right bottom', rotate: 75 })
},
     []);


    return (
        <>
              
    <img className="leftpalm-1" src={leftpalm}></img>
    <img className="rightpalm-1" src={rightpalm}></img>
    <img className="leftpalm-2" src={leftpalm}></img>
    <img className="rightpalm-2" src={rightpalm}></img>
    <img className="leftpalm-3" src={leftpalm}></img>
    <img className="rightpalm-3" src={rightpalm}></img>
    <img className="leftpalm-4" src={leftpalm}></img>
    <img className="rightpalm-4" src={rightpalm}></img>
    <img className="leftpalm-5" src={leftpalm}></img>
    <img className="rightpalm-5" src={rightpalm}></img>
    <img className="leftpalm-6" src={leftpalm}></img> 
    <img className="rightpalm-6" src={rightpalm}></img> 
   
   
    
     
 

        </>
    );
}

export default Palms;
  


  