All Activity

gsap.min.js:10 Uncaught TypeError: Failed to execute 'scrollTo' on 'Element': The provided value is not of type 'ScrollToOptions'. at PropTween._setterFunc [as set] (gsap.min.js:10:43103) at PropTween._renderComplexString [as r] (gsap.min.js:10:43596) at PropTween.render [as r] (gsap.min.js:10:70502) at Tween.render (gsap.min.js:10:38427) at ma (gsap.min.js:10:1833) at _initTween (gsap.min.js:10:34477) at Ma (gsap.min.js:10:4555) at Tween.render (gsap.min.js:10:38041) at Timeline.render (gsap.min.js:10:26036) at Tween.render (gsap.min.js:10:38451) this error appears if I just reload the page when the viewport is in a certain place after that the parallax animation breaks when scrolling becomes fixed

Hi @MDesigns and welcome to the GSAP Forums! You're looking for ScrollTrigger's refresh method: https://gsap.com/docs/v3/Plugins/ScrollTrigger/static.refresh() Something like this: $('.post-list-footer a').click(function(e) { e.preventDefault(); $('.post').show(); $(this).hide(); // After adding the new elements refresh the ScrollTrigger instances on the page ScrollTrigger.refresh(); }); That will tell ScrollTrigger to run all the calculations again, updating the start and end points accordingly. Here is a fork of your demo: https://codepen.io/GreenSock/pen/rNbEyGw Here is a demo that emulates an API callback using ScrollTrigger's batch method: https://gsap.com/docs/v3/Plugins/ScrollTrigger/static.batch() https://codepen.io/GreenSock/pen/YzOzjbL Hopefully this helps. Happy Tweening!

Hi, As far as I can see this in your demo is scaling properly. What exactly is not working, or the issue here? Sorry but maybe I'm missing something obvious here 🤷‍♂️ Maybe you could check GSAP MatchMedia, but I'm not sure if your question/issue is in that realm: https://gsap.com/docs/v3/GSAP/gsap.matchMedia() Sorry I can't be of more assistance, if can please be more specific about what should happen in your demo as you reduce the screen width. Hopefully this helps. Happy Tweening!

Hi, Sorry about the issues, but honestly I've never been to keen on unit testing, even less GSAP instances or effects of it, I just don't see the need for it, but that's just me. I fiddled around with your demo and the issue here is that the test seems to run and finish before the GSAP instance is completed, I added a dummy test assertion: expect("true").toMatch("true"); So the test will always succeed, and added this to the GSAP code: console.log('click handler'); // <- YES // Animate box gsap .to(boxRef.current, { x: 120, rotation: 360, onStart: () => { console.log('tween started', Date.now());// <- YES }, onComplete: () => { boxRef.current.setAttribute('data-animated', 'true'); console.log('complete', Date.now()); // <- NO }, }) .then(() => { console.log('THEN CALLBACK', Date.now()); // <- NO }); So I see the first two logs in the terminal running the test but not the other two. That clearly means that the GSAP instance is not being completed in the test environment. I even tried returning the GSAP instance, expecting that returning the promise could work with the test but it didn't work. The fact that the onStart callback is working tells me that the test environment is running this code, the async/await is not waiting for the GSAP instance to be completed. In fact running this on the test file: // Stimulate user interactions console.log("before", Date.now());// before 1714688301281 await user.click(screen.getByRole('button')); console.log("AFTER", Date.now());// AFTER 1714688301370 // 1714688301370 - 1714688301281 = 89 As you can see only 89 milliseconds elapsed , while the GSAP instance has a default duration of 500 MS, that confirms that the test is not really waiting for the animation to be completed. I wish I knew what the issue is here but is clearly not a GSAP related one, as far as I can see. Sorry I can't be of more assistance. Happy Tweening!

I am showing a list of posts in a container with some filters at the top. The filters are sticky and when the post list is scrolled within the viewport, I want to toggle a class on the filter bar to add a background color to it. I got this working pretty well, the only problem is that I also have a load more button at the bottom of the list, but the class toggle seems to be based on the height of the list on load, so if I load more posts and continue scrolling, the class is removed from the filter bar before reaching the bottom of the post list. How can I ensure that the class will remain on the filter container until the container is scrolled out of view? Also, is there a better way to go about this? I saw some similar posts discussing the toggleClass property, but I wasn't quite sure how to utilize that for this scenario.

