reversing in react with gsap

[daryl.codes]

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

[OSUblake]

Lots of changes.

 

https://codesandbox.io/s/suspicious-violet-icn19?file=/src/components/atom/Menu.js

 

[daryl.codes]

Blake, your the best!

 

I'm looking to implement a menu form like this :

See the Pen ?editors=0100 by karlovidek (@karlovidek) on CodePen

and as you can see I'm getting there. Any tips on what i can focus on next? maybe the closing bars? 

 

Your help is appreciated!

 

 

[ZachSaucier]

2 hours ago, daryl.codes said:

Any tips on what i can focus on next? maybe the closing bars? 

Whatever you want to focus on  

[daryl.codes]

Id like to work on the closing bars next. I'll reply to this thread when i get stuck. 

[daryl.codes]

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.

[ZachSaucier]

41 minutes ago, daryl.codes said:

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.

Sounds like you need a timeline.

[daryl.codes]

1 hour ago, ZachSaucier said:

Sounds like you need a timeline.

yep, heres what i have so far https://codesandbox.io/s/suspicious-violet-icn19?file=/src/components/atom/Menu.js

I'm thinking I need the onReverseComplete property?

[ZachSaucier]

That's just the sandbox that Blake made. Perhaps you forgot to save? Or you copied the wrong link? 

 

Most likely you don't need the onReverseComplete property, you just need to use a timeline like I said. Add more tweens to whatever timeline you're using to make the lines go out.

[daryl.codes]

Zach and Blake!

 

Heres what I have so far:

https://codesandbox.io/s/flamboyant-mirzakhani-x8cdr

 

The menu is acting weird when i reverse it now, any ideas? i know its using some css with the gsap. I am not sure if that will help in debugging.

 

Thanks

[daryl.codes]

Gentlemen, I made it work. , it was in the css. I heard that gsap should not be used with css is that true?

[OSUblake]

8 hours ago, daryl.codes said:

I heard that gsap should not be used with css is that true?

 

No, just that you shouldn't animate the same properties with gsap and css. For example, if you have transition: all 1s; css on an element and then try to animate that element with gsap, it's probably going to animate incorrectly.

 

 

[daryl.codes]

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?

[OSUblake]

A useEffect should always have an array as the second parameter, and your gsap code  doesn't have a valid target. You should also stick to the new syntax. TweenLite, TweenMax, TimelineLite, and TimelineMax are deprecated.

 

If you're trying to stagger all 4 elements, then it might be something like this.

 

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

  useEffect(()=>{
    
    const staggerTargets = [
      animatedEl.current,
      animatedEl2.current,
      animatedEl3.current,
      animatedEl4.current
    ];
    
    const animation = gsap.from(staggerTargets, {
      y: 100,
      stagger: 0.5
    });
    
    // kill animation on unmount
    return () => animation.kill()
    
  }, []);

return (
  
    <div className="blobDiv">    
    
      <Menu />
      <div className="blob">
        <h6 ref={animatedEl}>HI THERE !</h6>
        <h1 ref={animatedEl2}><span>I'M</span> DARYL DAUPHIN</h1>
        <p ref={animatedEl3}>
          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={animatedEl4} />
    </div>
  );
}

 

 

[daryl.codes]

thank you so much, im making great progress. i want to learn gsap 3 soon.