All Activity

When working with ScrollTrigger it is best to let it handle all the positioning of elements. Eg in this case create a ScrollTrigger that pins the element you want to pin until you don't want to pin in anymore. I hade to tweak your CSS a bit to get it to behave it selfs, but it could then look something like this. Hope it helps and happy tweening! https://codepen.io/mvaneijgen/pen/xxNOpJj?editors=0100

Hi there! It sounds like there might be a billing error. I recommend reaching out to the GSAP support team directly to get this sorted out. They should be able to help you with the double charge.

I've just written a guide how ScrollTo works. I think you don't want to scroll to an element in your case, but to the start of a specific ScrollTrigger. Check out the post below and also @GreenSock's comment. Hope it helps and happy tweening!

I'm working on a project where I'm using GSAP, ScrollTrigger, and scrollsmoother. I have a fixed element that I want to remain fixed until ScrollTrigger is fired, at which point I want it to move along with the rest of the page smoothly. I've attempted two approaches: one with the fixed element positioned outside the id="smooth-content" container (https://codepen.io/mp1985/pen/ZENOaeg) and another with the same element positioned absolutely within the id="smooth-content" container (https://codepen.io/mp1985/pen/LYoZOmW). However, I'm encountering difficulties in achieving the desired behavior. Is there a recommended approach to accomplish this? is there a way to obtain the scroll value when ScrollTrigger is fired so then I can synchronize the movement of the fixed (or absolute) element accordingly? Any insights or guidance would be greatly appreciated!

https://codepen.io/GreenSock/pen/LZOMKY I modified the scrollTo example code, but the result did not work as I expected. I added offsetY to scrollTo, the first click works perfectly when the scroll position is less than the element's scroll position. However, if I repeatedly click, the offsetY continues to apply, rather than staying fixed at the desired element and then applying the offset. When the scroll position is greater than the element's position, it cannot scroll to the desired position at all. I expected it to work like box2. Currently, for box2, I am using a fixed y value.

Ah ok, this sounds a lot like big chunks of third party code fighting with each other. That's usually the difficulty with dropping in different libraries that handle interaction and listen/react to scroll/wheel events. Pretty tricky for us to debug too I'm afraid. Sorry, it sounds frustrating.

Hello Thanks a lot for your answers. Thanks to your comments, I have reached my goal and my animation is like i wanted to be. Have a nice day

Thank you @mvaneijgen. Originally the code was much shorter & on update was not there. I was just trying many different things (without being sure when to use what in GSAP) and some things were added unnecessarily & removed over many different revisions hence why I made sure to add comments to everything as this was just me trying all different things. Your version seems to work perfectly I will check later when I am at my PC to make sure but it seems to be exactly what I am looking for. Many thanks.

I just tested it and it just works? Am I missing something? Hope it helps and happy tweening! https://codepen.io/mvaneijgen/pen/oNRLGKb?editors=0010

Hi @AlexLaforge welcome to the forum! Check out this demo from the ScrollTrigger demo page https://gsap.com/demos/?page=1&tags=ScrollTrigger Hope it helps and happy tweening! https://codepen.io/GreenSock/pen/eYpGLYL?editors=0010

Hi @Yiddy welcome to the forum! I'm not sure what your onUpdate code is doing, to me it also seems really wasteful to do new calculation on each tick. The onLeave and onLeaveBack seems perfect and it already changes its width on reparenting, so why add more complexity? If you want more to happen Flip just returns a tween, so you can add that to a timeline if you want with tl.add(myFlipAnimation) and do more on that timeline. Also normally people add an animation to a ScrollTrigger and then ScrollTrigger plays or reverses the animation. Your setup works, but in theory it is creating a new animation each time you scroll up and down. Hope it helps and happy tweening! https://codepen.io/mvaneijgen/pen/dyEXVqo?editors=1000

Hi, Thank you for your response and for the example you shared. Unfortunately, it’s not very helpful as it appears to be a normal draggable carousel. I need to maintain the features of smooth movement and increased scrolling speed. It seems that the issue with the boundaries might be due to the fact that we are moving the slide container at double the speed of the drag, resulting in the container traveling twice the distance. Consequently, it does not respect the container’s limits. Thank you again. I look forward to any further help you can provide and will continue experimenting on my own in the meantime. Best regards, Marco

Sorry for the late response! So im building the Website with Wordpress and i have a Theme installed. There apparently was a hidden section from the Theme where i had to change the page container from standard to full-width and now its working again. On another one of my pages i was using a flipbook-plugin and whenever i was hovering over the flipbook with the mouse it wouldn't let me scroll any further as well. On that page i switched to full-width in the page container section as well, but it was still not working. Only when i removed the scrollsmoother it was working again. I haven't looked deeper into this but since there wasn't much content on the page to begin with i just kept it without the scrollsmoother so far.

Hi Rodrigo, thanks for your help! I think I might have oversimplified the CodePen. The reason I can’t use position:absolute (at least in my understanding) is that eventually, the animation should end (either by timeout or click) and the letter should return to its original position, which is centered in a fixed header. It is not going to be a single letter either, but a word that I split with SplitText. So there’s a couple of letters floating around. Makes sense? I’ve update my CodePen slightly to illustrate this better.

