Leaderboard

I think the problem happens because you are not listening for the scrolling event I created a quick demo where you listen to leave and enter events on the section and also the scrolling https://codepen.io/ahmed-attia/pen/KKEYodo?editors=0010 https://codepen.io/ahmed-attia/pen/wvOZmLx another one with border-radius and mix-blend-mode instead of svg and clipping to edit the border-radius https://9elements.github.io/fancy-border-radius/ https://codepen.io/ahmed-attia/pen/BabEPbx?editors=0110 I hope this helps a little, PS: this code was created by (gsap helper 🫡 or Rodrigo 🫡 I can't remember ) he added it as a solution in a different scenario i just added the scale to get closer to your idea

Hi @Bayu Handono, What do you have trouble with? Seems to work at my end. I've written a guide how to work with clip-path in GSAP with a link to a tool which with I make my clip-paths https://bennettfeely.com/clippy/ if you just drag the points to the bottom of the square it will animate .from() the bottom to the top. Hope it helps and happy tweening! As an example https://codepen.io/mvaneijgen/pen/LYavRmQ?editors=0110

Your thought process is not wrong, but I think you have a logic issue here. You have a timeline with ScrollTrigger and are adding that to a master timeline which also includes another timeline, when should that later timeline start animating? I know you want to animate when the ScrollTrigger is done, but that would not work like this. I've removed your master timeline (btw I would not use TimelineMax that is from an old version of GSAP you can now just directly call gsap.timeline()). I've also removed the function of your ScrollTrigger timeline and have it do it's thing on page load, then I've added an onLeave call back to you ScrollTrigger that fires when you leave the ScrollTrigger eg when it is done animating and then I call your function bobInfinite(). I've also add a clamp to your ScrollTrigger, now it will only start animating when the visitor has really scrolled. Hope it helps and happy tweening! https://codepen.io/mvaneijgen/pen/RwdOgwa?editors=0011 If you want to know why the calculations where all off, this is because GSAP records all the values on page load an then when it needs to animate it just does that, so in your demo on page load it would see where all the dots are and record there positions, but then when everything was done all the positioned changed and all the calculations it did where off. Right now the onLeave ensures that the moment GSAP does it's calculations the elements are at their final position and thus all the calculations are correct

Hi @shibz welcome to the forum! There are no elements with the id #b1_2 in your html, I've hooked up a random button to the javascript to click on. There is also no container defined, so I've set this to .avis__sur-3s, so indeed your demo would do nothing, because everything you target doesn't exist. I've never used scrollLeft, but I would use our ScrollTo plugin https://gsap.com/docs/v3/Plugins/ScrollToPlugin?_highlight=scrollto, this allows you to get much more control and you can just target the element directly and GSAP will calculate an offset. Also highly recommend using the latest versions of the plugins you were loading version 3.9 and where are currently at version 3.12.5 I've set it to load in the Javascript settings panel in codepen. Hope it helps and happy tweening! https://codepen.io/mvaneijgen/pen/qBvwmVL?editors=1011

Hi @EduardB welcome to the forum! Without a minimal demo it is hard to help you debug. Javascript is 1/3 of the code that is used for GSAP to do its thing. For instance if you have the following in your CSS transition: all 300ms ease-in; you're going to get choppy animations, because then you have Javascript and CSS fighting for who gets to animate what I'm not well versed in willChange: but I would set in in CSS instead of JS, because it is a tool to tell the browser "heads up" this is going to change, so setting it in JS when it is changing feels a bit late. Also you can set properties that will-change and scale, translateY are no CSS properties (well they are kinda, but it is not what GSAP uses) it are values of transform. If you could make a minimal demo we would be happy to take a look at your setup and help you debug. Hope it helps and happy tweening! https://codepen.io/GreenSock/pen/aYYOdN

I don't have time to debug your function, but you're using GSAP anyways, so why not let GSAP handle it for you? I've add a tween to your onEnter which animates the innerText of the h3 to the number in the dataset. It has a delay of 3 seconds on the tween. 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://gsap.com/docs/v3/GSAP/CorePlugins/Snap/?_highlight=snap https://codepen.io/mvaneijgen/pen/poYBREO?editors=1010

I would set a scale on the image (maybe calculate how much you need the scale to be based ont the window.hight and the image height). Also set the image to object fit cover and add a clamp to the ScrollTrigger, so that it always starts from a point even if it already should be playing. Check out for an explanation. I've modified your pen a bit, to visually see where the image is and the red border shows where it's clipping it off. Hope it helps and happy tweening! https://codepen.io/mvaneijgen/pen/gOEyLLO

