Jump to content
Search Community

How to disable/reset all props for GSAP timline on Mobile sizes in React component

omarel test
Moderator Tag

Recommended Posts

I have a gsap timeline in a React component triggered by ScrollTrigger. I'd like to simply reset the animation, clear all inline styles and stop it when resized for mobile and then have it come back when resized to desktop.

 

I don't have any issues with resizing and catching the width, but everything I've tried doesn't work to reset the timeline. I've tried:

  • tl.current.kill,
  • tl.current.set(element, {clearProps: 'all'}), 
  • tl.current.disable and also just getting errors that the object is undefined.

 

I would appreciate any help on how to adjust GSAP when it gets to these smaller dimensions. Thank you so much!!

 

Working example here:

https://codesandbox.io/s/black-tdd-rncum0?file=/components/bigphoto.js 

 

Full Code of component here:

import { useEffect, useRef } from "react";
import styles from "./bigphoto.module.scss";
import { gsap } from "gsap";
import { ScrollTrigger } from "gsap/dist/ScrollTrigger";
gsap.registerPlugin(ScrollTrigger);

export default function Bigphoto() {
  const section = useRef();
  const tl = useRef();

  useEffect(() => {
    //gsap mobile adjustments

    //gsap timeline
    tl.current = gsap.timeline();
    tl.current.fromTo(
      section.current,
      {
        scale: 2,
        y: 300,
        duration: 1
      },
      {
        scale: 1,
        y: 0,
        scrollTrigger: {
          trigger: section.current,
          start: "top 0%",
          end: "+=1400",
          scrub: true,
          pin: true,
          toggleActions: "play none none reverse"
        }
      }
    );

    let browserWidth = window.innerWidth;
    window.addEventListener("resize", handleResize);
    function handleResize() {
      browserWidth = window.innerWidth;
      console.log("resized to: ", browserWidth);
      if (browserWidth < 768) {
        //do gsap mobile
        //all kill and disable throw errors.
        // tl.current.kill();
        // tl.scrollTrigger.kill();
      }
    }

    return () => {
      // all kill and disable throw errors.
      // tl.current.kill();
      // tl.scrollTrigger.kill();
    };
  }, []);

  return (
    <>
      <div className={styles.section} ref={section}>
        <div className={`${styles.photo}`}>
          <img
            src={`Img__URL`}
            alt=""
          />
        </div>
      </div>
    </>
  );
}

 

Link to comment
Share on other sites

8 hours ago, OSUblake said:

That's what matchMedia does. Give it a shot, and if you run into any problems, just update your Codesandbox.

 

You may also need to use saveStyles to make sure inline styles get reverted, and to remove the matchMedia in your unmount function you can use clearMatchMedia.

 

 

Just tested with a simple MatchMedia. I noticed it worked in Chrome, but it doesn't work in Safari. Is there something I'm missing?

 

If you scroll down, the photo section would scale down and pin for a few pixels.

https://codesandbox.io/s/black-tdd-rncum0?file=/components/bigphoto.js

 

 

Link to comment
Share on other sites

9 hours ago, GreenSock said:

I think it's because you have a typo: 

// BAD
"(min-width:500px": function() {...

// GOOD
"(min-width:500px)": function() {...

You're missing a ")" at the end :)

 

Silly mistake so this takes me back to my original question:

 

How to truly reset the animation on mobile for scaling and pinning. In this demo, if you start on the sclae down and pinning animation and then resize to the mobile the animation does stop, but all the styles are still off and aren't reset, the image is overly scaled still and still position: fixed (pinned) on top of the third text section.

 

https://codesandbox.io/s/black-tdd-rncum0?file=/components/bigphoto.js

 

Here's a screenshot of starting mobile,

http://www.giphy.com/gifs/80JsEd31CRinNVCYcr

 

Then starting at desktop and resizing back to mobile:

http://www.giphy.com/gifs/nCOUiVTjuU5l7PUHRZ

 

 

 

Mar-15-2022 09-30-30.gif

Link to comment
Share on other sites

Ah I thought matchMedia destroys and resets everything by default, but now I realize it doesn't remove inline styles gsap adds.

 

Yup, saveStyles did the trick and I updated the demo as well. Thank you!

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