All Activity

Hi @leo_jvm sadly we can't debug live websites, there is just no way to modify the code (I don't see any issue when loading your site btw). That said have you seen the FOUC guide in our learning center? https://gsap.com/resources/fouc If that doesn't help please post a minimal demo, so that we can help you figure things out. Hope it helps and happy tweening!

@Rodrigo Thank you for the reply. I understand that it's difficult to give support on large code bases. In the end, I've managed to solve some issues. I still have one issue that is related to the ScrollTrigger and the gsap.matchMedia(). I have 2 elements using the ScrollTrigger on "components/Services.jsx" and right now the component has this check for the matchMedia() below, and if the user is on less than 600px wide (mobile), the ScrollTrigger would be ignored. I think I am doing something wrong on these 2 lines below. If I comment these 2 lines, the effect would work normally, but then it also would run on mobile and that's not the intention. Could you please have a look? let mm = gsap.matchMedia(); mm.add("(min-width: 600px)", () => { I've made a new demo with only this issue. https://stackblitz.com/edit/stackblitz-starters-fpbyhx?file=app%2Flayout.jsx,app%2Fcomponents%2FServices.jsx PS: I am using the ScrollSmoother on "layout.jsx". Thank you

Hey everyone, I am using GSAP and SplitText to animate Text on my Website. Strangely there are sometimes some letters flashing before being animated. I set the opacity to 0 before being animated already, but it is still the same behavior. Here is the URL: https://effie-switzerland.webflow.io/

import { useEffect } from 'react'; import gsap from 'gsap'; import './App.css'; import ScrollTrigger from 'gsap/ScrollTrigger'; gsap.registerPlugin(ScrollTrigger) function App() { useEffect(()=>{ const texts = gsap.utils.toArray(".red") texts.forEach(text => { gsap.fromTo(text,{ opacity:0, }, { opacity:1, duration:1, scrollTrigger: { trigger:text.parentElement, start:"top center", scrub:1 } }) }) },[]) const text = "may be the quick brown fox who jumbed over the box" return ( <> <div className='text-holder'> { text.split(" ").map((txt , idx) => ( <div className="txt" key={idx}> <i className={`red`}>{txt}</i> </div> )) } </div> </> ) } export default App; App.jsx:17 Invalid property scrollTrigger set to {trigger: div.txt, start: 'top center', scrub: 1}scrub: 1start: "top center"trigger: div.txt[[Prototype]]: Object Missing plugin? gsap.registerPlugin() _missingPlugin2 @ gsap-core.js:89 _scrollTrigger2 @ gsap-core.js:441 Tween2 @ gsap-core.js:3329 _createTweenType2 @ gsap-core.js:633 fromTo @ gsap-core.js:3639 (anonymous) @ App.jsx:17 (anonymous) @ App.jsx:16 commitHookEffectListMount @ react-dom.development.js:23150 invokePassiveEffectMountInDEV @ react-dom.development.js:25154 invokeEffectsInDev @ react-dom.development.js:27351 commitDoubleInvokeEffectsInDEV @ react-dom.development.js:27330 flushPassiveEffectsImpl @ react-dom.development.js:27056 flushPassiveEffects @ react-dom.development.js:26984 (anonymous) @ react-dom.development.js:26769 workLoop @ scheduler.development.js:266 flushWork @ scheduler.development.js:239 performWorkUntilDeadline @ scheduler.development.js:533 Show 5 more frames Show less gsap-core.js:1275 [Violation] 'requestAnimationFrame' handler took 83ms every time i open the console i find this error and the animations didnt work if the triggered element reachs the viewport

Can I have multiple useGSAP hooks? I'm asking as I have a similar situation to this user, where I want to animate things, but only if a state is active. However, I have it 1 step further, where I have a situation like this with multiple states. active1 active2 active3 active4 active5 Only 1 of them would be active at a time though So then, can I create seperate useGSAP hooks for each of those, or how would I then handle something like that?