You'll also want to be careful of trying to animate images before they load, as they could calculate as 0 for the height and 50% (yPercent) of 0 is 0, so they may not move.

scrub: true is one way to solve this. You'll loose the smoothing effect, but it'll tie the animation directly to the scroll, otherwise it's taking .8s for the animation to catch up, and if you scroll too fast, you're missing the end. Your math isn't accounting for the 64px gap. You'll want your math to be: (offerItems[0].offsetWidth * offerItems.length) - (64 * (offerItems.length - 1))

Heya, Yep, if you've followed the youtube video you'll have seen how to do it. You can't change the order of table rows with a class, but you can physically manipulate the DOM. 1) Grab the state 2) Update the DOM with JS 3) Animate! Here you go - https://codepen.io/GreenSock/pen/poYYmzR

Yeah I would restructure your layout so that you can easily do this. Right now you moved the whole container its width over the whole screen, but I would instead position all your elements on top of each other, something like this https://codepen.io/mvaneijgen/pen/MWxxLQV?editors=0010 And move the elements in view when you need them, then it will be also much simpler to have certain things happen at the same time. Hope it helps and happy tweening! https://codepen.io/mvaneijgen/pen/jOJJJzX?editors=0100

hi @FilipTheGod happy to see you around, unfortunately, it's hard to debug your code if you didn't add/create a minimal demo, also it can be done in different ways with but idk whats your layout looks like

Ahh yeah no better GSAP teacher than @Carl!

This video @Cassie made should explain how to resolve this: Happy Tweening!

Hi @mvaneijgen, Thanks for quick feedback! I have tried in fact using that refresh on Video DOM loaded function, but I got the same issue. I tried in another way now, adding it into a fake trigger event, wrapping with pin-spacer div and the issue looks like is not reproducible anymore. Let's see if is no any other issue will be appear, otherwise I will come back with another question here maybe. Best, Kevin.

You can pass the helper function the repeat property an then set it to -1 if you don't want it to stop. Hope it helps and happy tweening! https://gsap.com/docs/v3/HelperFunctions/helpers/seamlessLoop https://codepen.io/mvaneijgen/pen/poYBwBB?editors=0010

Seen that you want this all to happen right after each other I would just add the tween to the one timeline you have and just make the scaling part of the whole timeline. If you want to have the pinning of everting start earlier then just create an extra ScrollTrigger that just does the pinning. Hope it helps and happy tweening! https://codepen.io/mvaneijgen/pen/bGZJWzW?editors=0010

Sounds like a perfect use case for gsap.matchMedia() https://gsap.com/docs/v3/GSAP/gsap.matchMedia()/ Although I have to say that I can't see it breaking, but of course I don't know what "well displayed" means. I see an eye loop and a cross and no matter what I do with the screen size everything keeps working and toggling between, but if there was an issue gsap.matchMedia() could fix this, because it refreshes all the states when it sees a resize. Hope it helps and happy tweening!

Hi @Cloud89 I went with a little refinements on the solution that @mvaneijgen posted. If the auto scrolling was not a requirement for this project, I would have used the "just let the user scroll" option. My feeling is that this way would be more usable and less "laggy" for the user. But, on mobile devices, I just used a regular way of scrolling, with a long page the user can scroll through. You can see the result of the live site here: https://great-things.nl

