All Activity

You're welcome! Nice profile image, by the way!! 🐶

Hi, Maybe something like this (better in full screen view probably): https://codepen.io/GreenSock/pen/abrZQJO Happy Tweening!

Thanks a lot @Rodrigo !! Have a nice day ahead!

Thanks @Rodrigo for clearing that up. I'm still learning GSAP and this was a great lesson, cheers 🙏 Can you recommend a tutorial for GSAP, from beginner to expert? Thanks

I'm trying to animate the width of an element using ScrollTrigger and FLIP. It works fine except that on certain viewport widths it adds an unwanted Y translation on the element, usually something like translate3d(0px, -74.8404px, 0px);I first noticed this behaviour after opening up dev tools and refreshing the page (essentially resizing viewport). I also noticed that this might be related to the grid-template-columns of the the parent element which sets the target element to take up min-content. the translation isn't added when i use a fixed width but that causes the image to grow to fit a static layout instead of the layout changing as the image grows. I have attached a codepen link and screenshots of current behaviour and expected behaviour. Thanks and looking forward to a response from the good people of GSAP!! Note that this tends to happen after resizing the viewport and refreshing ( i am yet to make it responsive). it happens with viewports about 600 pixels wide so the bug might not show up in the codepen embed.

Hi, One of the containers that is not the width and height of the viewport has overflow hidden so that creates a crop that looks odd. Also you have to add perspective to a container in order to create a 3D effect: https://developer.mozilla.org/en-US/docs/Web/CSS/perspective https://3dtransforms.desandro.com/perspective I updated the codepen: https://codepen.io/GreenSock/pen/KKLMGMv Hopefully this helps. Happy Tweening!

Hi, Is not really clear what you're trying to do TBH. You are using opacity but also clip path and I don't know how you intend to mix them actually. You can check these demos to see if you can borrow some logic from them: https://codepen.io/GreenSock/pen/zYXWVdw https://codepen.io/GreenSock/pen/LYMbjQw https://codepen.io/GreenSock/pen/wvZqwyg Finally you can use GSAP MatchMedia inside the useGSAP hook, which is what we recommend to: https://stackblitz.com/edit/vitejs-vite-pfhzkf?file=src%2FApp.jsx Happy Tweening!

Hello @Rodrigo! How are you? Hope you are good. Thank you for fixing my demo. Is there a way I could observe the scrolling event inside of a pinned section? In that way, I could create variables to increase the opacity and translateZ of a box according to scroll value. Thank you again, Best regards, Lucy

Hi @lucy99 and welcome to the GSAP Forums! The main issue here is that you were giving the body tag a display flex property and a fixed height, so there was no scrolling available. As a general approach I try to avoid doing that and gibing the body tag too many styles. Here is a fork of your demo: https://codepen.io/GreenSock/pen/KKLMGMv Hopefully this helps. Happy Tweening!

Perfect @mvaneijgen 🥳, this looks exactly like what I needed. I’m glad you made me realize that I had grasped the concept. I was stuck. I discovered through the Swiper.js documentation that the correct name for the functionality this slider should have is touchRatio. This option increases or decreases the movement of the slide container relative to the mouse drag, creating a sort of parallax effect between the slides and the mouse drag. When I mentioned ‘increased scrolling speed’, this is what I meant. Sorry if I didn’t express myself clearly, but I didn’t know what to call this functionality. Anyway, thank you very much for the help you provided.

Hi, I read your post a few times and checked your demo, but unfortunately I don't seem to understand what you're trying to do here. Could you be a bit more explicit about it or post a URL where we can see what you're trying to achieve? Happy Tweening!

@mvaneijgen I checked it now on my pc & while removing the onUpdate definitely resolves the issue with the order (for some reason it wasnt working well until I removed padding fromt he search-container which you also removed however I dont understand why that made a difference) Another issue arises now that the search-container pinning is not working well. It doesnt get pinned below the navbar now It gets pinned to its original position when the page loads. I wanted it to be pinned just below the navbar during the animation both when going into the nav-search-container & out. Also for some reason there are start & and markers throughout the whole height of the page. Why is it not just at the top?

