ScrollTrigger feature request: multiple "start" options

[gmullinix]

Would it be possible to add a feature to Scrolltrigger to support multiple start values?

 

Here's the use case: I have an element with a start value of "top 40%". However it's a short div located near the end of the page. On certain mobile devices, the top of the div never reaches the 40% mark, so the Scrolltrigger never fires. If I could pass in a second start value of "bottom bottom" as backup, then I know the tween will always fire regardless of the screen size.

 

I know a workaround is to set up two ST's with different start values using matchMedia, but was hoping for a simpler solution.

 

Possible way it could look, passing in an array of values:

 

gsap.from("#el", {

    scrollTrigger: {

        trigger: "#el",

        start: ["top 40%", "bottom bottom"]

    },

    y: 200

});

[mvaneijgen]

Hi @gmullinix 

 

1 hour ago, gmullinix said:

I know a workaround is to set up two ST's with different start values using matchMedia, but was hoping for a simpler solution.

I think this is the most simple solution, have you seen the gsap.matchMedia() https://gsap.com/docs/v3/GSAP/gsap.matchMedia()/ Check out this demo. 

 

See the Pen KKoMpMv?editors=0010 by GreenSock (@GreenSock) on CodePen

 

Next to that, did you know you can now use clamp() in your start values, check out the fowling video! Hope it helps and happy tweening! 

 

 

[GreenSock]

Yep, I think @mvaneijgen is right - the existing API should allow you to accomplish this, but if you're struggling please just post a minimal demo and we'd be happy to offer some advice once we see it in context. Might a simple "clamp()" solve things for you? 

 

I'd be reluctant to have an API where you can define multiple start values like that because it seems like it could lend itself to confusion. Logically, it's impossible to have multiple start values but you seem to be proposing that it'd only use the 2nd one if the first one is beyond the edges of the scrollable area...is that right? 

 

Anyway, once we see a minimal demo I'm sure it'll become more clear to us (if you still need help). 

[gmullinix]

Got this working for two different scenarios I often run into. I'm happy with the solve for #1, but would appreciate some eyes on my solve for #2 

 

Scenario #1 ---------------------

Problem: Div height changes because of media query

Solution: Swap start value at breakpoint using MatchMedia

 

In this example, the pages are full height above 769px but swap to height: auto for mobile. Since there is a clear pixel value for the breakpoint, I used Match Media contexts to change my start value. Seems pretty straightforward and easy to code. 👍🏻

 

See the Pen LYqNmJJ by gem0303 (@gem0303) on CodePen

 

Scenario #2 ---------------------

Problem: Div height changes because translated text is different lengths

Solution: Start function checks the height of the div and returns different start point if div is too short

 

Some context on this example: we create content that is translated into 20+ languages. Some languages have very long translations (German, Russian) while others are quite short (symbol languages like Japanese and Korean). This means we occasionally run into short languages not triggering start values depending on layout and/or screen size. We typically avoid coding custom animations on a per-language basis because we build tons of these. 

 

In my solution, I wrote a function that checks the div height against the window height and returns a different start value if needed. Haven't tested thoroughly but seems to be working ok. Thoughts? I couldn't figure out how "clamp()" would help me in this instance (though the video linked by @mvaneijgen was excellent, thank you for including it).

 

See the Pen LYqNrxo by gem0303 (@gem0303) on CodePen

 

Quote

Logically, it's impossible to have multiple start values but you seem to be proposing that it'd only use the 2nd one if the first one is beyond the edges of the scrollable area...is that right? 

I envisioned the Scrolltrigger would be watching both of the start values and fire when it hits either/any of them. Subsequent hits would just be ignored.

[GreenSock]

Nice job creating a minimal demo! Super helpful. 💚 👏

 

Your solutions look effective to me. 👍

 

I didn't even think about someone creating a start value that's beyond the bottom of the page that they'd want clamped, but this was a great way of exposing the need for clamping there too (instead of start being clamped only against negative values). I've updated the next release to do this, and you can see it in action here: 

See the Pen VwgaqwQ?editors=0010 by GreenSock (@GreenSock) on CodePen

 

But in the meantime, your solutions look good to me. 

 

5 hours ago, gmullinix said:

I envisioned the ScrollTrigger would be watching both of the start values and fire when it hits either/any of them. Subsequent hits would just be ignored.

Oh, that couldn't work because progress must be calculated accurately (how far the current scroll position is between the start and end of each ScrollTrigger). Like imagine a scrubbed animation whose playhead would be halfway through when the scroll position is halfway between the start and end values. If you have TWO start values, how would it calculate? And what would the ScrollTrigger's "start" value resolve to? It sounds like you would want it to always be whichever is less...but what if someone else wanted it to be whichever is greater? It just gets rather messy/confusing. See what I mean?