[Slide with ScrollTo doesnt work]

Thank you for your help. I'll try to see what I can use to fix the problem of React.  

[Slide with ScrollTo doesnt work]

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

 

[Slide with ScrollTo doesnt work]

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 : 

See the Pen XWbBGPz?editors=0010 by e1668058 (@e1668058) on CodePen

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.

See the Pen XWbxXGx by e1668058 (@e1668058) on CodePen

[Making reverse not repeat]

Thank you @ZachSaucier and @mikel.

It wasn't impossible afterall.

 

Thanks to both of you,  I managed to make something like this : 

See the Pen oNXbrJd?editors=1010 by e1668058 (@e1668058) on CodePen

 

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.

 

[Making reverse not repeat]

14 hours ago, mikel said:

Hey @DownfallOfADog,

 

This could be an option

 

 

 

 

Happy tweening ...

Mikel

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.

[Making reverse not repeat]

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?

[Making reverse not repeat]

Thank you for your reply @ZachSaucier  but Im trying to do something like this : 

See the Pen woJgeo by MarioDesigns (@MarioDesigns) on CodePen

 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.  

 

[Making reverse not repeat]

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.

See the Pen Exjjwdm?editors=1010 by e1668058 (@e1668058) on CodePen