Jump to content
Search Community

Removing inline styles from a pinned ScrollTrigger in React/Next on resize

seanom test
Moderator Tag

Go to solution Solved by GreenSock,

Recommended Posts

Hello 👋 I've got to the point where I'm struggling to work out the answer on my own so am reaching out to the experts here.

 

The problem

Using a pinned section with Scrolltrigger in a React/Next application, I would like to apply some interactions but only on the desktop. What I'm finding is that on occasion when switching from mobile to desktop views sometimes the styles applied remain on the elements, causing some missing elements. I've used the one of the ScrollTrigger examples as a base for this.

 

Steps to replicate the issue I'm seeing
Viewing the site in mobile mode quickly increase the width to desktop size ~ > 768 and then back down to mobile. The text opacity is set but is then not removed unless I refresh the page. If I do it slowly 

Alternatively if I start on mobile and then increase to desktop and scroll down the text overlaps each version.

https://4urh6t.csb.app/

 

What I'm looking to do

  • Remove the inline styles applied when on mobile, or when viewed at a minimum height
  • Retrigger the animation when going back to the desktop
    • Currently the existing ones sometimes overlap, I'm assuming it's related to the height
  • Correctly set the height of the scroll trigger
    • Setting an aspect ratio - didn't appear to work
    • I'm currently using a ref and then getting the offsetHeight
      • This causes problems when used in a UseEffect, which makes sense because of the scrollTrigger pin, but I don't fully understand
    • Using a minimum screen height can work, if I can remove the extra styles 

 

What I've tried to implement:

  • Using  gsap.matchMedia function to apply the effects only to desktop, through both conditions and media queries
    • Applying clearProps: "all"  within the gsap.matchMedia.add function.
    • This appears to be deprecated now
  • Using a resize listener event to kill the Scroll trigger with ScrollTrigger.KillAll();
  • Using SaveStyles in the older ScrollTrigger.MatchMedia
    • Aware this one is deprecated now
  • Calling ScrollTrigger.refresh in an Event listener on resize.

 

I've been reading quite a lot of the forum this week but lots of the advice appears to be for older versions. Can someone help point me in the correct location please

Here is a reduced version of the code, please let me know if it's too complicated I've tried to take out all the extra transitions and logic but it may still be a little too heavy. (I'm sorry it's using tailwind)

 

Thank you in advance for any guidance

https://codesandbox.io/s/scroll-trigger-react-panels-forked-4urh6t?file=/src/App.js

 

Edited by seanom
remove codepen link for clarity
Link to comment
Share on other sites

  • seanom changed the title to Removing inline styles from a pinned ScrollTrigger in React/Next on resize
  • Solution

Just so I'm clear, does the CodePen serve any purpose? It looks radically different than the CodeSandbox you provided. Should we just be looking at the CodeSandbox? 

 

This strikes me as a bad idea: 

useLayoutEffect(() => {
  function handleResize() {
    ScrollTrigger.refresh();
  }

  window.addEventListener("resize", handleResize);
  return () => window.removeEventListener("resize", handleResize);
}, []);

Because ScrollTrigger already has a throttled "resize" event handler internally that waits until about 200ms elapses where there are no more resize events, and then calls ScrollTrigger.refresh(). What you're doing there is VERY expensive since when you resize there are typically a ton of "resize" events dispatched by the browser, so you're doing a boatload of extra work. :)

 

I think you were overcomplicating things. Not only did you have that wasteful resize handling, but you also had a pointless small-screen matchMedia() handler that just attempted to kill all ScrollTriggers (that's already done by the desktop matchMedia when it no longer matches) and you were wrapping the entire block of code in a gsap.context() which just isn't necessary because a gsap.matchMedia() is actually a gsap.context() internally :) So I think you could simplify it to this (if I understand your goal correctly, but please keep in mind that I'm not a React expert...not even close): 

https://codesandbox.io/s/scroll-trigger-react-panels-forked-vg1wu2

 

Does that work the way you wanted? 

Link to comment
Share on other sites

Thank you Jack,
The codepen, was my initial jumping off point, I had only meant to link to it to indicate that not to embed it. (now removed for clarity)

I appreciate the guidance this is one of my first ventures into React so I'm learning lots on the go. 
I had thought the the gsap.matchMedia might include a context, but appear to have got myself caught in tangles trying to many different things. That is indeed what I was trying to accomplish. 

  • Like 1
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...