Hover image and ScrollSmoother

[Mattrudd 52 Likes (Contributor)]

Back once again with the ill (GSAP) behaviour...

I've two issues with implementing a hover-image on scroll.

1)
I've adapted an example I found on here, tweaking the mouse enter effect by adding a timeline with specific animations.

Something gets all janky when either scrolling between hover items or leaving... the .hover-reveal__inner flicks to the scale: 0.3 size in the timeline. It's bound to be to do with my mouseleave setup but I'm lost as to the best way to fix it.

Ideally I'd have a separate  mouseleave timeline with slightly different animations to enter... appreciate it's not as straightforward as it may initially seem  now I've tried.
I read the thread about the complexity here, but struggled to apply those ideas to my setup, mainly down to having the quickSetter in the mix (which is mad clever, naturally!) for cursor follow.

2)
Adding ScrollSmoother means the .hover-image (position: fixed) doesn't behave the same way... tried moving this outside the scroll-wrapper but it's not that simple... unsure as to the best approach for this? Likely needs a clever way of negotiating with the ScrollSmoother transforms.


Thanks loads 👊

See the Pen dygLXPe?editors=1111 by matt-rudd (@matt-rudd) on CodePen

[Cassie 5,650 Likes (Superhero)]

Heya!

 

So the majority of the issues here lie in scoping

ScrollSmoother isn't the problem here. If you pop things out of the containers and into the body at the moment the code's gonna break because you're targeting stuff inside the container elements with el.querySelector, so that would need to be updated to reflect the new DOM structure.

// loop around and target elements within each container
gsap.utils.toArray(".container").forEach((el) => {
  let image = el.querySelector(".hover-reveal")
})

You're also kinda mixing and matching your scoping. You have some stuff targeting *just* the elements in that container, but then also a few lines down you have some GSAP tweens which are globally targeting by class.

scaleTl.fromTo( ".hover-reveal__inner",{...})

You could simplify this quite a bit by just making one mouse follower, also gonna be way better to scale. I assume you've made multiple because you want a different image on each section, but you can just do that dynamically. Saves having a bunch of different elements.

Here's a little adjustment, hope it helps

See the Pen GRYLMzX?editors=0011 by GreenSock (@GreenSock) on CodePen

 

[Mattrudd 52 Likes (Contributor)]

@Cassie absolutely spot on thank you so much mate! 

 

Performance on good ol' Safari isn't exactly stellar even without my usual 8001 open tabs... but I'm guessing that may be just a Codepen iframe thing.

Famous last words but this was pretty much the last thing to sort on my portfolio project framework, so extra grateful points to you.


Have a great bank holiday! 😎