Hi, Normalize scroll acts on tha way the scroll works, Soto speak. From the ScrollTrigger docs : Forces scrolling to be done on the JavaScript thread, ensuring screen updates are synchronized and the address bar doesn't show/hide on [most] mobile devices. As you can see it doesn't act on the way ScrollTrigger works directly but on the scroll, which obviously has an effect on how ScrollTrigger instances behave especially in devices. Hopefully this helps Happy Tweening!

Thanks @GreenSock, I got the idea. 🙏 Sorry for confusion, I meant that for me:pinSpacing:paddingandpinSpacing:margin -they work both even if my container is 'display: flex'. But nevermind, I probably got the main idea. Thanks a lot! 🧡

Thanks for your replies. From what I get, it should be called only once before all ScrollTriggers are set, am I wrong? And once set, all my subsequent scrolltriggers will automatically use it?

Hi @Ildar Khusainov welcome to the forum! ScrollTrigger can only be on the timeline not on individual tweens of the timeline. I've forked your pen and copied your most elaborate ScrollTrigger to the timeline and comment everything else out. You're also creating ScrollTriggers based on other scroll triggers, this is not inherently wrong, but a lot is happening at the moment that it is hard to see what is going one right not and mostly to find what is going wrong. Can you maybe make a simpler demo and lets focus on one element at a time? https://codepen.io/mvaneijgen/pen/MWLRaZV?editors=0010 Keep in mind the best thing to do when working with ScrollTrigger is to remove it! This seems counter intuitive, but ScrollTrigger is just animating something on scroll, so just focus on the animation at first and only when you're happy with the animation add ScrollTrigger back in. This way you can focus on one part at a time and it will save a lot of headache when debugging. My advies remove ScrollTrigger and just focus on the animation, see below an example. Where there a tweens that change the text, I've used our Scramble text plugin on some of the tweens and on others just textContent. By just creating a timeline with individual tweens you get all the logic with scrolling back and forth for free! Hope it helps and happy tweening! https://codepen.io/mvaneijgen/pen/mdvgVbP?editors=0010

Hello forum! I can't see any configuration at this point that can work for my setup... Can't find any set of options that won't break the scrolltriggers once the scrollsmoother is enabled? Any suggestions? Why do scrolltriggers lose their trigger position with scrollsmoother enabled?

Hi there, I have an urgent request for support of a frontend developer for a website project which needs some animations using GSAP. Unfortunately our frontend developer for the animations is no longer available and we have to finish the project before the 22. December 2023. It is a horizontal scrolled website with four pages using GSAP ScrollTrigger with some subtle animations within. The HTML structure and CSS ist nearly finished and can be altered according to the needs of the animations. The website is based on a CMS, but we can take care of this. If anything is needed to be changed in the structure, we can provide it. Here are the requirements which have to be accomplished: Changing logo and menu button color depending on the current section in the viewport. Currently these are SVGs in a pseudo element, but can be changed to background images. Navigation within a timeline by anchor links or such. Navigation from external pages to specific sections within the timeline by anchor links. Pinning the first section of the horizontal scrolled timeline and move the following sections over it. Moving, rotating and fading two different background images (one at a time) within the whole timeline or specific sections on scroll. Whatever works better. It does not have to be a background image per se. If it's an image container which is moving in the background of the timeline, it could work too. If this makes sense. Pinning an image and a headline/text in a section of the timeline while scrubbing. The additional text should scroll further underneath. Sections don't have to snap to the viewport. We hope for your support/quotes and we can provide an Adobe XD file for further informations. Best regards, operatorone

@Rodrigo What I actually want to do is to place the .horizontal-item divs side by side in the first div with an offset and expand the content area as you scroll. In the example I made, they actually come next to each other, but there is no content expansion. There is a similar example here. https://www.brooklyneditions.com/ "Services designed to meet the needs of professionals" section.

