Jump to content


  • Posts

  • Joined

  • Last visited

Everything posted by ericnguyen23

  1. Thanks @Rodrigo This helps. I'll set my timeline up like this now: const [tl] = useState(new TimelineMax());
  2. 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?
  3. Thanks @PointC and @ZachSaucier - You've armed me with a couple of good options!
  4. Thanks, I've added this and the jumpy/jittery behavior is still there. Let me explain what I'm experiencing: When I click on the name input box, browser jumps to bottom section. 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.
  5. 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
  6. There's a strange behavior with GSAP/Scrollmagic with input fields on Mobile Phones (I'm testing on Android): When I scroll down to the form, click on the first input box, the browser jumps down to the bottom of next section. Works fine on desktop.
  7. I'm trying to create a sticky scroll where paragraph appears as user scrolls down. The timeline and scrollmagic both work, but once I try to pass GSAP timeline into Scrollmagic's setTween, it breaks. You can see I commented the line of code out // .setTween(this.tl) **This is a React Project**
  8. I ended up taking all z-indexes out of play, even on subnav ( since a negative z-index limited me to a lot of functionality on that element) and positioned it absolute and animating visibility and height which achieved the effect I was looking for. GSAP is amazing! https://codepen.io/ericnguyen23/pen/rXBgNR?editors=0110
  9. 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!
  10. 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? https://codepen.io/ericnguyen23/pen/rXBgNR
  11. I'm back! I've edited/updated my codepen since I'm developing a React menu: https://codepen.io/ericnguyen23/pen/rXBgNR So far, I've got the timeline to run (onLoad). Now how do I call it on mouseover and mouseleave? I've setup the mouseenter and mouseleave event handlers, but not sure how I'd go about calling the timeline.
  12. 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.
  13. I'm working on a "mega menu" type dropdown menu and currently just using CSS transition, triggered by JS mouseenter event. I eventually want to make it drop down. Is it possible to create the drop-down animation via Greensock as a timeline, then calling that timeline on mouseenter?
  14. Oh sweet, thanks. I had the overflow-x but within the containing div and not body.
  15. I'm attempting to animate images from outside viewport/browser in (sort of like an image carousel), but it creates extra space to the right. Anyone know how to animate similarly w/o that space? I tried overflow-x: hidden but that didn't do anything. thanks!
  16. @OSUblake man thanks! I noticed you had to add GSAP's progress and clear methods as well.
  17. 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. Codepen
  18. Yes, here's the codepen: https://codepen.io/ericnguyen23/pen/vwORxr
  19. 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.
  20. 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.
  21. 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 ) };
  22. I prefer using class components myself when implementing GSAP timeline and ScrollMagic however this is an existing component that (w/o going into too much detail) cannot be changed to a class component.
  23. 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?