connor.online

Hi all, Wondering if I can animate the border of a div separately somehow, or if it's better to nest it (ie: animate border of parent, then text of child). Dealing with SVGs seems like a pain in terms of alignment. Here's my CodeSandBox Thanks!

Heyo, The title really says it all. I have a menu that expands with submenus but when the div changes height to include the submenu, the transition is quite abrupt. How do you smooth this out? I tried auto-round but that didn't do the trick. The site is live here at jessford.care Thanks!

The problem was always clear to me, while it was caused by using GSAP, it's more of a React conditional state management issue. But I solved it! So FWIW I'll leave the solution here because I'm certain someone else will run into this. My GSAP timeline was stuck on the initial value of 'display:none' in the 'fromTo' Tween which was intentional on mobile but problematic on desktop because the menu is a dropdown on mobile but always visible on desktop. The issue couldn't be solved with matchMedia, so instead I needed to read the screen innerWidth as a media query to manage the state of the GSAP timeline. Here's the solution: const [menuOpen, setMenuOpen] = useState(window.innerWidth > 900 ? true : false);

Hi all! I'm having trouble conceptualizing a workaround here. In my menu component, I have a menu icon using State to trigger the animation, but that's hidden my menu entirely on desktop. It seems difficult to solve for the discrepancy in State with mobile/desktop, but I also can't seem to nail the usage of matchMedia because no matter what, the State is still initially falsey. This feels overcomplicated, so hoping I'm just not seeing an easy answer! Thanks, Connor index.js index.css

Hey @Rodrigo, Sorry, wasn't trying to spread bad vibes, my anguish was more directed at the fact that I couldn't find any relevant info on how to publicly expose that branch in the repository. I do appreciate any and all help troubleshooting as always, especially on an open source library. Thanks for the suggestions! -Connor

Jesus Christ. Forget it. Thanks anyway

@gsap Ah, I just figured out how to switch branches on CodeSandbox, so here it is! The GSAP version was up to date so perhaps someone will spot something else clearly wrong with the code. Thanks in advance!

Hey all, I haven't changed any animations on my site in a few days and was just adding a moment.js instance to a Contact page (seemingly unrelated, I'm aware) when all of a sudden I started getting console errors and a blank screen. Most had to do with GSAP but a few seemed like my entire App had been disconnected from the index.js page. I know not all of this is purely GSAP related but I'm curious if the GSAP errors caused the others. After cleaning up some potentially problematic GSAP context, nothing was working so I "git reset --hard" to a point in the tree that I knew everything was fine at. Yet all the same console errors persisted. I even went back to the Develop branch and somehow that'd been corrupted as well. I realize it's hard to troubleshoot without a CodePen but I can't figure out an efficient way to upload an entire React project that isn't the main branch. If you see anything that looks familiar please let me know, thanks ? The errors are as such: Uncaught TypeError: gsap__WEBPACK_IMPORTED_MODULE_3__.default.context is not a function at index.js:91:1 at commitHookEffectListMount (react-dom.development.js:23049:1) at commitPassiveMountOnFiber (react-dom.development.js:24816:1) at commitPassiveMountEffects_complete (react-dom.development.js:24781:1) at commitPassiveMountEffects_begin (react-dom.development.js:24768:1) at commitPassiveMountEffects (react-dom.development.js:24756:1) at flushPassiveEffectsImpl (react-dom.development.js:26990:1) at flushPassiveEffects (react-dom.development.js:26935:1) at performSyncWorkOnRoot (react-dom.development.js:26032:1) at flushSyncCallbacks (react-dom.development.js:12009:1) Uncaught TypeError: gsap__WEBPACK_IMPORTED_MODULE_4__.gsap.context is not a function at index.js:17:1 at commitHookEffectListMount (react-dom.development.js:23049:1) at commitPassiveMountOnFiber (react-dom.development.js:24816:1) at commitPassiveMountEffects_complete (react-dom.development.js:24781:1) at commitPassiveMountEffects_begin (react-dom.development.js:24768:1) at commitPassiveMountEffects (react-dom.development.js:24756:1) at flushPassiveEffectsImpl (react-dom.development.js:26990:1) at flushPassiveEffects (react-dom.development.js:26935:1) at performSyncWorkOnRoot (react-dom.development.js:26032:1) at flushSyncCallbacks (react-dom.development.js:12009:1) The above error occurred in the <Menu> component: at Menu (http://localhost:3000/static/js/bundle.js:376:64) at div at App at Router (http://localhost:3000/static/js/bundle.js:74955:15) at BrowserRouter (http://localhost:3000/static/js/bundle.js:73764:5) Consider adding an error boundary to your tree to customize error handling behavior. Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries. The above error occurred in the <Intro> component: at Intro (http://localhost:3000/static/js/bundle.js:159:64) at Routes (http://localhost:3000/static/js/bundle.js:75022:5) at div at App at Router (http://localhost:3000/static/js/bundle.js:74955:15) at BrowserRouter (http://localhost:3000/static/js/bundle.js:73764:5) Consider adding an error boundary to your tree to customize error handling behavior. Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries.

@SteveS neither worked ? I tried declaring {reversed:true} along with the {paused:true} but that didn't do the trick either. Solved: The fix was menuTimeline.current.reverse(true) A combo of sorts!

