Jump to content


  • Posts

  • Joined

  • Last visited


8 Newbie

Recent Profile Visitors

The recent visitors block is disabled and is not being shown to other users.

  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.