Jump to content


  • Posts

  • Joined

  • Last visited

Everything posted by DownfallOfADog

  1. Thank you for your help. I'll try to see what I can use to fix the problem of React.
  2. Thanks for the help @ZachSaucier. I've made a codesanbox demo so that I can simulate the code I wrote with React js : https://codesandbox.io/s/dazzling-vaughan-972oc There's an error in my sideMenu.js in the components folder that says : gsap is not defined with 4 console messages saying : DevTools failed to parse SourceMap: chrome-extension://gighmmpiobklfepjocnamgkkbiglidom/include.preload.js.map Where do I define gsap? It doesnt do anything if I import it like this : import "gsap"; or this : import gsap from "gsap"; and it doesnt work if I replace gsap.to with TweenMax.to
  3. Hello, I'm doing something in React.js and I don't know why the scrollTo doesn't work. Basically what I'm trying to do is something similar to what Mikel did : https://codepen.io/e1668058/pen/XWbBGPz?editors=0010 but without the buttons. I'm just trying to figure out how to do it just with the mousescroll. just a little extra, I've also thought of adding an onStart and onComplete for the TweenMax so that when it starts I lock the mousewheel with : window.addEventListener("wheel", function(e){e.preventDefault();}, {passive: false} ); and when it completes I unlock the mouse with passive: true. Thank you. Heres my code pen.
  4. Thank you @ZachSaucier and @mikel. It wasn't impossible afterall. Thanks to both of you, I managed to make something like this : https://codepen.io/e1668058/pen/oNXbrJd?editors=1010 I didn't include the onStart inside the timeline because for some reason React gives me an error. And I'm using timelineMax instead of timelineLite because I read that timelineMax offers features like repeat and yoyo.
  5. Oh that was exactly what I had before I decided to work with gsap to try to make it return smoothly directly after the mouse is out. Seems like its impossible, but I will do my best to try to make it happen. Right now my current menu is a mix of your solution but it will continuously try to find the offsetTop with getBoundingClientRect() in react. I'll post an update if I happen to find a convenient or inconvenient solution. But help will still be appreciated. Thank you.
  6. Thank you for your response @mikel. Is there a way to directly make the div go back in place as soon as the mouse leaves?
  7. Thank you for your reply @ZachSaucier but Im trying to do something like this : https://codepen.io/MarioDesigns/pen/woJgeo for when I hover my mouse on the menu it will keep floating up & down. And when I back out I just want it to go back to its original position without the menu repeating the animation. Sorry if I wasnt clear.
  8. Hello, I have a problem where when I hover out it repeats the animation the numbers of times it has played over the time the mouse has been on it. If I hover out before it finishes his first animation iteration, then it will go back to normal without a problem. However, if I hover it for more than 2 seconds for it complete at least 2 iterations counts, then the reverse will also repeat it 2 times before it goes back to its initial position. Basically, I want it to float continuously when I hover it, and I want it to go back down once I hover out of it. Is there a way for it to just smoothly go back to its initial position? Thank you in advance.