All Activity

Have you tried using GSAP's ScrollTrigger for pinning and animating the stacked cards? It provides a lot of flexibility for scroll-based animations. Could you share the code snippet you're working with?

It sounds like the issue is due to conflicting CSS transforms applied by both ScrollSmoother and SwiperJS. You might want to try updating your SwiperJS initialization to use `observer: true` and `observeParents: true` options. This should make SwiperJS reinitialize itself when changes are detected, which might help retain the coverflow effect even when ScrollSmoother is active. Also, ensure you're using the latest versions of both libraries, as updates often fix compatibility issues.

Hi, Sorry about the issues, but there is absolutely nothing we can do on a live site, there are just too many elements and styles there that could be interfering with how GSAP and ScrollTrigger should work. The demo I created works as expected so something else in your setup is causing this erratic behaviour. The only suggestion I can give you is to start removing other styles and scripts until this work, then you'll have the culprit and now exactly what to debug and how. Another option is to pin the outmoust element in the site instead of that hero section. Other than that I can't think of something else. Happy Tweening!

Animating the dots is just a question of getting the right element and then animating it, everything was already setup 90% of the way there. You just had to animate the correct element eg .slider_dot_slide. Creating a slider is just a whole other ball game, you need to do so much logic to get everything to work property and is not an easy task. Again this demo seems to have everything, but something seems wrong. I've add some code to test the logic, but it seems like you just cant click on the first element. I don't have time to dive into it now (and it also has nothing to do with GSAP), but the first element is not clickable 🤷. Again sliders are difficult, because you have to build the logic what to do when the slide is animation and someone clicks a dot. Right now nothing will happen because of this line if (isTweening) return; nothing will happen if a slide is already animating, this has again nothing to do with GSAP and shows you how difficult building a slider can be. My advise just keep forking your pen and try making it future complete step by step. Hope it helps and happy tweening! https://codepen.io/mvaneijgen/pen/PovNBNe?editors=0011

hello, I'm Trying to create horizontal parallax scroll the problem in trigger when I write .container as trigger it doesn't work but when I put class that doesn't even exist it work as I wanted also in floor background how can I Stretched the image to make it fill 400vw width ? (view the demo in full page to see the floor image)

Thank you very much for the quick reply! I will look for a bug in the swiperJS!

Hi @NikitaPasspuff and welcome to the GSAP Forums! This seems to be related to something else in your setup and not a GSAP related issue. I forked your demo and used just the GSAP code and it works as expected: https://codepen.io/GreenSock/pen/gOJrjav I'd look into what swiper is doing there and the fact that probably some styles are not being removed after the breakpoint is passed up. Happy Tweening!

Hi, Also these demos can provide some insight: https://codepen.io/GreenSock/pen/VwNPqjO https://codepen.io/GreenSock/pen/Babvqww https://codepen.io/GreenSock/pen/PoLGZoM Happy Tweening!

Hi, I'm not sure if you have a follow up question or not, but mostly this is about JS logic rather than a GSAP related situation TBH.

Hello! I tried to apply what I saw in the replies to this post: I would like your help to understand how I could do the following two things: Synchronize the animation of the lines to be in sync with the slide animation. Click on the dot and move to the specific slide corresponding to the line. Could you help me with how to do this or provide an example that I could work on? I appreciate it!

I'm working on a grid animation using ScrollTrigger where the grid items separate as the user scrolls. I've successfully implemented this, but I wanted to add a pulse animation to the borders of the grid items. The problem is that when both animations run together, some of the borders don't disappear as expected. However, if I disable the grid scrolling animation, the pulse animation works perfectly. I've attached a screenshot and a video to illustrate the issue. Any help or advice on resolving this would be greatly appreciated! https://aegis-sepia.vercel.app/ -> hosted the app on vercel const gridAnimations = () => { // Pulse const scrollTriggerConfig = { trigger: '.fourth-container', start: 'top 100%', scrub: true, markers: true, }; const pulseTimeline = gsap.timeline({ repeat: -1, repeatDelay: 2, onComplete: () => ScrollTrigger.refresh(), }); pulseTimeline .from('.grid-item.active', { border: '1px solid transparent', }) .to('.grid-item.active', { border: '1px solid #16729b', repeat: 0, stagger: { amount: 2, grid: [itemsPerColumn, itemsPerRow], from: 1, }, }) .to('.grid-item.active', { border: '1px solid transparent', stagger: { amount: 1.5, grid: [itemsPerColumn, itemsPerRow], from: 1, }, }); // Scale and opacity animation for grid items gsap.fromTo( '.grid-item', { scale: 0.8, opacity: 1, }, { x: (i) => { var currentRow = Math.floor(i / itemsPerRow); var center = currentRow * itemsPerRow + Math.floor(itemsPerRow / 2); return i <= center ? '-100%' : '100%'; }, y: '100%', scale: 0, stagger: { grid: [itemsPerColumn, itemsPerRow], each: 0.1, from: 15, }, duration: 1, scrollTrigger: scrollTriggerConfig, } ); }; <div key={i} className="active grid-item relative border-[transparent] border before:content-[''] before:absolute before:bottom-0 before:left-0 before:right-0 before:top-0 before:shadow-[1px_10px_70px_black] bg-[var(--bg)] before:z-[1]"> <span></span> </div> SOLVED: It was the due to the shadow applied on the grid items :before Untitled video - Made with Clipchamp.mp4

