All Activity

Hi, thank you, indeed I continued searching for hours yesterday and found this solution using gsap: function resizeAd () { var scaleRatio = adcontainer.offsetWidth/sc.offsetWidth; gsap.set(scalableContent,{scale:scaleRatio}); } window.addEventListener("load", resizeAd); I'm not sure it's the most optimised but it seems to work, I'm waiting for a live test of the media agency. I cleaned up the code a little and maybe this will help others in the futur.

Hello GSAP Community! Thank you so much in advance for your help! I am trying to create a scaled animation on scroll. When user scroll down to section a box will appear from down to center and when it hits center of the screen then start to scale upto 1. It is working on reload window but when i resize window on this section, it suddenly beaks its scaled position. All your help is greatly appreciated!

Hi, it would be of great help if you could help the same to work with counters showing active states of slides and redirecting to the slides when clicked, Thank you!

Can anyone help with a source code where there is a vertical sliders which has clickable target pointers to the slides

Hi @Sharath Lingam - welcome to the GSAP forums! I glanced at that link you provided, and I'm not really sure what effect you thought required inertia. 🤷‍♂️ Inertia is more like for something that has a dynamic speed, often based on user interaction (like drag-flicking), helping it glide to a stop naturally. If you need help with a particular effect, feel free to create a minimal demo showing us your attempt. Please also keep in mind that Club GSAP provides the funding mechanism that makes all of what we do possible. So it feels a little odd for you to pop into our forums that we invest time in for free, asking us to burn time helping you to find a way NOT to join Club GSAP which is the very thing that pays for our time. 🫣 Hopefully you'll find that the membership fee more than pays for itself in a single project. Think about how much you bill for your time, how many hours it'd take to recreate what the bonus plugins do for you, and I bet you'd spend 10x more by trying to do it all on your own. But please don't join Club GSAP if you don't see incredible value there. 👍 Good luck with the project and research.

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.