daryl.codes

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

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?

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

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

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?

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.

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

Blake, your the best! I'm looking to implement a menu form like this : https://codepen.io/karlovidek/pen/aNYWKE/?editors=0100 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!

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, Zach, thanks for the help, Im getting a useeffect error.

Before that block of code, I still need to add useRef and useEffects?

Need help adding this to my react app, Could anyone go thru this and help me convert the JS code. Thanks