Hi, Yeah I'm not really following what you're trying to do here, maybe you're trying to create something like Toastify?: https://apvarun.github.io/toastify-js/ If you want to just toggle a GSAP instance this would be the approach: https://stackblitz.com/edit/gsap-react-basic-f48716?file=src%2FApp.js Hopefully this helps. Happy Tweening!

Not really, my idea is to pin the container element with ScrollTrigger, nothing more. There is no need for position sticky in this case. The max keyword will use the maximum scrolling distance available, which could lead to unexpected results with pinning: https://gsap.com/docs/v3/Plugins/ScrollTrigger/#end (click the View more details link) Instead I gave a string that is the amount of cards times 50 as a percentage. If you have 6 elements that would read "+=300%", which means 3 times the height of the viewport. Again check the ScrollTrigger docs for the start and end points value. I'm not adding 100, this is the value being passed to the ScrollTo Plugin: scrollTo: { y: tl.scrollTrigger.start + window.innerHeight * 0.5 * i }, When a GSAP instance has a ScrollTrigger configuration, that instance has a scrollTrigger property, that is the ScrollTrigger instance. A ScrollTrigger instance has many properties, among them is a start and end properties that correspond to the scroll value when the ScrollTrigger starts and ends, of course. I'm telling the ScrollTo Plugin to scroll to the start of the ScrollTrigger instance associated with the plus half the height of the viewport times the index of the link. Since we have the same amount of links and cards it matches the scroll position of each card animation. So for the first card it would be this: tl.scrollTrigger.start + window.innerHeight * 0.5 * 0 // tl.scrollTrigger.start And for the final card would be this: tl.scrollTrigger.start + window.innerHeight * 0.5 * 5 // tl.scrollTrigger.start + 2.5 * viewportHeight Remember that the ScrollTrigger instance ends at 3 times the viewport height, which is when the animation of the last card is completed. Hopefully this clear things up. Happy Tweening!

Sorry but I don't understand how the demo I posted doesn't meet those requirements. It uses Draggable with inertia and unlike the demo you linked the one I posted actually has snapping, so you'd never see a card or element halfway. Also I stated in my first post that you were missing something in the bounds calculations, as Mitchel also pointed out. Unfortunately I didn't had the time to go through all your logic and find that at the time. Finally keep in mind that using the Inertia Plugin opens a broad set of options for your Draggable instance, such as min and max duration to smooth the toss even further: https://gsap.com/docs/v3/Plugins/Draggable/#inertia Happy Tweening!

I want the contents on the left to scroll up while the images on the right change as I scroll down, with the previous image fading to opacity: 0. However, I couldn't achieve this. When I first run it, the images overlap. It works correctly only once when scrolling down. Can you help me with this problem? https://stackblitz.com/edit/stackblitz-starters-zwnejb?description=A create-react-app project based on react and react-dom&file=src%2FServices.css,src%2FApp.js&title=React Starter

Hello, First of all, shout out to team GSAP! I'm starting to like and play with GSAP. I would like to replicate a scene, imagine walking down the hallway and the "boxes" are the paintings attached in the wall. So what I did, a pinned section together with the boxes element are set their opacity as 0 and translateZ in negative value. Is there a way I can modify a box's translateZ without limit? It will only stop modifying the translateZ and opacity value when I'm out of the section. Here's a loom video, cannot totally replicate it from the Codepen: https://www.loom.com/share/478a15a500224c058cacd868a97caf27 https://codepen.io/pringkr/pen/bGyeKRq Thank you in advance, GSAP.

I had to restructure your HTML and CSS a bit to get things to play nice with each other. I've added a .trigger element to use as the trigger and an .endTrigger element to use as the end trigger, this element is at the same position as the .bottom element and has the same height. I’ve placed some comments in your JS to better explain things, please be sure to read through them! Hope it helps and happy tweening! https://codepen.io/mvaneijgen/pen/VwOjxzG?editors=1010

