Olav

Hi! I took another look at my code, since I want the scrollbar to be locked while the animation is playing. I made the following: 'use client' import Image from 'next/image' import { useEffect, useLayoutEffect, useRef } from 'react' import { gsap } from 'gsap/dist/gsap' export default function Preloader() { const el = useRef<HTMLDivElement | null>(null) const tl = useRef() const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect useIsomorphicLayoutEffect(() => { document.body.style.overflow = 'hidden' const ctx = gsap.context(() => { tl.current = gsap .timeline() .set('body', { overflow: 'hidden' }) .to( '#preloader-logo', { yPercent: 160, duration: 1, ease: 'power2.inOut' }, 1, ) .to( '#preloader-bg', { yPercent: -100, duration: 0.25, ease: 'power2.inOut' }, '<+=.5', ) }, el) return () => { document.body.style.removeProperty('overflow') ctx.revert() } }, []) return ( <div ref={el} aria-busy="true" aria-label="Loading"> <div className="fixed inset-0 z-50 flex h-full w-full items-center justify-center bg-crftd-purple" id="preloader-bg" > <div className="overflow-hidden"> <Image priority src="/logos/crftd-letters-dark.svg" alt="CRFTD text logo" width={160} height={80} id="preloader-logo" /> </div> </div> </div> ) } Just before the ctx, I add overflow: hidden to the body element, which works perfectly fine. Then just before the cleanup, I try to remove the overflow property, but this doesn't seem to work. Also, as you can see I tried adding a .set to for the overflow hidden at the beginning of my timeline, but that doesn't work either. For now I'm looking at the document.body.style lines. Then I tried adding a console.log to my return statement, which also never fires, which means that the 'cleanup' also never goes through. Can't seem to figure out what is going on here. Any clue's?

Fixed it! For anyone facing similar issues, the setup listed works perfectly fine. Only thing you should change is the .npmrc file to the following: Thanks to @b1mind in another post, but works like a charm.

Hi @Rodrigo, I'm facing the same challenge as OP regarding the public repository, next.js and Vercel. Like you have instructed I added an environment variable to Vercel: https://imgur.com/GlNLZsK . In my public repository I did add the .npmrc file, so that Vercel would know where to use the variable. See here: https://github.com/olavgit/crftd/blob/main/.npmrc . In my IDE it works just fine, using the .env.development.local like you instructed, but when I push my repo and Vercel tries to build, I keep getting the following error: https://imgur.com/xvKFIvG . Any idea of what is going wrong? Already checked the input of the environment variable, and it doesn't have any characters like a space that shouldn't be there.. Looking forward to your reply! Olav

Both Jack and Rodrigo, many thanks! Everything works exactly as expected, good to know that the extra config isn't necessary for nextjs.

Hi Rodrigo, Thanks for your quick reply! I've implemented your suggestions. Another question, maybe a bit off topic but it's probably a very short answer; In the installation guide I stumbled upon the following: If you are using server side rendering, you may need to add GSAP to your transpile property in your configuration settings (like nuxt.config): build: { ... transpile: ['gsap'], }, Now I've also implemented that in my project, the next.config.js, but am getting warnings; warn - Invalid next.config.js options detected: warn - The root value has an unexpected property, build, which is not in the list of allowed properties (amp, analyticsId, assetPrefix, basePath, cleanDistDir, compiler, compress, configOrigin, crossOrigin, devIndicators, distDir, env, eslint, excludeDefaultMomentLocales, experimental, exportPathMap, generateBuildId, generateEtags, headers, httpAgentOptions, i18n, images, modularizeImports, onDemandEntries, optimizeFonts, output, outputFileTracing, pageExtensions, poweredByHeader, productionBrowserSourceMaps, publicRuntimeConfig, reactStrictMode, redirects, rewrites, sassOptions, serverRuntimeConfig, skipMiddlewareUrlNormalize, skipTrailingSlashRedirect, staticPageGenerationTimeout, swcMinify, target, trailingSlash, transpilePackages, typescript, useFileSystemPublicRoutes, webpack). warn - See more info here: https://nextjs.org/docs/messages/invalid-next-config My next.config.js looks like this: const nextConfig = { experimental: { appDir: true, }, build: { transpile: ['gsap'], }, } module.exports = nextConfig Is this a known thing for next and do you know of any fix? Thanks in advance!

Hi everyone, I've been fighting with gsap and react all day and finally have got it to work properly. Now I'm in a very early stage of developing a website, and was wondering if my approach is 'correct', I've included a simple component using gsap which in functionality works fine, but I'd like to know where I can improve. 'use client' import Image from 'next/image' import { useEffect, useRef } from 'react' import { gsap } from 'gsap/dist/gsap' export default function Preloader() { const el = useRef<HTMLDivElement | null>(null) const tl = useRef() useEffect(() => { const ctx = gsap.context(() => { tl.current = gsap .timeline() .to( '#preloader-logo', { y: '160%', duration: 1, ease: 'power2.inOut' }, 1, ) .to( '#preloader-bg', { y: '-100%', duration: 0.5, ease: 'power2.inOut' }, '<+=.5', ) }, el) }, []) return ( <div ref={el} aria-busy="true" aria-label="Loading"> <div className="fixed inset-0 flex h-full w-full items-center justify-center bg-crftd-purple" id="preloader-bg" > <div className="overflow-hidden"> <Image priority src="/logos/crftd-letters-dark.svg" alt="CRFTD text logo" width={160} height={80} id="preloader-logo" /> </div> </div> </div> ) } Anyone have some tips? Live version is visible here btw; https://www.crftd.nl Thanks in advance, I really appreciate your time. Kind regards,