Hi, It seems that using revertOnUpdate: true does the trick: useGSAP(() => { // ... }, { scope: holder, dependencies: [windowWidth], revertOnUpdate: true // <- HERE }); It seems that the problem stems from the fact that the previous instances of the cycling animations are not getting killed before creating a new one and the inline styles are throwing off the data for the new ones. https://gsap.com/resources/React#config-object Also as a friendly advice I'd debounce the resize handler and perhaps fade out/in the images because even without the jump the UI (which is great by the way! 🤩) looks odd with the images suddenly jumping when the new position is created. Hopefully this helps. Happy Tweening!

You had the scroller set incorrectly and I'm not really sure how you wanted the effect to work, but maybe this will get you going in the right direction: https://codepen.io/GreenSock/pen/KKEYKOj

Hi, Indeed Draggable would be the way to do this, here are a couple of simple demos: https://codepen.io/GreenSock/pen/rNRRbNx https://codepen.io/GreenSock/pen/mdoogdL Hopefully this helps. Happy Tweening!

I was working on a basic example, but the article from @PointC that @mvaneijgen mentioned will explain everything you need to know and more! https://codepen.io/snorkltv/pen/mdooqQX?editors=1010

Have you seen DrawSVG https://gsap.com/docs/v3/Plugins/DrawSVGPlugin/. Check out @PointC tutorial how to do with with dashed paths https://www.motiontricks.com/svg-dashed-line-animation/ I would also recommend when creating a timeline to put the ScrollTrigger on the timeline, to prevent confusion later in development, because individual tweens can't have ScrollTrigger of them selfs, only a timeline can! Hope it helps and happy tweening! https://codepen.io/mvaneijgen/pen/jOJJavR?editors=0010

In case it's useful, I put together a helper function that'll normalize all the values inside a path so that they're between 0 and 1: function normalizePath(path) { path = gsap.utils.toArray(path); if (!path[0].hasAttribute("d")) { path = gsap.utils.toArray(path[0].children); } if (path.length > 1) { path.forEach(normalizePath); return path; } let _svgPathExp = /[achlmqstvz]|(-?\d*\.?\d*(?:e[\-+]?\d+)?)[0-9]/ig, _scientific = /[\+\-]?\d*\.?\d+e[\+\-]?\d+/ig, d = path[0].getAttribute("d"), a = d.replace(_scientific, m => { let n = +m; return (n < 0.0001 && n > -0.0001) ? 0 : n; }).match(_svgPathExp), nums = a.filter(n => !isNaN(n)).map(n => +n), normalize = gsap.utils.normalize(Math.min(...nums), Math.max(...nums)), finals = a.map(val => isNaN(val) ? val : normalize(+val)), s = "", prevWasCommand; finals.forEach((value, i) => { let isCommand = isNaN(value) s += (isCommand && i ? " " : prevWasCommand || !i ? "" : ",") + value; prevWasCommand = isCommand; }); path[0].setAttribute("d", s); return path; } Usage: normalizePath("#mask") So that'll make a path like this: <path d="M3903,6453.410182017132 L300,1.542786465904 L-10000,1481.542786465904 L-10000,6453.410182017132 Z"></path> Into this: <path d="M0.8449920014268762,1 L0.6260100420554431,0.6078705068325081 L0,0.6978214643317369 L0,1 Z"></path> I hope that helps somebody.

We really try to keep these forums focused on GSAP-specific questions. What you're asking is much more of an SVG/CSS/markup thing. I'm not super familiar with masking, but you'll probably need to wrap your elements in something that has the mask applied (otherwise the mask will just move with the animating element), and then you'll need to rework your SVG artwork on the <clipPath> so that the shape encompasses the area where you'd want to see the text (currently your <path> is where you DON'T want the text visible). So basically invert it. Here's a quick example that has the mask still inverted (I don't have the time to rework all your SVG): https://codepen.io/GreenSock/pen/PoLVLzQ?editors=1010 I hope that gets you moving in the right direction.

Thanks guys, with the help of the video I've got it working how I need it! https://codepen.io/mrjonoces/pen/eYXQOBq

Hey seems like @chrisgannon has been hiding this gem from us, now there is no choice but the bookmark Chris' youtube channel as well 😆 Thanks for sharing that Mitchel!! 👏

I hadn't seen this video! What a gem!

Have you tried creating two shapes and then morphing them? That would be the most simple solution. What you also can do is write out the path by hand and then update individual points directly with code, to me this is really magic and hard to understand, but with it you get the most control over what the animation is doing. Chris Gannon did a tutorial how you could go about doing this might be a good starting point. Hope it helps and happy tweening! https://codepen.io/chrisgannon/pen/KKpzMJd?editors=0010

Not at all that isn't strange! These kind of tools (page builder) like to just add CSS willy-nilly to any object and transition: all; is one of the CSS tropes that should not be added to any object and certainly not to elements you want to animate with GSAP! Read the following: You should never apply CSS transitions to anything that JavaScript is animating because not only is it horrible for performance, but it'll prolong all the effects because whenever JavaScript updates a value (which GSAP typically does 60 times per second), the CSS transitions interrupt and say "NOPE! I won't allow that value to be changed right now...instead, I'm gonna slowly make it change over time". So it disrupts things, adds a bunch of load to the CPU because you've now got CSS and JS both fighting over the same properties, but let's say you've got a 1-second tween and the CSS transitions are set to take 1000ms...that means what you intended to take 1 second will actually take 2 seconds to complete.

Hi @axiome You can animate the timeScale of an animation. So something like this. let tween = gsap.to(".marquee__part", { xPercent: -100, repeat: -1, duration: 10, ease: "linear" }).totalProgress(0.5); ... gsap.to(tween, { timeScale: someCondition ? 1 : -1 // -1 will reverse the animation });