Search the Community

Hi GSAP I'm facing a new issue to make the scrolltrigger working properly in next js 13.4 when switch between pages, I have done 2 pages with gsap and scrolltrigger in next js (home page, about page), there is no issues if i just visit one of the page, if i go to home page first then about page, and then scroll further down in about page, and then redirect back the home page again, the problem happended, it looks like the scrolltrigger positions were all incorrect, it seems like not been cleaned properly. I have been search online for the solution, and try to use gsap context to wrap all the animation and scrolltriggers, then return to clean with context revert function as recommended from the offical website, i also put ScrollTrigger.refresh() to reset its positions or animations, after i use ScrollTrigger.refresh(), everything works perfectly in dev mode, no problems when i'm swtich between the pages, it aways reset the scrolltrigger to act correctly, but ScrollTrigger.refresh() not working when i deploy with production mode, i tried everything and could not work it out, it is a bit hard for me to put the code into Codepen as it's a project with routes and dependencies and paths...., so i just attach a image of my gsap code for you as an reference, also a link of the website deployed on vercel Create Next App (next-cv-psi.vercel.app)

Hi, So I tried to create a simple example using the app router, React Transition Group and GSAP and ran into the same issues. I did some debugging and indeed Next is removing the previous element immediately which leads to the same element being animated in an odd way. I did some searching on the subject and I saw a few posts here and there and even the latest ones still use the pages router for this which definitely caught my attention. I kept digging and landed on this: https://github.com/vercel/next.js/discussions/42658 As you can see this is something related to the app router (since it can't be done with Framer neither), which creates a lot of confusion among React developers because of the whole client/server components, which reflects that the Next team has not been assertive, IMHO, on correctly communicating to developers when and, most importantly, how to use those components. The thing is that client components are still rendered in the server first and then hydrated on the client like Next worked always. What surprises me the most is that Next had ways to fetch data in the server previously that was passed to the client as props in the hydration phase, so I never really understood the switch. I know this because I worked for over a year on a SAAS based on Next that did exactly that in several routes. With the pages router you can still get a really good a performant app whose performance shouldn't suffer tremendously for not using the app router. Sorry to be the bearer of this news but unfortunately there isn't a lot we can do on our side and it doesn't seem to be an urgent matter for the Next team. Hopefully we a way to implement this can be found ASAP ? Happy Tweening!

Hi @mvaneijgen, Would GitHub link be of any help? I cannot seem to work out how to get it to Stackblitz. https://github.com/JanaBobulis/snap-scroll/tree/main/src https://https-github-com-jana-bobulis-snap-scroll-bl9t.vercel.app/ Alternatively I could paste part of ScrollTrigger code here?