Hi everyone, hope you can help me with this. I have the code below 'use client' import React, { useCallback, useEffect, useRef, useState } from 'react' import { Observer } from 'gsap-trial/Observer' import gsap from '@/utils/gsap' type Props = {} const TestPage = (props: Props) => { const [test, setTest] = useState<number>(0) const testFunc = () => { console.log(test) let tl = gsap.timeline({ defaults: { duration: 2.1, ease: "power3.inOut" }, onComplete: () => { setTest(prev => prev + 1) } }) } useEffect(() => { Observer.create({ target: window, type: "wheel,touch,scroll,pointer", onUp: () => testFunc(), // Mouse down onDown: () => testFunc(), // Mouse up wheelSpeed: -1 }) }, []) useEffect(() => { console.log(test) }, [test]) return ( <div className='h-screen bg-black'>TestPage</div> ) } export default TestPage The problem with this code is that although the state is updated whenever the testFunc is called, the console.log(test) inside the testFunc always returns 0. Can someone help me explain why this happened?

Hello! I'm new in gsap. I'm just say - its absolutely base things. As you might have noticed from my code, I want to change the text as I scroll. In my example, I used the change via the document object, since it takes much longer to change the text when using the textContent property (I didn't specify a delay or duration at that point). And it seems to work fine, but if you go in the opposite direction - there is no reverse change as there would be with the scrub property. I also want to change the logo to CHNG after the "#create" animation is finished, using all the scrub benefits - reverse change. I'm using a translator, please forgive the quality of the language(And js and plain English). Thanks!!!

Hi, @Rodrigo! I fixed the code and that's going well. That was so helpful your content to keep scrolling after the third one gets pinned. It's all thanks to you!

Typically, you'd capture the before state immediately before you change the state but it looks like you're capturing state at a completely different time (after the end of the previous animation). From what I can tell, Flip is doing exactly what it's supposed to do. Let's say the blue box is 4000px down from the top of the page and you capture state there...and then you suddenly scroll the page all the way up. It should animate from 4000px down from the top of the page to the new position. It's doing all that, right? So in essence, you're wanting it to animate from a DIFFERENT state (one that simulates it starting at a much higher point on the page, as if it stayed in its place in relation to the bottom of the viewport even though you scrolled way up), right? I guess one idea is to fake that by doing a gsap.set() that moves the element way up to where it'd be if your page wasn't scrolled at all...THEN capture the state, then move it back (so the user would never see it). This really doesn't sound like a great way to engineer things, though. You'd still be doing things in a very odd order and it wouldn't be good to assume exactly where the user may have scrolled at that point. Again, that's why the typical flow for a Flip animation is to capture the state right before the state changes, then make your changes, then Flip.from() so that it's all perfectly synchronized. But in this case you'd still have problems because you're capturing state at a certain scroll position, and then you're scrolling all the way up and running the Flip.from(). I just don't see a super simple way of accomplishing this, and I don't have time to try to wire up custom logic for you, sorry.

@GreenSock Thanks a lot for this detail explanation. This make so much sense. Just one thing i will like to clarify about the useGSAP hook. The code below works fine when the page initially loads, after i navigate to other pages, the animation work. But once i go back to a page i have previously visited, the animation doesn't play again. This is not something i like, i will like to animation to keep playing irrespective of how many times i navigate between pages. I'm thinking this has to do with dependencies. I will appreciate more clarification on this. useGSAP( () => { gsap .timeline() .from('ul', { y: 50, duration: 0.6, delay: 1, opacity: 0, }) .from('ul a', { scale: 0, stagger: 0.1, transformOrigin: '50% 50%', ease: 'back', duration: 0.5, }); }, { scope: container }, { dependencies: [] } );

Yes, I was using the ZIP file, so had to manually update, and it seems to be working now Thank you

Nah, I don't see an issue with creating/destroying multiple instances like that. I bet that error you were getting was just from the bug that was already fixed related to registering Observer multiple times. Sorry about any confusion there.

Hi Jack, thanks for the message. I was using version 3.12.2, bumping up to 3.12.3 seemed to fix this issue. Would there be anything wrong creating and destroying multiple observer instances quickly, like i did in that example?

Hm, I can't seem to reproduce the issue at all. There was an issue with registering the Observer plugin multiple times that could cause a problem like that in old versions, but that was fixed - are you positive that you're using at least version 3.12.3 of all the GSAP-related files? Maybe clear your cache, re-install GSAP and see if it's resolved? Or maybe I'm missing something obvious. I tried clicking around a bunch and scrolling, back and forth between pages and never once got that error. 🤷‍♂️

@GABEwasaCREEP your username doesn't do you justice! Not a creep at all - we love the fact that you're looking for GSAP merch and want to support the brand. We may or may not have some really cool merch ideas that may or may not eventually be for sale Thanks again for asking. We'll blast an email out if/when we've got merch to offer. In the meantime, you're welcome to create your own merch for yourself using a site like Zazzle that allows you to put a custom logo on things. We can send you the logo artwork if you need it, like as a PDF or SVG - just ask.

The default property for pinSpacing is padding, so it makes sense that pinSpacing: true and pinSpacing: "padding" would produce identical results. As for how things are different with flexbox, that's simply about the fact that browsers themselves measure things very differently inside Flexbox such that px aren't always px. For example, you could put 5 elements inside a Flexbox container that's 1000px wide, and try setting them each to be 500px wide but you'll see that it squishes them all to be much less than 500px. Same for padding - things can get rendered by the browser in a much different way than you might expect in terms of height/width based on fancy Flexbox calculations. It's just what seemed more intuitive in more scenarios due to the explanation above about how widths/heights work inside Flexbox. You're welcome to use whichever settings work best in your scenario. 💚

I think this question is answered on the NPM package and Github readme. Did you check that out? Benefits of the useGSAP() hook: Automatically handles cleanup using gsap.context() Implements useIsomorphicLayoutEffect() technique, preferring React's useLayoutEffect() but falling back to useEffect() if window isn't defined, making it safe to use in server-side rendering environments. Optionally define a scope for selector text, making it safer/easier to write code that doesn't require you to create a useRef() for each and every element you want to animate. Defaults to using an empty dependency Array in its simplest form, like useGSAP(() => {...}) It was common for developers to forget to include that on React's useLayoutEffect(() => {...}, []) which resulted in the code being executed on every component render. Exposes convenient references to the context instance and the contextSafe() function as method parameters as well as object properties that get returned by the useGSAP() hook, so it's easier to set up standard React event handlers. ❌ OLD import { useEffect, useLayoutEffect, useRef } from "react"; import gsap from "gsap"; // for server-side rendering apps, useEffect() must be used instead of useLayoutEffect() const useIsomorphicLayoutEffect = (typeof window !== "undefined") ? useLayoutEffect : useEffect; const container = useRef(); useIsomorphicLayoutEffect(() => { const ctx = gsap.context(() => { // gsap code here... }, container); // <-- scope for selector text return () => ctx.revert(); // <-- cleanup }, []); // <-- empty dependency Array so it doesn't get called on every render ✅ NEW import { useRef } from "react"; import gsap from "gsap"; import { useGSAP } from "@gsap/react"; const container = useRef(); useGSAP(() => { // gsap code here... }, { scope: container }); // <-- scope is for selector text (optional) We haven't put this in the official docs yet because we're in the process of reworking those before we "officially" announce the hook. Check back in a week or so and you'll see lots of useGSAP() in the docs related to React.

As you mentioned OSUblake, your issue on dealing with the address bar, I solved it partially using Smooth Scrollbar. As it is not a native scrollbar, it does not produce the viewport resizing.