@Rodrigo you hero! Thank you so much for your help. Can I buy you a coffee or similar as a thank you? Let's see if I've understood the changes you've made... So it looks like you changed the the position of both the .container and the .navigation from sticky to relative and absolute. Is that so that the .container is still in the document flow? (i'm going to do a refresher on CSS and DOM elements 😅 after this) In the JS i've noticed you moved the Timeline to outside of the forEach which makes sense as the animations should be attaching to one timeline instead of initialising a new one each time, is that correct? You've also changed the end parameter to "+=" + 50 * cards.length + "%"could you have used "max" ? In the timeline you've added pin: true is this so that the .container is pinned during the animation, which I assume is why we don't need the .container to be sticky anymore? Finally you've changed the way the scrollTo in the navigation works. You've set it to tl.scrollTrigger.start + window.innerHeight * 0.5 * i + 100 If I understand this correctly, you're making it responsive. First you're taking the start position of the timelinescrollTrigger which is set to "top top", then you're getting the innerHeight of the window, adding them together and halving them. Are you halving it so you are in the centre of the animation for the card?. You're then multiplying it by the index of the forEach, which will give you the position for each .box, and finally adding 100 so that the .box is in full view. Have I understood that correctly? Again thank you so much for your help, I really appreciate it. 🙏

Thank you it is a great solution. I modified your code and added a fixed header and padding top for the <main> element. https://codepen.io/Matteokr/pen/ExzyEpy I would like make 2 more amends: - the image will be visible a little when I have fixed header - with the left column I would like that always be below the image when scrolling (keep all time the same gap for example 50px) and lock when the image will be locked at the top - the behaviour of the right columns is correct Should I add any gsap animation to the left column? How to achieve that image and left column will move exactly the same amount of px together?

I'm currently stuck on something that sounds pretty simple in theory. However, I'm still having problems implementing it. In the codepen you can see the section "BOTTOM (PIN)". It currently pins as soon as it reaches the viewport. But I want the opposite behavior. How can I get the section .bottom to be pinned from the start (fixed at the bottom of the page) and, as soon as it reaches its original position, simply move up again? I've tried playing with "start" and "end", but I can't get anywhere near the result that the section is pinned from the start. Do you have any ideas? :-)

Hi @Lennart Bellemann welcome to the forum! There is a lot going on your site and sadly we can't debug live websites, there is just no way to modify the code or even see it. All my animation always start in Codepen, so that I can just focus on the basics and don't have to worry about my framework or platform in this case trowing errors. Then when implementing it in my live website I have a working demo ready to debug any issues that come up, by doing this you have a known working version and will save you a lot of headache while debugging. I had a quick look at your site and you load both GSAP and ScrollTrigger twice, next to that there are a lot of other plugins you load, lenis, split type, swiper.js, ect. My advise start by removing large chunks of code to see if the issue disappears then slowing add things back in until the issue comes back, that way you can pin point what the issue is. If you still need help after this, please provide a minimal demo demonstrating the issue, please don't include your whole project just the parts that are causing your issue. Hope it helps and happy tweening!

Hi, I'm using gsap to create a menu animation, and a faq style accordion. Everthing works perfectly on chrome, however things get weird in safari ( as usual..) 1. My menu can't even be clicked - other gsap animtions work fine, it's just the menu. I'm absolutely clueless here, no idea why this doesn't work. I used the same animation in a different project where it works. 2. The faq style accordion works, however the two lines somehow go very far apart and then snap back together. For some reason this only happens on the first click, when i replay the animation by opening and closing the faq accordion, it works fine - just the first time is buggy. I tried fixing this with will-change: transform, and the parent flex to will-change: flex-gap, i set a max height for the parent div of the two lines, no luck so far. to me it looks like its re calculating the position of the lines and the new height because accordion opened at the same time, but i have no idea how to prevent this. here's my webflow read only link https://preview.webflow.com/preview/p102?utm_medium=preview_link&utm_source=designer&utm_content=p102&preview=2eb2afd9827dbe2503f9148839dad918&pageId=6634d062c40d0d42037fb5d7&locale=en&workflow=preview here's the live site: https://p102.webflow.io/wie-ich-arbeite any help is appreciated a lot, thanks!

Well it is exactly what you said. By setting the bound to half the width you've calculated it works as expected. Hope it helps and happy tweening! https://codepen.io/mvaneijgen/pen/JjqKpBg?editors=0010