Hi, These threads can provide a good starting point: Hopefully this helps. Happy Tweening!

Hi there, So I am using gsap for animation in a NextJs project and there are some component that has little animations that I am trying to test. To be direct I stimulate a user click interaction in the test and check to see if the "aria-*" attribute or "data-*" attribute has been updated to the correct state when the animation is done but all test fails. I am using the gsap `.then` callback to trigger this update when the animation is done. It works fine in the dev and prod env but the `.then` callback function fails to run in a test env. I have created a minimal demo of my issue, please find the link below https://stackblitz.com/edit/stackblitz-starters-mvcff3?file=app%2Fpage.test.tsx Thank you.

@streetRAT hey, did you get any soltuion for this issue? I am also facing the same issue, please help if you have got any soltions. Regards.

Good evening, Could anyone tell me where I can find a tutorial or an example of animation in Gsap like this one made with jquery? Thank you Raffaele

Hi guys, this won't be explicitly a gsap question I think, or maybe a gsap solution exists. I've already searched on the forum and have read a lot of topics about responsive, scaling,... But didn' found a solution that worked for my problem. I did a whole campaign of banners and now the media agency comes back to me complaining "it's not responsive" but from what I understand they need banners that scales down when needed and keep it's proportions. So for example I have a 970x250 format but they also want to use it for mobile and it must scale if the desktop browser gets smaller than 970 width... I thought they where using an iframe with a content scaling but no it's js injection or something like that that I don't know, I'm really not a js genius... So I need to quickly adapt a whole campaign to that need, I made a codepen of a typical banner as I'm used to do. I'm trying to find out how to scale this banner when browser/mobile gets smaller, any idea ? https://codepen.io/fripi/pen/QWPXEeL

Thank you very much! helps

Hi, thank you for your reply. I may have caused some confusion because I wrote the English in translation. What I actually want is to specify different ease and duration for the opacity within it. After reviewing the documentation, I found a method in a demo that allows passing custom parameters. https://codepen.io/GreenSock/pen/bGjXGeX let customVars = { x: { ease: "power3.in", delay: 1, duration: 1 }, y: { ease: "power1" } }; Flip.from(state, { duration: 2, custom: customVars });

Hi @Danny21 and welcome to the GSAP Forums! In this cases is better to create just a single timeline to control everything. It's always a good idea to start without ScrollTrigger and focus on the animation first and then plug ScrollTrigger back into the mix. Maybe something like this: https://codepen.io/GreenSock/pen/rNbELKO Hopefully this helps. Happy Tweening!

Hi @milecoder and welcome to the GSAP Forums! That can be done with the Observer Plugin: https://gsap.com/docs/v3/Plugins/Observer/ If you check that particular site, in that section they hide the custom scrollbar, if you hover on it you'll see the scrollbar again and you can actually scroll past that section without the swipe effect. What can be used is a combination of ScrollTrigger and Observer as shown in this demo: https://codepen.io/GreenSock/pen/ExEOeJQ Hopefully this helps. Happy Tweening!

That's great! Regarding the code, as @mvaneijgen says: "if it works, it works". If the code you have in place is doing what you need then just keep it. Thanks for reporting back and sharing your solution with the community, I'm sure many users will benefit from your generosity! 💚 Happy Tweening!

What exactly is not working on Stackblitz? Everything seems ok on my end 🤷‍♂️

It should be as simple as this: let isFlipped = false; function demo(ease, duration, delay) { const state = Flip.getState(".small, .large"); document.body.classList.toggle("active"); Flip.from(state, { absolute: true, ease, duration, delay, zIndex: 10, fade: true, onComplete() { isFlipped = !isFlipped; isFlipped ? demo("power2.out", 1, 1) : demo("power3.inOut", 0.5, 0.5); } }); } demo("power3.inOut", 0.5, 0); Hopefully this helps. Happy Tweening!

