Refresh on resize of scrollTrigger from to values

[tobihardatwork]

Hey folks,

I'm currently stuck on an implementation detail with the scrollTrigger. 

What I want to do:
1. Text size decreases when scrolling down, and increases when scrolling up.
2. Text size start and end values depend on viewport width (mobile, tablet ( from 768px), desktop (from 1440px))
3. Text size (initial and end size) gets recalculated and refreshed when viewport size changes and goes from one viewport zone into another (for ex. desktop -> tablet)

What I have:
1. Works
2. Works
3. Does not work. I tried to implement this functionality with a combination of
- { fontSize: () => initialFontSize }
- invalidateOnRefresh: true
- window.addEventListener("resize", function () { ...   ScrollTrigger.refresh();   });

I've tried various versions of this combination but did not succeed. I am grateful for any hints :)
I tried to simplify it and put it in a codepen (attached). 

Tobi

See the Pen oNJwzwp by pinkpantheratwork (@pinkpantheratwork) on CodePen

[mvaneijgen]

Hi @tobihardatwork welcome to the forum!

 

Instead of rolling your own have you seen https://greensock.com/docs/v3/GSAP/gsap.matchMedia() build for GSAP and works perfectly with ScrollTrigger!

[tobihardatwork]

Hi @mvaneijgen thanks for your nice and prompt answer!
The matchMedia() looks promising

Update: The first implementation looks good. Will have to make more adjustments to see if it will work in the bigger context and the edge cases. Thanks again!

Update2: Works like a charm Thanks @mvaneijgen!