Jump to content
Search Community

daryl.codes

Members

  • Posts

    14

  • Joined

  • Last visited

 Content Type 

Posts posted by daryl.codes

    reversing in react with gsap

    in GSAP

    Posted

    Hey Blake I have been working on a new section of the page. And need help animating a few text. 

    function Blob() {
  let animatedEl = useRef(null)
  let animatedEl2 = useRef(null)
  let animatedEl3 = useRef(null)
  let animatedEl4 = useRef(null)

  useEffect(()=>{
    TweenMax.staggerFrom(1, {y: 100}, .5);
    })

return (
  
    <div className="blobDiv">    
    
      <Menu />
      <div className="blob">
        <h6 ref={(el) => {animatedEl = el}}>HI THERE !</h6>
        <h1 ref={(el) => {animatedEl2 = el}}><span>I'M</span> DARYL DAUPHIN</h1>
        <p ref={(el) => {animatedEl3 = el}}>
          I'm a American based front‑end developer focused on crafting clean & user‑friendly experiences, I am passionate about building excellent software that improves the lives of those around me.
        </p>
      </div>   

      <Button ref={(el) => {animatedEl4 = el}} />
    </div>
  );
}

export default Blob;

    my useeffect needs some work, can you help?

    reversing in react with gsap

    in GSAP

    Posted

    is there a way to make the menu bar animate out and while the actual selection menu pops up the the menu bars come back in higher z index? meaning id like to have the menu just animate out and back on 1 click.

    reversing in react with gsap

    in GSAP

    Posted

    Hello, I have 3 simple menu bars i am animating but id like to now reverse, i know about reverse() but i cant seem to implement it correctly.

      

    const [state, setState] = useState({
    active: null
  })

const handleClick = () => {
    setState({
    active: !state.active
})

  }

let bar1, bar2, bar3 = useRef(null)

useEffect(()=>{
    if(state.active === true){
        gsap.to(bar1, 0.4, { x: "+=80px", y: "-=80px", delay: 0.1, ease: Power4.easeIn })
        gsap.to(bar2, 0.4, {  x: "+=80px", y: "-=80px", ease: Power4.easeIn})
        gsap.to(bar3, 0.4, { x: "+=80px", y: "-=80px", delay: 0.2, ease: Power4.easeIn})
    }else if (state.active.reversed()){
      gsap.to(bar1, 0.4, { x: "+=80px", y: "-=80px", delay: 0.1, ease: Power4.easeIn }).reverse()
        gsap.to(bar2, 0.4, {  x: "+=80px", y: "-=80px", ease: Power4.easeIn}).reverse()
        gsap.to(bar3, 0.4, { x: "+=80px", y: "-=80px", delay: 0.2, ease: Power4.easeIn}).reverse()
    }
})

    Help needed!

    https://codesandbox.io/s/musing-christian-ncvot?file=/src/components/atom/Menu.js

    Hello, need help converting v2 code to v3

    in GSAP

    Posted

    Just now, daryl.codes said:

    import React, { useState, useRef, useEffect } from 'react';
    import { gsap ,Power3 } from "gsap";


    let nav = useRef(null)

    useEffect(() => {
        animateIn(e)
    }, [])


    let nav = document.getElementById("navigation");
    nav.addEventListener("click", animateIn);

    function animateIn(e) {
        e.stopPropagation();
        gsap.to(nav, { // no Max/Lite
          duration: 1.3, // duration in vars parameter
          width: 300, // no need for "" around numerical values unless you need to add units
          height: 300,
          borderTopLeftRadius: "30% 29%",
          borderTopRightRadius: "70% 26%",
          borderBottomRightRadius: "29% 74%",
          borderBottomLeftRadius: "71%",
          ease: "elastic" // use the condensed form for strings
        });
     
        gsap.to(nav, {
          duration: 0.4,
          opacity: 1,
          ease: "none"
        }).delay(0.45);
      }

    function animateOut() {
        gsap.to(nav, {
            duration: 0.5,
            width: 30,
            height: 30,
            borderTopLeftRadius: "10%",
            borderTopRightRadius: "10%",
            borderBottomRightRadius: "10%",
            borderBottomLeftRadius: "10%",
            ease: "Power2"
        });

        gsap.to(nav, {
            duration: 0.2,
            opacity: 0,
            ease: "Linear"
        });
    }

    window.addEventListener("click", function() {
        //Hide the menus if visible
        animateOut();
    });

     

     

×
×
  • Create New...