Jump to content
Search Community

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

Ivan Mocs test
Moderator Tag

Recommended Posts



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!

Link to comment
Share on other sites

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"

Screenshot 2023-02-01 052559.jpg

Link to comment
Share on other sites

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).

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...