omarel Posted March 14, 2022 Share Posted March 14, 2022 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 More sharing options...
OSUblake Posted March 14, 2022 Share Posted March 14, 2022 Hi omarel, That's what matchMedia is for 😉 https://greensock.com/docs/v3/Plugins/ScrollTrigger/static.matchMedia() Link to comment Share on other sites More sharing options...
omarel Posted March 14, 2022 Author Share Posted March 14, 2022 Got you. I don’t believe our issue is with media sizing but more so getting the timeline to stop and reset itself and just go away on mobile and can come back on desktop Link to comment Share on other sites More sharing options...
OSUblake Posted March 14, 2022 Share Posted March 14, 2022 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. Link to comment Share on other sites More sharing options...
omarel Posted March 14, 2022 Author Share Posted March 14, 2022 👌🏼 if these do all that I’ll dig into the docs and be back. Link to comment Share on other sites More sharing options...
omarel Posted March 15, 2022 Author Share Posted March 15, 2022 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 More sharing options...
GreenSock Posted March 15, 2022 Share Posted March 15, 2022 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 Link to comment Share on other sites More sharing options...
omarel Posted March 15, 2022 Author Share Posted March 15, 2022 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 Link to comment Share on other sites More sharing options...
OSUblake Posted March 15, 2022 Share Posted March 15, 2022 Did you do this? 23 hours ago, OSUblake said: 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. Link to comment Share on other sites More sharing options...
omarel Posted March 15, 2022 Author Share Posted March 15, 2022 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! 1 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now