ScrollSmoother problem when hovering an element that expands it's height.

[Alphamark]

I have an element that has a specific min and max height, on hover on that same element, i calculate heights on the children of that element and expanding it with those heights. But scroll smoother makes it kinda jump a little, like the height animation is playing and reversing at the same time, and it doesn't work, when i disable scroll smoother everything works as it should.

 

P.S :The problem doesn't happen everytime

See the Pen zYJBZpQ by Bobiman (@Bobiman) on CodePen

[Rodrigo]

Hi,

 

 I’m testing your codepen on an iPad and can’t seem to reproduce the problem.

 

Could you use the beta files Jack provided in this thread and tell us how that works 

 

Finally instead of calculating heights you could take the flip plugin for a spin

https://greensock.com/docs/v3/Plugins/Flip

 

Hopefully this helps 

Happy Tweening!

[Alphamark]

Can you please test it on Chrome, when I hover on the element, before it is fully expanded, it jumps back a little and than continues to expand fully, sometimes it happens a few times in a row until it fully expands, I don't know how to explain this in a better way, sorry 😕

[Alphamark]

I've updated my codepen, now I think you will see the problem @Rodrigo

[Rodrigo]

Hi,

 

The issue is basically in this conditional logic block:

container.addEventListener("mouseenter", () => {
  showParagraph.timeScale(1).play();

  if (infoHeight > imagesHeight) {
    container.style.maxHeight = "" + (infoHeight + 80) + "px";
    container.style.minHeight = "" + (infoHeight + 80) + "px";
  } else {
    container.style.minHeight = "" + (imagesHeight + 80) + "px";
    container.style.maxHeight = "" + (imagesHeight + 80) + "px";
  }
});

Once you comment this out the issue goes away, with or without ScrollSmoother. Here is a fork of your codepen example with the latest beta versions of the GSAP Core, ScrollTrigger and ScrollSmoother:

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

 

For some reason the mouse enter event triggers repeatedly with ScrollSmoother 🤷‍♂️. As I mentioned in my previous post, I'd strongly recommend you to test the Flip plugin for this.

 

Hopefully this helps.

Happy Tweening!

[GreenSock]

7 hours ago, Rodrigo said:

For some reason the mouse enter event triggers repeatedly with ScrollSmoother 🤷‍♂️. As I mentioned in my previous post, I'd strongly recommend you to test the Flip plugin for this.

There was a major browser bug in iOS Safari that made the page entirely non-scrollable when setting the scrollTop to 0 which is necessary for a refresh(). Your content was resizing which automatically triggered the smoother to refresh(). To work around that browser bug, we had to set pointer-events: none temporarily, just when we set scrollTop to 0, and then we revert it but apparently when re-enabling them, that was firing the mouseenter for you (again). In the next release, I've changed the workaround to set the position to absolute and then back to fixed instead, so the pointer events shouldn't fire again. 

 

By the way, if you don't want ScrollSmoother to automatically do a refresh() when the content resizes, you can set autoResize: false in the config object (undocumented thus far because I wasn't sure it was worth leaving in). Generally that's not desirable, though, because if your resizing pushes triggers further down on the page, you'd want the start/end values to get recalculated.

[Alphamark]

Thank you both for the replies

@Rodrigo I haven't used flip before, so I don't know the way around it yet, so can you help me a little, thank you beforehand.
How am I actually supposed to do this with flip, I tried, but it doesn't work.

P.S I watched the video in the Flip docs, you guys are freaking awesome. What flip can do it's amazing.

[Rodrigo]

Hi,

 

It should be as simple as this:

const doFlip = (target) => {
  const state = Flip.getState(target);
  target.classList.toggle("hover");
  Flip.from(state);
};

containers.forEach((container) => {
  /*
  	...
  */

  container.addEventListener("mouseenter", () => {
    showParagraph.timeScale(1).play();
    doFlip(container);
  });

  container.addEventListener("mouseleave", () => {
    showParagraph.timeScale(3).reverse();
    doFlip(container);
  });
});

I updated the codepen so you can see it in action:

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

 

Is worth noticing that I didn't touch the animation of the images and placeholders, so you'll have to tinker with that in order to get the sequence to work the way you want. Also I removed all the transition all properties from the CSS, in this regard I strongly recommend you to not use transition all in your CSS since any property that gets changed will be animated and also if you animate a property with GSAP the transition all property will interfere with any GSAP instance you have on that element and create quite a problem.

 

Hopefully this helps.

Happy Tweening!

[Alphamark]

I saw, thank you.

I tried your version but it was still jumping like i described, I think it's impossible to make it like I want , on hover, it'll have to be on click, when i do it on click it doesn't have the problem so I guess i'll change it.

 

Thank you a lot.  

 

 

I did it with a click event and it works fine.

Edited February 24, 2023 by Bobiman13
Fixed It