zoom style on body, calculating scrolltrigger start and end points wrong

[fonveton]

I'm using zoom style for some reasons and while using it I'm getting wrong start/end locations from scrollTrigger. I tried calculating everythings to solve this issue and for last hope I'm writing here. Is there a way to use scrollTrigger and zoom right way?

 

See the Pen BavPeep by manidar (@manidar) on CodePen

[mvaneijgen]

Hi @fonveton, 

 

I don't see any of the code you describe in your pen. I've also never heard of "zoom style", I know there is scale: in CSS, but not zoom. 

 

That said if your markers are off that probably means your animating your trigger element eg what you use as the trigger: myElement, is also what you're animating with gsap.to(myElement, {...}), these two can't be the same element otherwise the markers will always be off!

 

Hope it helps and happy tweening! 

[fonveton]

Zoom: https://developer.mozilla.org/en-US/docs/Web/CSS/zoom

 

I created a simplified version of my project to explain the issue. It's not the exactly the same code.

I don't get why animating element and trigger can't be same, If I'm not changing the element' position. I'm using it this way all the time without any problem.

[Rodrigo]

 

 

Hi,

 

As the spec says I wouldn't use zoom in any production site if I was you. That being said the MDN page states:

Quote

However, unlike CSS Transforms, zoom affects the layout size of the element.

 

That means that the entire layout of the document is being affected which changes the height of the document once the animation is completed. In this demo you can see the lower spacer section being pushed down because of that:

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

 

So every ScrollTrigger instance created after that will be affected since those calculations will have an offset created by the zoom level and the height of the document being updated because of it. What you could do is use an onLeave callback in order to call ScrollTrigger.refresh() only after the first run:

let firstRun = true;

gsap.to(".box", {
  zoom: 1.5,
  scrollTrigger: {
    trigger: ".box",
    start: "top center",
    end: "bottom center",
    scrub: true,
    onLeave: () => {
      if(firstRun) {
        firstRun = false;
        ScrollTrigger.refresh();
      }
    },
    markers: true,
  },
});

 

Hopefully this helps.

Happy Tweening!