Hi, Yeah the issue is not related to GSAP but simply the way these frameworks/libraries actually work. When you toggle the setOpen state, that tells radix to render the modal component, but it doesn't mean that the DOM has been updated. When you create this: useGSAP( () => { tlRef.current = gsap.timeline({ paused: true, defaults: { ease: 'power1.inOut' }, }); tlRef.current .to('.modal', { autoAlpha: 1, duration: 0.7 }) .to('.overlay', { autoAlpha: 1, duration: 0.5 }, '<') .to( '.menu-item', { autoAlpha: 1, stagger: 0.1, duration: 1, }, '>' ) .reverse(); }, { scope: containerRef, } ); That runs when the component first mounts and the modal is not mounted so all those selectors come back null, so while the GSAP Timeline has been created, no DOM element will be animated. In fact if you remove all your GSAP code and leave just this: const [isOpen, setIsOpen] = useState(false); const [isMounted, setIsMounted] = useState(false); const containerRef = useRef<HTMLDivElement | null>(null); const toggle = () => { setIsOpen(!isOpen); }; useEffect(() => { setIsMounted(true); }, []); And inspect the DOM there is nothing being added to it, so updating the isOpen state is not causing any effect in the DOM, the modal is not even being rendered, so you should first check that the modal is being rendered in the DOM before it can be animated with GSAP. Happy Tweening!

Hi, I have some experience with GSAP - StrollTrigger in general, but not so much with the .pin property. Im having quite some trouble achieving a section with tabs and would like to ask for some help. Layout : On the left, I have a simple Tabs menu with a progress bar. On scroll I want the progress bar fill up. That's working so far. I also want to highlight the "active" tab, it's not working properly. On the right, I have the main content of the tab with some title, text and image. Ideally, on scroll I would like to fade in/out the content. I found this demo, which I tried making it work for my needs, but having some troubles. https://codepen.io/akapowl/pen/YzZLVyY Regards, Danny

Thank you very much, Rodrigo. I didn't know about this possibility of running bonus plugins in a local environment. I will try and check this security issue as well.

@NickWoodward you need to create the ScrollSmoother on each of your pages <script is:inline src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/ScrollSmoother.min.js" ></script> <script type="module" is:inline> import gsap from "https://cdn.skypack.dev/gsap"; document.addEventListener("astro:page-load", () => { gsap.registerPlugin(ScrollSmoother); // scroll smoother ScrollSmoother.create({ smooth: 1, effects: true, smoothTouch: 0.1, }); }); </script>

const state = Flip.getState(".small, .large"); document.body.classList.toggle("active"); Flip.from(state, { // how to use different ease/duration/delay for opacity fade: true, absolute: true, ease: "expo.inOut", duration: 0.5, zIndex: 10, });

Hi Gsap community, I am new to gsap and I am trying to create a slider snap scroll just like at the bottom but I can't seem to figure why my slider doesnt snap as it supposed to on scroll down. it seems to work okay when you scroll all the way down and start scrolling up. here is a codepen of my code https://codepen.io/Mileristov/pen/ExJBazp

I also made a version which is using pinning, thus significantly narrower again. https://codepen.io/emjay/pen/yLrdBYp/9b8c27483758f960c57475c201241013

Hello, I'm attempting to animate a dialog component from RadixUI's component library in a NextJS 14 App router project. I have converted the Radix component to a controlled component following their docs (and this useful video by Sam Selikoff), by not using the internal wiring from Radix that opens the dialog with the <Dialog.Trigger /> component and instead conditionally rendering the dialog with state isOpen and the use of forceMount prop on <Dialog.Portal />. I would expect to simply give the useGSAP() hook a dependency [isOpen] and trigger the timeline to play() or reverse() based on that state too. The forceMount prop is used to delegate the mounting and unmounting of children based on the animation state. But currently I have no GSAP animation playing. I realise there is some specificity to Radix with this question, but if anyone is willing to check my GSAP code I would be very grateful. In fact the logic described above may not be necessary; I noted another question in the forum animating a Radix component and from the code that was provided in that question it did not appear that the OP was using forceMount, indeed the conditional rendering appeared to follow a conventional approach. My Stackblitz demo is here: Stackblitz In the above demo there are two routes; one dialog animating with GSAP without a RadixUI dialog component, and another route with the RadixUI dialog component, but not currently animated with GSAP. The GSAP code is scaffolded out on that page, but is not animating the dialog into view. The animation I am aiming for would resemble the animation from the route currently without Radix. Many thanks in advance