Its possible to disable Transform while out off viewport on multiple element

[Ivan Mocs]

its possible to disable the transform that runs outside the viewport?

if seen from the inspector when element 1 has out of viewport "transform" is still running, I want it to be paused when out of viewport.

See the Pen oNMajzG by adeivan (@adeivan) on CodePen

[Rodrigo]

Hi,

 

This is not related to some error or if it's possible or not. Is just the way that particular example is set up. The boxes are below the viewport and they're stacked one on top of the other (comment out the GSAP code and scroll down in order to see it). The whole idea of the animation is to move them at different speeds in order to create some separation between them, nothing more. That's why you're seeing the transform values being updated when they're not in the viewport:

gsap.to("[data-speed]", {
  y: (i, el) => (1 - parseFloat(el.getAttribute("data-speed"))) * ScrollTrigger.maxScroll(window) ,
  ease: "none",
  scrollTrigger: {
    start: 0,
    end: "max",
    invalidateOnRefresh: true,
    markers: true,
    scrub: 0,
  }
});

 

If you want to change that change the trigger element in the ScrollTrigger configuration and also the start and end points (especially the end point).

 

Happy Tweening!

[Ivan Mocs]

I'm confused about how to determine the start and height, I want each element that is selected by [data-scroll] to have its own end, I mean when one element exits the viewport first, the transform movement stops.

See the Pen OJwBomP by adeivan (@adeivan) on CodePen

When viewed from the inspector on the element with data-scroll="0.75", the transform value is still changing even though the position is out of the viewport area.

I've tried to set the "end" but when one element exits the viewport, the other element's transform also stops.

 

How to make each element have its own "start" and "end"

[GreenSock]

That's a much more complicated thing to do - you must do the calculations to figure out when that element will intersect with the top/bottom of the viewport at that given speed, and set the start/end accordingly. This is what ScrollSmoother's data-speed and data-lag effects do. That CodePen demo was just intended to be a very simplistic way of having things move at a particular speed based on the scroll position. To calculate all the intersection points is beyond the help we can provide in these forums for free, sorry.  You could consider just using ScrollSmoother's effects, of course  (but that's a members-only plugin).