Hi Rodrigo, Thanks for the solution. I Implemented the owl layer reveal animation and it's working fine. But the issue which I'm facing is , to reverse the animation of current sections before new section appear on the view port. I used GSAP first time, so I'm not getting idea how to reverse animation. I hope you have checked the animation as it available on this site. https://pave.ai/

I am new to GSAP & have been playing around & failing. Chatgpt was not much help either. I am trying to get the searchbar to change the width while outside the navbar which works well when scrolling down however when scrolling back up the width changes before the position changes.

I can get the hand to "stick" to the end of the arm when the animation starts, but the minute update Paths starts, the coordinate system gets wonky. I'm trying to use the motion path plugin relative path function, but just can't get it right. Also would like to rotate the hand from 6 to 12 o clock while it's moving, but that's a dream right now.

Hi Rodrigo, thanks for your reply. However, it's quite different from the original. I want to use the <dialog> element (for all its benefits). Also, I was using the useGSAP() function.

Hi, I would like to achieve this type of effect using GSAP : animate the skewY property while scrolling : https://codepen.io/rauldronca/pen/yQrmeE My first attempt is below, but with the obvious problem that GSAP seems to ignore the duration property, and reverts to the original skewY:0rad almost instantly. <div class="blocks-container"> <div style="width:100px;height:100px">BOX A</div> <div style="width:100px;height:100px">BOX B</div> <div style="width:100px;height:100px">BOX C</div> <div style="width:100px;height:100px">BOX D</div> </div> var obs01 = Observer.create({ target: 'blocks-container', type: "wheel,touch", onChange: function(self){ //Compute the distortion var newRad = Math.round((self.velocityY/5000)*2, 2); //var newRad = Math.round((self.deltaY/1000)*2, 2); //Put limits on distortion if(newRad > 0.125){ newRad = 0.125; }else if(newRad < -0.125){ newRad = -0.125; } //Apply distortion that will (should) last 3 seconds to get back to the normal "skewY:0rad" gsap.fromTo('.blocks-container > div', { duration: 3, skewY: newRad+"rad", }, { ease: "sine.out", duration: 3, skewY: "0rad", }); }, });

(https://e-money.madebyburo.com/ ) How can I make a line scrolling downwards on the left in the services block on the website? https://prnt.sc/gY1V00Hm1YO-

Hi, To illustrate the concept Mitchel was referring to with loops let's look at this snippet: <div class="element-1"></div> <div class="element-1"></div> <div class="element-2"></div> <div class="element-2"></div> <div class="element-1"></div> <div class="element-1"></div> <div class="element-2"></div> <div class="element-2"></div> So you have interchanged elements with two classes, nothing out of the ordinary, right? But what happens if you write this JS? const elOne = gsap.utils.toArray(".element-1"); const elTwo = gsap.utils.toArray(".element-2"); elOne.forEach((el, i) => { gsap.to(el, { x: 100, scrollTrigger: { trigger: el, start: "top center", end: "bottom center", pin: true, }, }); }); elTwo.forEach((el, i) => { gsap.to(el, { x: -100, scrollTrigger: { trigger: el, start: "top center", end: "bottom center", pin: true, }, }); }); That will pin all 4 elements with the element-1 class including the final two that are before or above the first two elements with the class element-2. So the calculations made by ScrollTrigger for the two final element-1 elements will be wrong because of the pin space created in the second loop, so in those cases after the final loop is a good idea to run the refresh method: https://gsap.com/docs/v3/Plugins/ScrollTrigger/static.refresh() const elOne = gsap.utils.toArray(".element-1"); const elTwo = gsap.utils.toArray(".element-2"); elOne.forEach((el, i) => { ... }); elTwo.forEach((el, i) => { ... }); ScrollTrigger.refresh(); In order to correctly run it's calculations, ScrollTrigger needs to take the document to the top (scroll to zero) that's why you see that jump. You can use the clearScrollMemory method in order to keep the document at the top and avoid that jump back to the previous scroll position when reloading: https://gsap.com/docs/v3/Plugins/ScrollTrigger/static.clearScrollMemory() Finally I forked your demo and replaced the images with a placeholder (the url you were using is not working) and it seems to work as expected when I reload the page in the debug mode on the latest Chrome and Firefox on Ubuntu 20 & 22: https://codepen.io/GreenSock/pen/PovzpJr Debug: https://cdpn.io/pen/debug/PovzpJr Maybe there is a way to reproduce this that I'm missing 🤷‍♂️ Happy Tweening!

Hi, I think you are overcomplicating this a bit. Having the element inside a flex container that centers it adds a layer of complexity regarding the initial position. Is better to have the element with position absolute so the coordinates x: 0 and y: 0 are the top left of the screen and not the center. Then just use the option to create random values on each repeat: https://gsap.com/docs/v3/GSAP/gsap.to()#random-values Here is a fork of your demo: https://codepen.io/GreenSock/pen/oNRLZNE Hopefully this helps. Happy Tweening!

Hi, This is mostly about the way position: sticky works. It works as a relative element until it becomes sticky, then it behaves as fixed/absolute, therefore is taken out of the document flow, the same applies with the cards in your left column which are absolutely positioned: https://developer.mozilla.org/en-US/docs/Web/CSS/position#sticky Here is a fork of your demo with some changes to the styles and the JS logic: https://codepen.io/GreenSock/pen/mdYErob Hopefully this helps. Happy Tweening!

💚

Thanks for being so kind and forgiving. We have the best customers. 💚