Hi there beloved community. Note: The codepen url is a test-project to show code previews. I'm in the process of launching a new portfolio but there's a bug with my GSAP-based marquee which showcases my projects in a gallery. From what I can see it looks like my code doesn't calculate the proper width & height of all of the media's inside of the marquee. And sometimes on load it only loads some of the actual content inside. Another thing: the marquee height is clamped, and inside of my runMarquee function it looks like the height doesn't adapt when resizing. I use: SvelteKit (framework) Hygraph (GraphQL) Another issue I'm facing is that most of my content inside of the marquee's has different aspect-ratios, especially the videos doesn't load in the proper format. So please also look for a solution to this. Maybe: I would also like for the "dragging" to have less strength if possible, and then on mobile have stronger Preview link of website: https://krause-ew9w4q45a-asgerkrause.vercel.app/ sometimes it works and sometimes it doesn't. I need it to be bullet-proof. If you have a stronger code for the same results, please let me know! HTML structure: <div class="marquee"> <div class="track"> <!-- Media will go here --> <video autoplay loop muted src={url} type="video/mp4" /> <img src={url} alt="" /> </div> </div> CSS: .marquee { height: clamp(18.75rem, 12.5rem + 16.6667vw, 25rem); position: relative; overflow: hidden; display: block; margin-left: calc(var(--space) * -1); width: 100vw; } .marquee .track { height: 100%; transform-origin: 0 0; display: block; position: relative; } .marquee .track > * { height: 100%; width: auto; padding-left: 4px; position: absolute; object-fit: cover; } JS: onMount(() => { function runMarquee() { const allMarquees = document.querySelectorAll('.marquee'); allMarquees.forEach((marquee, index) => { marquee.querySelector('.track'); const allItems = marquee.querySelectorAll('.marquee>.track>*'), proxy = document.createElement('div'); allItems.length; let totalX = 0, marqueeH = 0; marquee.offsetWidth; allItems.forEach((item, i) => { const itemW = item.offsetWidth, itemH = item.offsetHeight; (totalX += itemW), gsap.set(item, { x: totalX, width: itemW, height: itemH }), itemH > marqueeH && (marqueeH = itemH); }); const marqueeVal = gsap.utils.wrap(0, totalX), marqueeProgress = gsap.utils.wrap(0, 1); gsap.set([marquee], { height: marqueeH }); const stringX = `-=${totalX}`, animation = gsap.to(allItems, { repeat: -1, duration: 300, x: stringX, ease: 'none', paused: !0, modifiers: { x: function (x, target) { return `${(x = ((parseInt(x) - totalX) % totalX) + (totalX - target.offsetWidth))}px`; } } }); function updateProgress() { const dragValue = marqueeVal((this.deltaX / 2) * -1) / totalX, currentProgressAnim = animation.progress(), endProgress = marqueeProgress(currentProgressAnim + dragValue); animation.progress(endProgress); } Draggable.create(proxy, { type: 'x', trigger: marquee, inertia: !0, onDrag: updateProgress, onThrowUpdate: updateProgress }), window.addEventListener('resize', function resize() { animation.render(animation.time(), !1, !0); }), animation.play(); }); } runMarquee(); }); Thanks

Hi, How can I achieve a similar multi-step form like the following: https://forming-typeform.vercel.app/ I am challenged by the the positioning of each form section in the center after scroll os done. I find it challenging also to have the side nav buttons to handle the scroll direction accordingly. Any ideas on implementing this with gsap or pure JavaScript and CSS will be appreciated.

