Hover not Working On Scroll Trigger Activation, and The website is also hanging up

[Pradhumn Gupta]

Hover is working only in web developer scroll then it is not working, why? Hover not Working On Scroll Trigger Activation, and The website is also hanging up

See the Pen yLZPgNR by Pradhumn-Gupta (@Pradhumn-Gupta) on CodePen

[mvaneijgen]

Hi @Pradhumn Gupta welcome to the forum!

 

Can you maybe create a minimal demo with only the part that is causing issues. At the moment we can't really debug your pen, there are over a thousand lines of CSS (CSS is really important when working with GSAP) and a hundred lines of HTML and Javascript. 

 

The things I can see at a quick glance is that one of your timelines has ScrollTrigger logic on the tweens and the other tl2 (is perfect) and has the logic on the timeline. When working with timelines ScrollTrigger can only be on the timeline!

 

// bad
var tl = gsap.timeline();
tl.to("#homewrite",{
    y:"100vh",
    scrollTrigger:{
        scrub:1,
        trigger:"#page1",
        scroller:"#main",
        // markers:true,
        start:"50% 50%",
        end:"50% 15%",
    }
})

// Good 
var tl2 = gsap.timeline({
    scrollTrigger:{
        trigger:"#page3",
        scroller:"#main",
        // markers:true,
        start:"0 0",
        end:"0 -150%",
        scrub:1,
        pin:true,

    }
});

Your pen also uses LocoScroll, which is a third party plugin that we do not provide support for. We have our own smooth scroll plugin aptly named ScrollSmoother, which works out of the box with all the GSAP plugins. 

 

Again due to that this isn't really a minimal demo I don't really know what to look at for hover? There is no mouse events in your javascript? 

[Pradhumn Gupta]

on the  page in which web developer, Creator, Designer is scrolling behind it the page is set on hover to tilt but after web development is scrolled the page is not able to tilt on hover, why? how to fix it ?

[mvaneijgen]

 

 

Seems to hover at my end. Please provide a minimal demo that clearly shows the issue and remove all unnecessary code. Hover with CSS is not a GSAP problem, so that is not really we can help with. 

 

And keep in mind You should never apply CSS transitions to anything that JavaScript is animating because not only is it horrible for performance, but it'll prolong all the effects because whenever JavaScript updates a value (which GSAP typically does 60 times per second), the CSS transitions interrupt and say "NOPE! I won't allow that value to be changed right now...instead, I'm gonna slowly make it change over time". So it disrupts things, adds a bunch of load to the CPU because you've now got CSS and JS both fighting over the same properties, but let's say you've got a 1-second tween and the CSS transitions are set to take 1000ms...that means what you intended to take 1 second will actually take 2 seconds to complete. 

[Rodrigo]

Hi,

 

If you mean that hover doesn't work when you scroll to this section while not moving the mouse:

That's totally expected. Hover effects count on mouse enter/leave events, since the mouse pointer is not moving as you scroll with the mouse wheel the result you're seeing is to be expected:

See the Pen QWYaqmd by GreenSock (@GreenSock) on CodePen

 

As you can see there is no GSAP and/o ScrollTrigger code in that demo and if you don't move the mouse as you scroll the event is not triggered.

 

The way to do this is to create some code that records the mouse position on the screen and as you scroll check if the element you want to move is actually beneath the pointer and run your animation accordingly.

 

Unfortunately that is far more custom logic than we can actually tackle in these free forums, since we don't have the time resources to provide this type of complex solutions for our users. We offer paid consulting services and you can also post in the Freelance & Jobs forums as well in order to get help there. Of course a user with time and interest in solving this could chime in, but I just want to manage expectations in that regard.

 

Good luck with your project!

Happy Tweening!