omarel
Content Type
Profiles
Forums
Store
Blog
Product
Showcase
FAQ
Downloads
Posts posted by omarel
-
-
Well DOM manipulations and other side effects in react should be done inside the useEffect(). Perhaps that’s the core of the error with gsap manipulations happening outside useEffect with React…
-
I do appreciate the fix. Just a note: I did test adding properties to the body tag but it doesn't throw any error though. So perhaps worth looking into the cause of the console log error with registerPlugin at the top:
useEffect(() => { //testing adding css to body - no console log errors document.body.classList.add("test-class"); document.body.style.color = "red"; //moving registerplugin to useeffect fixes console log error gsap.registerPlugin(ScrollTrigger); let ctx = gsap.context(() => { gsap.fromTo( h1Ref.current, { opacity: 0, }, { opacity: 1, duration: 3, } ); }); return () => ctx.revert(); }, []);
-
59 minutes ago, GreenSock said:
Just move your gsap.registerPlugin(ScrollTrigger) into the useEffect()/useLayoutEffect() and you should be fine. It is indeed annoying that Next.js throws that error. It's not a problem with GSAP/ScrollTrigger.
Does that solve things for you?
That did remove that error, but I haven't tested if scroll trigger actually works when the registerPlugin placed in the useEffect as I've never placed it there. Can I assume so?
-
The error happens only with the scroll trigger import not gsap. I didn’t know it was possible to place the plug-in registration in useEffect.
I’ll try that and report back on the thread.
-
I guess you haven't seen it yet. Updated the link once again. I was able to access it logged out:
https://codesandbox.io/p/github/oelbaga/nexts13.4_gsap_scrolltrigger_bug/main
"use client"; import { useEffect, useRef, useState } from "react"; import Image from "next/image"; import styles from "./page.module.css"; import { gsap } from "gsap"; //importing gsap scrolltrigger throws console log error import { ScrollTrigger } from "gsap/ScrollTrigger"; gsap.registerPlugin(ScrollTrigger); export default function Home() { const tl = useRef(); const h1Ref = useRef(); useEffect(() => { let ctx = gsap.context(() => { gsap.fromTo( h1Ref.current, { opacity: 0, }, { opacity: 1, duration: 1, } ); }); return () => ctx.revert(); }, []); return ( <main className={styles.main}> <h1 ref={h1Ref}>Hello World</h1> </main> ); }
Scroll Trigger import error:
Warning: Extra attributes from the server: style
-
I updated the codesandbox share link. It should work now. I mistakenly placed in the codepen area.
This is a client component, not server component.
-
Hi I'm testing using scrollTrigger in NextJS 13.4 app directory where all components are server side first but this component is specified as a client component. For some reason, the simple importing of ScrollTrigger has a significant console log error. Whenever I remove the ScrollTrigger import the error goes away. Can we look into this?
Sandbox: CodeSandbox
Test by looking at the console and hide and unhide the import:
import { ScrollTrigger } from "gsap/ScrollTrigger";
gsap.registerPlugin(ScrollTrigger);Produces the console log error:
Warning Extra attributes from the server: style
-
The repo above was done in Next 12. So the first step I would do is take the repo above clone it on Next 13 as is and see if it works. Then if it does you know it works in 13 then you can move into debugging your own project.
-
1
-
-
There shouldn’t be any difference in using gsap with Next 13 app directory as far as I’m aware. The only thing is Next 13’s app directory uses React server components by default until you mark a component as client. You can’t use gsap in server components since server components do not allow useEffect() which gsap with React relies on. So use it in the components marked as client. (Also worth noting Next 13’s app directory is still in beta)
-
2
-
-
Firstly thank you Greensock for taking initiative on this! Just a question regarding this new feature to solve the double render issues:
Is there any difference between the new context and @Cassie original solution in this thread to use immediate render false and .kill() on the animations. I love that we now have a more specific way to solve for this but just wondering if there’s any more differences with using .context() and .kill()? Because I notice with context you have to wrap all your gsap code in it whereas with .kill() you can just return it in the useEffect hook itself directly.
-
On 4/6/2022 at 8:40 AM, Cassie said:
You can very much already use GSAP with React 18, again, this isn't a GSAP bug, this is just React calling the effect twice.
Of course, but with React 18 running into these issues threw us off. Maybe just bad timing. 3.10 and React 18 nearly on the same day!
I realize there are all these conditionals to go around mentioned above but simply not worth it for a basic .from fade in I can't speak for all devs but we want it to be simple as gsap is meant to be used. I did a fade in test with react 18 using Framer Motion and no issues. (updated the demo with framer motion) You are correct .to didn't give us an issue I updated the demo. I think the reliability of knowing either .from or .to works the same is important though.
Certainly gsap is amazing and a lot to offer, I think Greensock should consider evaluating mitigating some of these issues thoigh. We will still use GSAP and see if we run into too many more issues with React 18. Ive already seen a few with ScrollSmoother I'll use other threads for but still testing.
Dan did mention some potential workarounds for the GSAP API such as below.
On 4/5/2022 at 2:58 PM, gaearon said:I wonder if there is some other way to call GSAP API in a way that the last call "wins" — i.e., express it as synchronization?
Thanks again. I really do love GSAP and what it has to offer. We'll figure it all out and work around what we can.
-
1
-
-
Thank you @GreenSock. If this does become part of the map to smooth out double calls I would love to look out for a future release or documentation. We would love to use GSAP with React 18
@gaearon I suppose this is more of a react question but related to the gsap implementation. Is the double invoking issue in the demo related to reactstrictmode being on or the keep alive feature.
If reactstrictmode, the docs say reactstrictmode only runs in development. So can I understand if we technically ship an app to production this double invoking in the initial demo would not occur within the React app? Wont be realistic way to debug animations in development, but am curious. https://codesandbox.io/s/proud-dawn-uic35x
Also, can we assume in React 18 that any useeffect in our demos even when called (with an empty dependency array) can now run more than once and is this tied to using ref?
-
1
-
-
@OSUblake I don’t think the issue is happening with only .from. I believe more tweens have the issue if I play with it more. I’ve seen it with .to I can create some demos.
I did think @Cassie solution was pretty darn elegant while keeping reactstrictmode on and thank you @gaearon for all the wonderful specifics of exactly what's happening!
It does seem like a more organic fix from Greensock is warranted in due time with some more analysis so that we don’t have to do all these conditionals. and some analysis on why some tweens get affected and others don’t with React 18.
We just released a project with React 17 and gsap and didn’t see any of these issues.
I’m so excited about the latest gsap 3.10 release and appreciate the hard work! I just so happened to see this while playing witb the latest 3.10 gsap release on the latest React because we always create new apps with the latest versions of react.
-
2
-
-
2 hours ago, Cassie said:
Ok -
With strict mode, if you do a cleanup, useuseLayoutEffectand addimmediateRender:falseon your from tweens it works.
https://codesandbox.io/s/eloquent-cloud-56ghy5?file=/src/App.js
useLayoutEffect(() => { let from = gsap.from(elem0.current, { rotation: 360, immediateRender: false }); let to = gsap.to(elem0.current, { opacity: 0, delay: 1 }); return () => { from.kill(); to.kill(); }; });
Ok wow! Thank you.
This seems like it really needs a clear write up in the Greensock docs.
The gsap animation does break when reactStrictMode is on in plain React and when used with NextJS (tested)
Turning reactStrictMode off and keeping gsap syntax as is works or leaving reactStrictMode on with your solution which I do appreciate!! but does feel like it will become cumbersome to deal with as tweens grow but I suppose it's the only way.
Hoping for some more weigh-ins on potential solutions, but thank you!
-
2
-
-
I was going bananas with this yesterday reviewing my syntax over and over. That the simplest gsap tween wasn’t working. The same issue is faced with autoAlpha and I don’t know what else at this point.
Right the next major version of React: 18 has been released a few days ago. Im not sure how it breaks gsap if so but that would be quite disappointing.
-
I've been running into a lot of issues using .from and .to with opacity tweens with React so I did a simple example to demonstrate. .from seems to just stop before the full tween when used in react and .to doesn't animate.
Opacity Tween stops in React (You can switch .from to .to and still no dice)
https://codesandbox.io/s/proud-dawn-uic35x
Same tween works in Vanilla - CodePen
Solution:
This thread now addresses a larger issue between first render animations and React 18's useEffect empty dependency array's new "double" render in development mode - so I wanted to point to the specific solution by @Cassie to the original question as it does solve the issue.
-
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
-
-
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
-
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
-
👌🏼 if these do all that I’ll dig into the docs and be back.
-
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
-
10 hours ago, OSUblake said:
NextJS does not support ES Modules so you'll need to use the UMD files located in the dist folder.
import { ScrollTrigger } from "gsap/dist/ScrollTrigger"
Thank you! That worked.
-
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> </> ); }
-
I'm trying to setup a Scrolltrigger demo in React/NextJs to get some assistance on the forums, but ScrollTrigger doesn't seem to even load on CodeSandbox using CodeSandbox's NextJs template:
Per the Greensock docs for CodeSandbox I installed gsap and gsap-trial, but I keep getting this error on CodeSandbox
SyntaxError: Unexpected token 'export'
Please see here:
https://codesandbox.io/s/black-tdd-rncum0?file=/components/bigphoto.js
Scroll Trigger Bug in Nextjs 13.4 App Directory client component - Warning Extra attributes from the server: style
in GSAP
Posted
Right, trying to access the DOM outside of useEffect could throw errors because the DOM may not be loaded so I can't test if doing DOM manipulations outside of useEffect causes the same error from above. Ultimately I haven't been able to reproduce the same error from above with the Scroll Trigger registerPlugin outside of useEffect, but the error is resolved with your suggestion either way!