I think this may have been the issue. It's weird because I've used the useGSAP hook before without registering it as a plugin. I also did not see anywhere in the useGSAP doc's that it needs to be registered. Thanks!

Hello. For a long time I can't solve a responsive issue. If the user changes the size of the viewport from mobile to desktop, the .js-heap-wrapper block shifts. By default, the block (.js-heap-wrapper) animation starts with transform: translate(0px, 0px); But after changing the viewport, it starts with other values (example transform: translate(0px, 750px)). exemple.mp4

I want to make an animation like below example. How can i build that kind of animation in react with the gsap animation tools . If anyone knows how to do that pls give me solution. video.mov

https://stackblitz.com/@gsap-dev/collections you can use this collection to create the demo faster

@mvaneijgen Thanks a lot mate! That helped. I used the onloadingdone event, which waits for the font to finish loading. The code is down below if someone has the same problem. document.fonts.onloadingdone = () => { splittext_code_goes_here; }; (async () => { await document.fonts.load("16px YOUR_FONT"); })(); Update: For some reason, the event doesn't work on iOS. Update 2: I don't know why the code above doesn't work on iOS even if it has support for it. I found this code instead to work fine on iOS and other devices as well. async function isReady() { let ready = await document.fonts.ready; console.log(ready); } isReady()

Hi @GSAP Helper - thanks for the reply. I have worked out what the problem is. As mentioned above, the inline styles on the carousel slides were being reset by scrollSmoother upon scroll, and this is because I'd applied the data-speed attrs to those slides also. Essentially 2 libraries trying to effect the same element at the same time, causing conflict. I've now moved the data-attrs to internal elements and it seems to work perfectly. Hopefully useful for anyone else in future who has a similar issue, regardless of library!

Yeah, deffiently wait until the font is fully loaded before you run the SplitText code something like https://developer.mozilla.org/en-US/docs/Web/API/FontFaceSet/loading_event Hope it helps and happy tweening!

I'm creating a website in webflow and I have a split text animation, and sometimes this happens on mobile. I think I found out what the problem is — splitText splits the lines before the font is loaded (when the text is smaller), I inserted the font locally, and now it happens only sometimes, not all the time. But it still happens, so can someone help me and tell me if is there a workaround for this?

Hi, This is an agency's website. On this website, you will find a section called 'Our Philosophy' when you scroll down. I'm not able to understand how to make the animation in that paragraph so smooth. I have tried a lot but I can't achieve that smoothness. Can you please help me? https://cuberto.com/

Hello, thank you for your answers. Indeed I should have cleaned the css before posting... I finally found the solution, I had left a mixin in my globals scss which was preventing it from working properly: @mixin containerInit($containerName: section, $containerType: inline-size) { container-type: #{$containerType}; container-name: #{$containerName}; } section, header, footer { &:not(.customContainer) { @include containerInit(); } } Thank you for all your advice and also for the Stackblitz starter templates, next time I will use them !

Thank you @mvaneijgen! That's exactly what I was trying to accomplish!

Thanks a lot for your answer. I see now more clearly what i'm doing wrong and how gsap/scrolltrigger works. I'm going to watch, test and learn thanks to your advices. Have a great day.

Thanks for the quick response @Rodrigo.. However, i've tweaked your code a bit and find out how to reverse the mask when it reaches the last slide and transition back to the first slide. And also, animate the current slide to the left to give way to the next slide. Here's my fiddle: https://jsfiddle.net/s1xwc0yf/115/