Animating the camera position and camera target on scroll from section to section but it jittery(main webpage link - https://drill-rose.vercel.app/) a look at the first scroll of the code pen, that little jitter is what im trying to fix FullSizeRender.MOV

<template> <div class="scroll" data-scroll-container> <div class="horizontal-sections"> <div class="pin-wrap"> <div class="animation-wrap to-right"> <div class="section"> <NuxtLink to="/"> <p> Chnage page</p> <h2>Scroll Down</h2> </NuxtLink> </div> <div class="section section-amin section-gray"> <h2>You need to animate on scroll. Performing some action.</h2> <div class="block-anim"></div> </div> </div> </div> </div> <div class="section section-lightblue"> <h2>Some section 1</h2> </div> <div class="section"> <h2>Some section 2</h2> </div> <div class="horizontal-sections"> <div class="pin-wrap"> <div class="animation-wrap to-right"> <div class="section"> <NuxtLink to="/"> <p> Chnage page</p> <h2>Scroll Down</h2> </NuxtLink> </div> <div class="section"> <h2>Some section 2</h2> </div> <div class="section section-amin section-gray"> <h2>You need to animate on scroll. Performing some action.</h2> <div class="block-anim1"></div> </div> </div> </div> </div> <div class="section"> <h2>Some section 2</h2> </div> </div> </template> <script setup lang="ts"> import gsap from 'gsap'; import ScrollTrigger from 'gsap/ScrollTrigger'; import LocomotiveScroll from 'locomotive-scroll'; gsap.registerPlugin(ScrollTrigger); let locoScroll: any = null; onMounted(() => { locoScroll = new LocomotiveScroll({ el: document.querySelector('.scroll') as HTMLElement, smooth: true, }); pinType: document.querySelector(".scroll").style.transform ? "transform" : "fixed" locoScroll.on('scroll', ScrollTrigger.update); ScrollTrigger.scrollerProxy('.scroll', { scrollTop(value) { return arguments.length ? locoScroll?.scrollTo(value, { duration: 0, disableLerp: true }) : locoScroll?.scroll.instance.scroll.y; }, }); const horizontalSections = gsap.utils.toArray('.horizontal-sections'); horizontalSections.forEach((section: any, i) => { const thisPinWrap = section.querySelector('.pin-wrap'); const thisAnimWrap = thisPinWrap.querySelector('.animation-wrap'); const getToValue = () => -(thisAnimWrap.scrollWidth - window.innerWidth); ScrollTrigger.create({ trigger: section, scroller: '.scroll', start: 'top top', end: () => '+=' + thisAnimWrap.scrollWidth, pin: thisPinWrap, scrub: true, }); const fakeHorizontalAnim = gsap.fromTo( thisAnimWrap, { x: () => (thisAnimWrap.classList.contains('to-right') ? 0 : getToValue()), }, { x: () => (thisAnimWrap.classList.contains('to-right') ? getToValue() : 0), ease: 'none', scrollTrigger: { trigger: section, start: 'top top', scroller: '.scroll', end: () => '+=' + (thisAnimWrap.scrollWidth - window.innerWidth), scrub: true, }, } ); const tl = gsap.timeline(); tl.to('.block-anim', { duration: 1, scroller: '.scroll', ease: 'power3', clipPath: 'inset(25% 25% 25.01% 25.01% round 25vw 25vw 25.01vw 25.01vw)', }); const tl1 = gsap.timeline(); tl1.to('.block-anim1', { duration: 1, scroller: '.scroll', ease: 'power3', clipPath: 'inset(25% 25% 25.01% 25.01% round 25vw 25vw 25.01vw 25.01vw)', }); ScrollTrigger.create({ trigger: section, start: () => 'top top-=' + (thisAnimWrap.scrollWidth - window.innerWidth), end: () => '+=' + window.innerWidth, animation: tl1, scroller: '.scroll', scrub: true, }); ScrollTrigger.create({ trigger: section, start: () => 'top top-=' + (thisAnimWrap.scrollWidth - window.innerWidth), end: () => '+=' + window.innerWidth, animation: tl, scroller: '.scroll', scrub: true, }); }); ScrollTrigger.refresh(); }); onBeforeRouteLeave((to, from, next) => { ScrollTrigger.getAll().forEach((trigger) => trigger.kill()); locoScroll?.destroy(); next(); }); </script> <style lang="scss" scoped> body { margin: 0; padding: 0; overflow-x: hidden; } h2 { position: relative; z-index: 2; margin: 0; } .section { position: relative; display: flex; align-items: center; justify-content: center; min-height: 100vh; width: 100vw; flex: 0 0 100vw; background: lightgray; } .section-gray { background: gray; } .section-lightblue { background: lightblue; } .block-anim { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: lightgoldenrodyellow; } .horizontal-sections { position: relative; overflow-x: hidden; .pin-wrap, .animation-wrap { display: flex; position: relative; z-index: 1; height: 100vh; } } .spacer { height: 50vh; width: 100vw; } </style> I use Nuxt3 and gsap and Locomotive Scroll. My first animation called tl working correct, but when scroll down and view second animation called tl1 doen't working. How I can fix it ? my webiste: https://skandynawia-przystan.vercel.app/ my github: https://github.com/cyprianwaclaw/Skandynawia-Przystan

https://sadness7311p.vercel.app/ I tried something else, thanks for the help!

https://sadness7311p.vercel.app/

Can I put it on github and make a site on vercel?

The same token works both locally and on ci/cd. I had the same issue on Vercel after following the steps mentioned on the Gsap dashboard and setting the Vercel environment variable. I then saw that the default install command was set as "yarn install" in my Vercel project, while I was using npm install locally. I overrode the default build command to "npm install" in Vercel, and it started deploying successfully.

I m facing an issue when I m open this animation on mobile. when My address bar of Chrome browser is hiding that time my black color #page div stays as position: fixed. and position: fixed are added by gsap animation. i have 3 div yellow,black[with animation],red when i scroll my red will be the last div and stay. but because of not removing position: fixed the black div will be overlapping my red div. it is my codepen link : https://codepen.io/Yash-Teli/pen/JjeMPOP it is my deployed code link:https://image-animation2.vercel.app/tire-animation-2.html

Hi, As far as I can tell every hosting provider that offers a CI/CD pipeline integration (Netlify, Vercel, AWS, Digital Ocean, etc) offers the possibility of setting environmental variables. The most common approach is to create a .npmrc file with this in it: always-auth=true @gsap:registry=https://npm.greensock.com //npm.greensock.com/:_authToken=${NPM_TOKEN} Then in your hosting service you create the environmental variable NPM_TOKEN and add the token you created in your Account's Dashboard. Take a look at these articles: https://blog.privjs.com/article/how-to-install-club-greensock-packages-on-digitalocean-aws-etc https://blog.privjs.com/article/how-to-install-club-greensock-packages-on-netlify https://blog.privjs.com/article/how-to-install-club-greensock-packages-on-vercel If you keep having issues, please be more specific about what exactly you're trying to do and any errors you could be getting in order to get a better idea of what could be the issue. Hopefully this helps. Happy Tweening!

Hi, Not sure if this is the right forum to ask this question but hoping that one of the many geniuses on here is able to provide assistance so here it goes. I am having an issue when trying to deploy my Next.js project to Vercel and it seems to be occurring in the build process and more specifically to due with gsap.context() This is my code inside my index.tsx page: import { useRef } from 'react'; import dynamic from "next/dynamic" import { montserrat } from '../utils/fonts' import { gsap } from "gsap" import { ScrollTrigger } from "gsap/dist/ScrollTrigger" import { ScrollSmoother } from "gsap/dist/ScrollSmoother" import useIsomorphicLayoutEffect from '../utils/isomorphicEffect'; import Head from 'next/head' import Image from 'next/image' import styles from '@/styles/home.module.scss' import profilePic from '@/images/dayne-profile-circle-new.png' import gradientPic from '@/images/gradient-bg.jpg' gsap.registerPlugin(ScrollTrigger, ScrollSmoother); export default function Home() { const smoother = useRef(); const ctx = useRef(); useIsomorphicLayoutEffect(() => { ctx.current = gsap.context(() => { smoother.current = ScrollSmoother.create({ smooth: 2, effects: true, }); ScrollTrigger.create({ trigger: '#pinned-element', pin: true, start: 'top top', end: '+=5000', pinSpacing: false }); }); return () => ctx.current.revert(); }); return ( <> <Head> <title>Online portfolio of web developer, Dayne Coulson-Hoffacker</title> <meta name="description" content="Online portfolio of web developer Dayne Coulson-Hoffacker" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <link rel="icon" href="/favicon.png" type="image/png" sizes="any" /> </Head> <div id="smooth-wrapper" className={styles.scrollWrapper}> <div id='smooth-content'> </div> </div> </> ) } This code works perfectly on my local server (https://localhost:3000) The issue is when I push changes to my repo and Vercel runs a build from those changes. I have attached the error message that I am being given from Vercel to this post. Please, any React geniuses who can shed some light it would be greatly appreciated. Thanks, Dayne

Surely, here is the code that I'm using on the landing page with its CSS. https://stackblitz.com/edit/react-bx89de?file=src%2FLanding.css The code works as expected when I host it on vercel, but works buggy(as shown in the first video) in localhost

Welcome to the GSAP Forum, karnan. Your question really sounds like it is not related to this topic, so please create a new thread for your request. As a little hint upfront: There are endless possibilities for what could have gone wrong for you, so you'll likely need to provide some more information than you just did here, for somebody to be able to help you. In the meantime you can trawl the forum to see if maybe there already is a thread that can help you out with your problem. These here are the most recent search results with regard to vercel. https://greensock.com/search/?q=vercel&quick=1&type=forums_topic&nodes=11

@akapowl Thanks man. That was a huge help. Now when I try to deploy it to vercel, ScrollTrigger is not working. Do you have any idea how can I overcome this.

Hi @Cassie thank you very much for your advices. i do have svgs taking like... the entire page and apply blur and blend effects on them. It does seem like exporting the already blured svg could save some resources, maybe even not using it as an svg but a plain webp image maybe ? However, I did try to do the entire animation without anything on my page other than the div with the clip-path animation and it was still laggy (which I'm sure has nothing to do with GSAP because it worked well in other projects and I see some examples where it works fine). https://memoire-vive.vercel.app/gsap-playground/clip-path You can find a simple clip path here (the page with huge lags but completely understandable after your feedback is the website index) Thank you very much for your help, I truly appreciate it

Do you think I could use the bonus plugin for smooth scrolling in my school project ? It will be deployed on Vercel, not sure if I'm allowed to do that, but it's just a final exam showcase, not a real public website. @Rodrigo

Hello, I've been using gsap for a while and I try my best to implement it in all of my projects. Due to the recent changes of Nextjs, I have been transfering all of my pure React.js applications to Nextjs. However, I am encountering some issues when it comes to animations and elements showing before the animation begins. Since I learned about gsap.context, I've been using it in my React.js and early Nextjs projects and it works perfectly. However, it seems that Nextjs 13.4.5 is having problems even when using gsap.context within useLayoutEffect. The issue occurs on the first render of the page. In oder words, it happens when you first visit the website. If you refresh it, the element stuttering wont happen. What I usually do is that I clear my history and cache to reproduce the issue again. The website will show the contents for one or less than a second, and the animation will play. I have developed a very basic application and deployed it on Vercel. I would like to know if anyone has had any problems with animations with the latest version of Nextjs and, if so, what are some possible solutions. I'm not sure if this a problem of Nextjs when loading files or gsap's compatability with the latest version of Nextjs. But I'm leaning more towards Nextjs due to the other problems I've been having with it. Here are the links to the website and Github repo: Website: https://gsap-animation-nextjs13-4-5.vercel.app/ Github: https://github.com/andresfelipe328/gsap-animation-nextjs13.4.5.git Thank you

Hey, what's up? I have created a website https://jimny.vercel.app/ where I used a ton of ScrollTrigger animations. All went perfectly, this forum helped me a lot. I have encountered a problem which is very common among the people in this forum. The horizontal pinned scroll created using ScrollTrigger is overflowing the viewport width in small (mobile) devices. What I want is obviously, the scrolling section should not overflow the width. I have tried adding a media query where I set the width of wrapper div as 100vw and overflow-x as hidden, but still it didn't worked. I have added a codepen, Please help me fix it. I really appreciate your suggestions. Thanks a lot, Atharv varshney

Hi. I ended up with creating a custom router event handler to control transition between pages. Here's the repo: https://github.com/SilviaMalavasi/next-13-page-transition-gsap And here's deployed on Vercel https://next-13-page-transition-gsap.vercel.app/

Hi guys, I've been making a test project using react three fibre + gsap, link below: https://moving-vehicles.vercel.app/ However, when i got round to testing on multiple devices i found that it severerly lags on macbooks. On all windows devices ive tried it runs fine and mobile devices but then on macbook it just lags like crazy. Is anyone able to replicate and think of a reason this may be happening? I'm using intersection observers to detect which slide the user is on but the rest is quite lightweight Thanks

Oh wow, that's so much simpler than anything I was trying to do. I changed my .npmrc to that and added my Greensock Club token as NPM_TOKEN at the env var section of Vercel, and that's that. Thank you so much!

Hi, Be sure to have something like this in your .npmrc file: always-auth=true @gsap:registry=https://npm.greensock.com //npm.greensock.com/:_authToken=${NPM_TOKEN} This repo was deployed less than two weeks ago to vercel without any issues: https://github.com/rhernandog/gsap-bonus-npm-vercel Here is the live page (not a lot, just a proof of concept of a successful deployment and CI/CD pipeline): https://gsap-bonus-npm-vercel.vercel.app/ If you inspect the console you'll find this line there: https://github.com/rhernandog/gsap-bonus-npm-vercel/blob/main/pages/_app.js#L8 Hopefully this helps. Happy Tweening!