Hi @Cassie, My tween looks like this as an example: gsap.from("#block-12-9657559 .line .heading-6", 1.5, { scrollTrigger: { id: "gsap-title-footer", trigger: "#block-12-9657559 .box-1", scroller: "[data-scroll-container]", scrub: false, start: "top 85%", markers: true, }, y: 200, ease: "power4.out", skewY: 10, stagger: { amount: 0.25 }, }); Running on the following versions: <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.4/gsap.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.4/ScrollTrigger.min.js"></script> It works perfectly when running on 3.8.0, as soon as I switch the script tags the animation doesn't play

Hi @Rodrigo, would this be easier with the native scrollsmoother from gsap? Or would we face the same issue

Has this been fixed yet? I've just migrated from 3.8.0 to latest, and all of my .from tweens have stopped working properly, also when adding the 'lazy: false' attribute, it doesn't seem to work properly. Are there any other major changes I should've watched out from?

Thanks Cassie! I've changed the version and the code seems to be working fine now. Only thing I didn't account for is that I'm using a smooth scrolling library which screws up the position of the image right now. I've managed to get all my other gsap animations to work using by adding the 'scroller' attribute, how would I approach this with the animation of this topic? For context, I'm using Locomotive scroll (I'd be using ScrollSmoother if it wasn't for the subscription, maybe once I'm more experienced). Do you maybe have an example I can follow for a case like this? Thanks in advance! I really appreciate you time.

Hi @GreenSock, I've implemented exactly this code in my website, but keep running into the following errors: https://imgur.com/B3LKLvo Do you have any idea what it could be? I'm using gsap/3.8.0, so version shouldn't be the issue, and since it's working in the codepen I really have no idea what could be wrong.

Exactly! Thanks for the help!

Hi everyone, I found the codepen (the bottom one) this is an effect I'd like to use in a project of mine, multiple items with different image's while hovering. The only thing that I'd like to add is the effect in this codepen: https://codepen.io/nazarenooviedo/pen/ExeyQgP . Where the image smoothly follows the cursor instead of being 'hard' attached to it. I'm trying to combine the two effects, but can't get it to work properly. Does anyone know another codepen which combines the two? Or sees what it takes to make it work? Thanks for your time in advance!

Hello everyone, I stumbled on the following 'sliding' animation on the Skin website which I'd like to recreate; https://imgur.com/XllRmi8 Is this possible using GSAP, or does anyone know how to achieve this/something similar? Even a relevant google search term would help, I just can't seem to find something remotely correct. Anything helps! I appreciate your reading, hope you can help me out with an answer.

Thanks again for your reply @Rodrigo. I'm trying to solve it on my own, you talk about elements with partial heights, which is what the effect uses. https://codepen.io/olavgit/pen/eYKWebd I've edited the pen a small bit, using just 2 instances, one leaving and one entering. Thanks again @PointC for the great example. Are there any other possibilities than using a clip path to make the span a different height? Setting the height to 50% of the span class is just making it bigger. I really appreciate the support!

Thanks for both of your suggestions! I can't really seem to figure out how to get this perfect. https://imgur.com/a/WcRoxGm I've slowed the gif down a bit and see that it's only using 2 clip's/layers just like Craig's example. Could I maybe move this thread to the hiring section to find someone who can realise this for me?

Hello everyone, I don't know if this is the right place for this question, but I've had really amazing help from this forum on this forum, and thought I'd shoot my shot. I stumbled on the following 'distorted' animations on the ThinkingBox website which I'd like to recreate; https://imgur.com/a/dknA80r Is this possible using GSAP, or does anyone know how to achieve this/something similar? Even a relevant google search term would help, I just can't seem to find something remotely correct. The closest I've gotten is the Blotter.js library, but I think this is not what I'm looking for. Anything helps! I appreciate your reading, hope you can help me out with an answer.

Hi! Sorry for my late reply but you guys had the perfect answers for me. Thanks a lot!

Hello everyone, I stumbled on the following animation on the Van Moof website which I'd like to recreate; https://imgur.com/xSnhLYr Is this possible using GSAP, and are there any codepen examples doing something similar? Anything helps! I appreciate your reading, hope you can help me out with an answer.

Thanks for the quick help Jack! Exactly what I needed.

Hello everyone, I'm new to GSAP so still need to get used to all the possibilities. I've tried my fair share of google searches but can't seem to find what I'm looking for. As you can see in the codepen example, text changes color based on scroll position. Though if you scroll slow enough, you can pause the scroll in the 'in-between' state of the 2 colours. I'd like for my code to trigger the change of color on scroll, but with a set duration, eliminating the possibility of seeing 50% color. When the trigger hits, .highlight changes to white in 1 second with easing. What do I need to resolve this issue? Or, where can I find a solution? I appreciate your reading, hope you can help me out with an answer.