Jump to content
GreenSock

ericnguyen23

Members
  • Posts

    35
  • Joined

  • Last visited

Posts posted by ericnguyen23

  1. Question (for those familiar w/ React and GSAP) regarding setting Timeline with functional components.

     

    I'm aware that to access DOM, I would have to reference and set animation like so, which works just fine:

    // creating state objects
    const [animation, setAnimation] = useState();
    
    // Set variable using useRef for functional component
    let headingRef = useRef(null);
    
    // add reference to the DOM element
    <h1 ref={element => {headingRef = element;}}>Hello</h1>  
    
    / // animate using useEffect hook and setAnimation 
    useEffect(() => {
        setAnimation(
          TweenMax.to(headingRef, 1, {
            css: {
              height: 120,
            },
          })
        );
    }, []);

     

    Now, what if I wanted to create a timeline. Do I just set it like so:

    let tl = new TimelineMax();

    Or do I need to store it in a state object?

  2. 2 hours ago, Dipscom said:

    Oh, look at this, it's a thread party! Whoop whoop whoop!

     

    So, I see the zooming in on Chrome and agree that is a jarring experience. It makes me think you have forgotten to add the meta tags for the zooming and scaling of the document. In fact, checking your original link, I don't see any of the metatags.

     

    If your are unfamiliar with codePen, press the settings button of your pen, look at the HTML tab and under the Stuff for <head> text area there's a button that says: "insert the most common viewport metatags". Click on that to add some common stuff, save your pen and check to see if that helps.

    Thanks, I've added this and the jumpy/jittery behavior is still there.  Let me explain what I'm experiencing:

    1. When I click on the name input box, browser jumps to bottom section.
    2. As I continue to scroll up and down, I also experience jittery animations. This again, likely due to Scrollmagic, so I'll take a look at css solution @ZachSaucier mentioned above.
  3. 4 minutes ago, Dipscom said:

    Hey @ericnguyen23,

     

    I'm on Android phone right now and was not able to see any unexpected jumping around. What phone are you using? What browser? I'm on a Nokia running Firefox.

     

    Do you have this issue if you open your example pen in 'Debug' mode? It will help us figure out if it's something to do with codePen.

     

     

    I'm on s8 Plus, Chrome browser. 

     

    Yes, same issues in debug view. Here's the debug link: https://s.codepen.io/ericnguyen23/debug/pozgdWz/jVApobzEWqZr

  4. 14 minutes ago, ZachSaucier said:

    Take away the z-index of .nav. 

     

    If you give it a z-index it will create its own stacking context, which prevents children from being placed behind it. See this post for more info.

     

    Happy tweening!

     

    Thanks Zach - although that works, it takes away the hovering functionality with subnav (because of the element below it). I'll look into more, hopefully I don't have to tear up my code too much! 

  5. 16 hours ago, Visual-Q said:

    Unfortunately I know nothing about react so I haven't even tried to work out what you intend with the useEffect function but this is a basic implementation of using paused:true on timeline and play and reverse in event handlers. Hopefully it will get you moving in the right direction.

     

     

     

     

    I'm a noob in React myself, actually a relative noob in modern web dev, but seems like I have to use `useEffect` for animations to work with a functional component. 

     

    This is what I was looking for, thanks! 

     

    This is totally a side topic and not related to GSAP, but I'll throw it out there: How can I get my subnav to be positioned behind my main nav? 

    See the Pen rXBgNR by ericnguyen23 (@ericnguyen23) on CodePen

  6. 4 minutes ago, ZachSaucier said:

    Hey Eric.

     

    This is definitely possible! The setup depends on how you want it to animate. They key concept is that instead of adding a class, you'd use a tween to affect some properties of the drop down menu. Then when the menu/navigation has stopped being hovered, you tween it back to being hidden.

     

    Is there a specific part of this process that you're having trouble with?

     

    Not yet, for now at least. 

    I just wanted to verify this is possible. I'll go play with it now and if I have questions I'll come back.

  7. 49 minutes ago, OSUblake said:

    You're animation doesn't know if the width value has changed. You'll need to recreate or invalidate your animation every time the window resizes.

     

     

     

    hmm ok this makes sense and getting me one step closer. 

     

    So what I did now is wrap the animation into a named function, passing the new width as a parameter. I'm calling the animation function within window.onresize, passing new width state.  It's not working but I like where it's taking me. 

     

    Going to call it a night and start fresh tomorrow or the next day.

     

    @ZachSaucier  @OSUblake Any tips would be appreciated. 

     

    See the Pen vwORxr?editors=0010 by ericnguyen23 (@ericnguyen23) on CodePen

     

     

  8. Thanks for the links @mikel

     

    I updated my codepen and thinking I'm really close. 

     

    I created a state and set it to empty:

     

    constructor(props) {
        super(props);
    
        this.state = { winWidth: '' };
    
      }

     

    I then set state to window.innerWidth value everytime window resizes:

     

    componentDidMount() {
        window.onresize = () => {
          this.setState({
            winWidth: window.innerWidth,
          });
    
          console.log(this.state.winWidth); // just so I can see that state is changing
        };
      
      
    }

     

    I then assigned GSAP timeline x position to new state thinking this would work but doesn't.

     

          this.tl
          .fromTo(this.moped, 4, {
            x: '-400', 
            ease: 'Linear.easeNone',
          }, {
            x: this.state.winWidth,
            ease: 'Linear.easeNone',
          })

     

    the Moped is dissappearing early into animation. any help would be appreciated. 

  9. Anyone happen to know how I can store/update window width variable as user changes browser size? Right now I'm just setting it up like this 

    const deviceWidth = window.innerWidth;

     

    Variable only updates when browser refreshes.  I'd like it to update AS user resizes. 

  10. I was able to implement timeline and Scrollmagic using useEffect( ) and passing animation configs into setAnimation( )  and getting it to work in my local react project.

     

    Although I'm unable to reproduce this in Codepen for some reason so here's the setup in case anyone is wondering:

     

    const NavBar = () => {
    
      const [animation, setAnimation] = useState(null);
      
      let tl = new TimelineMax();
      let controller = new ScrollMagic.Controller();
    
      useEffect(() => {
        setAnimation(
          // GSAP timeline config
          tl
            .to('.navbar', 0.25, {
              css: {
                borderBottom: '1px solid rgba(200, 200, 200, 1)',
                backgroundColor: '#ffffff',
              },
            })
        );
        setAnimation(
          // ScrollMagic config
          new ScrollMagic.Scene({
            triggerElement: '#trig',
            triggerHook: 0.2,
            offset: 140,
          })
            .setTween(tl)
            .addTo(controller)
        );
      }, []);
      
      return(
      	// Rendering code here
      )
    };

     

     

    • Like 1
  11. Another layer to add on top of initial question:

     

    I'm trying to implement Scrollmagic therefor need to convert my TweenLite animation into a timeline.  The only issue is this is a React functional component which uses Hooks instead of class component features. Any GSAP React developers know how to implement?

×