Jump to content
Search Community

connor.online

Members
  • Posts

    14
  • Joined

  • Last visited

Posts posted by connor.online

  1. 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);

     

    • Like 2
  2. 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

  3. 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

    • Like 2
  4. 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.

  5. 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;

     

  6. 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?

  7. 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!

    • Like 2
  8. 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

×
×
  • Create New...