Hi all, I can't seem to get my timeline to reverse on a menu component using React. It seems the animation is just resetting to its previous value rather than animating back to it. I also have a suspicion that perhaps I'm creating a new timeline each time rather than reusing the same one, but I can't figure out how to adapt what I'm reading to my use case. Thanks for your time, Connor import React, { useEffect, useState, useRef } from 'react'; import { NavLink } from 'react-router-dom'; import './index.css'; import gsap from 'gsap'; import {TextPlugin} from 'gsap/TextPlugin'; gsap.registerPlugin(TextPlugin); function Menu() { // Ref Declarations const logoRef = useRef(); const iconRef = useRef(); const dropDownRef = useRef(); const menuItemsRef = useRef([]); const linkRef = useRef([]); const menuTimeline = useRef(); const [menuOpen, setMenuOpen] = useState(false); // NavBar Loading Animation useEffect(() => { gsap.fromTo([logoRef.current], { text: '', opacity: 0, }, { text: 'connor white', opacity: 1, duration: 2, ease: "power4.inOut" }) gsap.fromTo([iconRef.current], { x: 75, rotateZ: 360 }, { x: 0, rotateZ: 0, duration: 1, ease: "power3.inOut", delay: .75 }) }, []); // Menu State Change const toggleMenu = () => { setMenuOpen(!menuOpen); } // Menu Timeline Animation menuTimeline.current = gsap.timeline({ paused: true }); menuTimeline.current.fromTo(dropDownRef.current, { opacity: 0, display: 'none', // backgroundColor: 'transparent', height: '0vh', width: '0vw', }, { opacity: 1, display: 'block', backgroundColor: '#000000', height: '100vh', width: '100vw', duration: .25, ease: "power4.inOut" }, 0); menuTimeline.current.fromTo(iconRef.current, { rotateZ: 0 }, { rotateZ: 315, duration: .75, ease: "back.inOut" }, .25); menuTimeline.current.fromTo(logoRef.current, { text: { value: 'connor white', } },{ duration: 1, text: { value: 'designer & developer', ease: "power4.inOut" }, }, .25); menuTimeline.current.fromTo(menuItemsRef.current.children, { opacity: 0, x: 25, }, { opacity: 1, x: 0, duration: .25, ease: "power4.inOut", delay: .25, stagger: { amount: .25 } }, .25); menuTimeline.current.fromTo(linkRef.current.children, { scale: 0, opacity: 0, }, { scale: 1, opacity: 1, duration: .5, ease: "back.inOut", stagger: { amount: .25, from: 'end' } }, .5); // Run menu timeline animation when menu state changes useEffect(() => { let ctx = gsap.context(() => { menuOpen ? menuTimeline.current.play() : menuTimeline.current.reversed(); }) return () => ctx.revert(); }, [setMenuOpen, menuOpen]); return ( <div className="menu"> <div className="navbar"> <div className="name" ref={logoRef}>connor white</div> <div > <img onClick={toggleMenu} ref={iconRef} src="./media/icons/menu-button.svg" alt="menu button" className="menu-icon"/> </div> </div> <div className="dropdown" ref={dropDownRef}> <div ref={menuItemsRef} className="menu-items"> <NavLink to="/" className="nav-link" onClick={toggleMenu}>Intro</NavLink> <NavLink to="/projects" className="nav-link" onClick={toggleMenu}>Projects</NavLink> <NavLink to="/contact" className="nav-link" onClick={toggleMenu}>Contact</NavLink> <div ref={linkRef} className="linkouts"> <a href="https://www.linkedin.com/in/connorwhite-online/" target={"_blank"} rel="noreferrer"><img src="./media/icons/linkedin.svg" alt="Connor's LinkedIn" className="social-links" /></a> <a href="https://github.com/connorwhite-online" target={"_blank"} rel="noreferrer"><img src="./media/icons/github.svg" alt="Connor's Github" className="social-links" /></a> <a href="https://twitter.com/connor_online" target={"_blank"} rel="noreferrer"><img src="./media/icons/twitter.svg" alt="Connor's Twitter" className="social-links" /></a> <a href="https://instagram.com/connorwhite.online" target={"_blank"} rel="noreferrer"><img src="./media/icons/instagram.svg" alt="Connor's Instagram" className="social-links" /></a> </div> </div> </div> </div> ) } export default Menu;

Oh great, I didn’t think you could use query selectors with gsap + react. I’d heard Refs were the only way to call an element outside of the scoped .context() obviously. I’ll get after it then. thanks!

Wait wait wait, one more question! (hopefully) So the gsap.utils.toArray("selector-text") is creating the array of animatable "project" divs, but if I want to animate the individual elements within that div, can I just add the animations to the forEach function under a timeline? Or do I need to create a new toArray + forEach function for each element? I'm doing a horizontal scroll where each project will be 100vw, so I'd like to stagger and animate everything individually. Thanks! Edit: Does ScrollTrigger even work horizontally with a right and left scroll, or just an up and down scroll?

Ah great catch on the ref.current, I think I tried that when nothing was working haha. Reading up on .context() now, thanks for the demo! I found this article (potentially the only one) matching my use case, but .context() seems way handier than just creating an array of refs. Thanks again!

Hey All, I'm having a difficult time figuring out the correct way to animate a mapped array of objects in React. This may sound a bit vague, so specifically, I'm trying to animate each object in the array, eventually with a Scroll Trigger, but for now I can't even seem to make them animate initially. I understand how to animate an array, but not the individual key/values in an array of objects. My guess is that the typical useRef setup is only targeting the last object in the array, and I'll need to create a Ref for each key/value in each object, I'm just not sure how to go about that. Again, I'll be setting up a Scroll Trigger after I get the animations working. Thanks for the help! -Connor (file below) index.js