Active timeline change

[TypicalUser1312]

Hello,

Is it possible to change the animations depending on window width without refreshing page ?

 

https://codesandbox.io/s/interesting-stitch-8lbwv8?file=/src/App.js

[Rodrigo]

Hi,

 

Hi there is an issue in your code. You are setting your GSAP Context instances inside your conditional logic, but keep in mind that returning a function should not have the effect of cleaning up anything when the breakpoint you define is passed. In such cases, where you need a GSAP Context instance and update or add GSAP instances to it based on conditions, is better to create a variable outside the conditional logic scope and cleanup in the useEffect returned function at the end, not in the conditional logic.

 

But in this case GSAP Match Media is a far better option since it actually is a GSAP Context wrapper, so you don't have to worry about cleanups when the breakpoint is passed in either direction:

https://greensock.com/docs/v3/GSAP/gsap.matchMedia()

 

Keep in mind that a GSAP Match Media instance has a revert method as well, so you can execute that in your component's cleanup function:

useLayoutEffect(() => {
  const mm = gsap.matchMedia(() => {}, scope); // <- Scope here
  return mm.revert(); // <- Cleanup!!
}, []); // <- No dependencies on screen width here!!

Let us know if you have more questions.

 

Happy Tweening!

[TypicalUser1312]

Can you tell me if it's ok like that ? 

https://codesandbox.io/s/elated-davinci-ylpdtl?file=/src/App.js

[Rodrigo]

Hi,

 

Keep in mind that GSAP MatchMedia is actually a wrapper for GSAP Context, so you don't have to declare both. Just use MatchMedia and you should be fine.

 

This seems to work as you intend as well and is quite simpler:

const container = useRef();
useLayoutEffect(() => {
  const mm = gsap.matchMedia();
  mm.add(
    {
      isDesktop: "(min-width: 800px)",
      isMobile: "(max-width: 799px)",
    },
    (context) => {
      const { isDesktop } = context.conditions;
      const tl = gsap.timeline({
        scrollTrigger: {
          trigger: ".container",
          scrub: 1,
          pin: true,
          start: "top top",
          markers: true,
          // end: "+=400",
        },
      });
      const target = isDesktop ? ".box1" : ".box2";
      tl.to(target, { y: 200 });
    },
    container
  );
  return () => mm.revert();
}, []);

return (
  <div>
    <div className="flex justify-center items-center h-screen w-screen bg-white"></div>
    <div
      className="container h-screen w-screen flex justify-center items-center bg-black"
      ref={container}>
      <h1 className="box1 p-4 bg-yellow-500 text-white">box1</h1>
      <h1 className="box2 ml-4 p-4 bg-green-500 text-white">box2</h1>
    </div>
    <div className="h-screen w-screen bg-white"></div>
  </div>
);

I recommend you to take a better look at MatchMedia's docs:

https://greensock.com/docs/v3/GSAP/gsap.matchMedia()

 

Hopefully this clear things up. Let us know if you have more questions.

 

Happy Tweening!

[Tommie.lehmann]

Hi there thanks for brilliant answers.. I am very new to coding so pls bear with me.. 

 

I have a similar problem but I had so many changes so I have now one container(section) for over 1000 px and one for below.. works fine with display either "none" or "flex".. To make things worse I made a codeblock in each container with GSAP timeline for appropriate animations.. however since they both have pinspacing: true, and end: +=300% due to subsequent elements - the timeline in the container not on display still puts in blank space. 

 

My question is that if I keep the layout, could I set a var to look for display=none and then kill the progress in both blocks to make it work? Or do I have to put TL1 and TL2 in the same codeblock and do the media query.. I am trying not to mess up my website of course.. hehe.. Hope someone will answer even it might be a terrible solution or weird question.. 

[GSAP Helper]

Hi there!

Apologies for the lack of response so far, but it looks like people are struggling to help with this question. Vague details like 'it's broken' or 'it doesn't work' are very difficult for people to help with. Not sure what TL1 and TL2 are (you didn't provide a minimal demo). Here are some tips that will increase your chance of getting a solid answer:
 

• A clear description of the expected result - "I am expecting the purple div to spin 360degrees"
• A clear description of the issue -  "the purple div only spins 90deg"
• A list of steps for someone else to recreate the issue - "Open the demo on mobile in IOS safari and scroll down to the grey container" 
• A minimal demo - if possible, using no frameworks, with minimal styling, only include the code that's absolutely necessary to show the issue. Please don't include your whole project. Just some colored <div> elements is great.