Hache

Hello, my subscription ended a few months ago, I was pretty sad with some GSAP issues I had and I didn't renew my license . The reason was mainly because I wanted to use it on my personal projects(public repos) and I couldn't deploy a react or nextjs project to vercel following instructions without exposing my gsap key. my environment variables weren't being read on the yarnrc. yml file so I had to hardcode the secret key in the code(having to make the repo private, so back to square one). This is another thing completely but I also had issues in Nextjs with official gsap react demos, using the useLayoutEffect hook things didn't work as expected sometimes, didn't know why, so I was wondering if there was going to be more SSR/Nextjs content. I work with react + nextjs, also plain html + css + js with vite(with github pages for this) and maybe I try some random framework here and there(vue, remix, astro, etc) and I deploy to different hostings, although mostly vercel. I would love to get back into GSAP but not if every deployment is going to be complete suffering. Cheers

Hi, I mispelled, I meant using .revert() at the end of the timeline with the .add option for timelines and even in the cleanup function of the useLayoutEffect, adding as a dependency the translation object. The animation toggles correctly and after the timeline finishes, the html goes back to normal instead of splitting each char into a div. Still, it doesn't update the translation for it. I can't make a demo right now but will try to do it tomorrow. Thanks for your reply!

I'm having a similar issue with Nextjs. I'm using SplitText and i18n so if you change the language on the page(it's a toggle), all text translates except the split text even when doing a .reverse() at the end of the timeline.

Hi thanks for the link. Cheers!

Hi, thanks for your reply! The problem is, based on the code I posted above, how do I add an eventListener that waits for load? do I wrap all that's inside the useLayoutEffect inside it? Then I assume I have to kill the ScrollTrigger and the eventlistener in the cleanup function. Thanks!

Hi, I'm having some issues still. I'm doing my animations inside a useLayoutEffect but it's triggering before my fonts load from the google cdn(testing in slow 3g connection), so it starts animating with default fonts and halfway through it loads the fonts, so it looks sketchy. Thought of just using fonts locally in my project to see if they load earlier or using a event listener but not sure how to set it up with ScrollTrigger or the correct way to do it. const el = useRef() const q = gsap.utils.selector(el) // Outer section // Formatting is not great here, sorry for that useLayoutEffect(() => { gsap.registerPlugin(SplitText) gsap.registerPlugin(ScrollTrigger) ScrollTrigger.matchMedia({ // mobile '(max-width: 639px)': function () { }, // tablet '(min-width: 640px) and (max-width:1279px)': function () { }, // desktop '(min-width: 1280px)': function () { const intro = new SplitText(q('.header'), { type: 'chars' }) const desktopTimeline = gsap .timeline({ defaults: { duration: 1.5, ease: 'power1' } }) .from(q, { autoalpha: 0, duration: 0 }) // rest of the timeline } }) return () => { ScrollTrigger.kill() } }) Another issue I have: I have another page that loads some card components. I want to create a effect like https://scrollrevealjs.org/ where the cards on viewport fade in and then the rest start appearing on scroll. I don't know how/where to setup the scrollTrigger, should I try to set the ScrollTrigger inside the card component so each card has its own ScrollTrigger or on the page that loads the cards? I tried the first, but didn't get it working. Want to use the MatchMedia example, so I can set different settings for each screensize. I would also like to do this for mobile/tablet animations, because currently mi timeline executes completely even if elements are out of viewport. For desktop it's no problem but for mobile, I would prefer to use something like the scrollrevealjs example too. I would assume all this can be done directly with the ScrollTrigger.isInViewport function I'm looking for help with the first issue and maybe recommendations for tackling the second issue, as I want to experiment a bit more with ScrollTrigger. I've set up a basic demo of the cards page and the index page, but not sure if I can throttle the network on codesandbox for the font example. https://codesandbox.io/s/eloquent-grothendieck-zttkp?file=/pages/index.js

@OSUblake Thanks for your answer. I tried importing ScrollTrigger as I have in my project and got an error trying to load the module on codesandbox(same as SplitText). Didn't know about matchMedia, I see you can use timelines inside matchMedia, tomorrow I will try to implement different timelines using this post as an example. I'll update this post If I have more issues, as I said, thanks for your help! Cheers.

Hello, I've been trying to create a codesandbox with typescript, Nextjs and tailwind but every time I get a different error so after a few hours I gave up and I'm using the nextjs + gsap template from greensock. Here I can't import the SplitText(or others like ScrollTrigger) plugin so It's commented(tried default and dist import), as it's the one giving me problems with a hook. I'm trying to use a hook to get the window size so I can trigger different timelines with animations for mobile/tablet/desktop, it's the following one: https://usehooks-ts.com/react-hook/use-window-size ( I'm using the react version, as I couldn't install typescript) When I use the hook, the SplitText doesn't display, I remove the hook and it displays correctly. Any recommendations on how to do this on nextjs using some hook like the one linked? Also in the about page, for example, Is there a way to make the box start rotating infinitely as soon as the scale animation starts? Currently it scales in then starts rotating. Also trying to make the boxes with the class scroll-item fade in from the bottom as you scroll down, will keep investigating. https://codesandbox.io/s/eloquent-grothendieck-zttkp?file=/pages/index.js Anyone has a nice demo of gsap with next? page transitions/best practices and similar examples? Thanks, appreciate the help!

Hi, is there a way to deploy to vercel using yarn? Tried the netlify way on vercel(using a env variable for my token), couldn't make it work, I get a Request failed: 403 forbidden . Thanks. Finally deployed to vercel with yarn following @Prasanna instructions on page 1. Just a tip, don't add the .yarn/releases folder to the .gitignore(add the cache though, as it's quite a few mb), as then the build will fail. Cheers!