mvaneijgen

The best thing to do with ScrollTrigger is to remove it! This seems counter intuitive, but ScrollTrigger is just animating something on scroll, so just focus on the animation at first and only when you're happy with the animation add ScrollTrigger back in. I don't know where your orange panel is hiding, but this is what I would do. Just add the animation to the timeline when you want them to happen and when you're happy with the animation turn ScrollTrigger back on. https://codepen.io/mvaneijgen/pen/oNdpybg?editors=1010

Your end trigger is above your start trigger. So as soon as the animation is ready to play it is already finished, so that is why it jumps to 100%. I think you want to use endTrigger: instead of end: because you've given it a element instead of a number or the other properties, check the docs for more info on the properties Also your .hero element gets pinned and loses it's padding or something. I've given it a margin-top instead, but now it starts way lower, but it doesn't jump when it gets pinned. There is a lot of code in your minimal demo, we ask for minimal demo's with a few lines of code and some colored divs, because they are way easier for someone to jump in to. https://codepen.io/mvaneijgen/pen/PoeEOxv?editors=0010

All the animations start at the same time, but the once from the left start at -100 that is 100% to the left of the browser eg they are not visible. So I think you like to stay between 0 ,100 instead of -100, 100. That is not randomly. If you do random they could all come from the same direction. I would build a more elaborate wrap so that you have the control you want. const wrap = gsap.utils.wrap([-100, 100, 70, -20, -50, 70, -20, 50, 0, 40]) you can add as much numbers as you want, just play with these until you find something that works for you. https://codepen.io/mvaneijgen/pen/zYjpPjw

I can see that! that is some old syntax you're using. This isn't bad, but personally I like the new syntax way more. I did a small demo to demonstrate what is possible. I did use the new syntax though. https://codepen.io/mvaneijgen/pen/rNvpNdy?editors=1011

Hi @Bills123 welcome to the forum! I think there is no other solution than using a SVG. The problem is that your circles are no circles, but just boxes with rounded corners, so as far as I know there is no information that you could get about the outer edge of the shape and move something along that. That is what SVG shapes are great for. It doesn't mean that you need to rebuild your whole banner in SVG, but the SVG can just be a layer in your project. Just create a SVG with the shapes in it that need the special motion path animation and leave the rest as normal HTML tags like you are used to. If the SVG is the same size as the banner I would not see what could cause troubles. SVGs can be transparent, they can move on the z-axis, so you can position them with z-index in front or behind elements. Seems like the perfect start to get your feet wet in the land of the SVGs!

Your SVG doesn't have a viewBox. An SVG with a viewBox are responsive by default. I don't think you know the viewBox size of each shape that will be drawn, so you'll have to calculate it based on the drawn shape or allow the user to only draw within a known viewBox. https://codepen.io/mvaneijgen/pen/VwxyZrP

I've removed the .fromTo() and just use a .to() tween, because the item is all at it's original position. I've also added an easing of none, so there should not be an ease. You can also set a custom yoyoEase, see below https://codepen.io/mvaneijgen/pen/LYmOvvY?editors=1010

Of course! Just make sure the tween is paused initially and play it like you do now. There are also a lot more callbacks you can use instead of onUpdate. There is onLeave for when you leave the ScrollTrigger and onEnterBack are the once that I would use instead of the if statement you have now in onUpdate, but this works, so you could also leave it as is. See the docs for more info https://codepen.io/mvaneijgen/pen/GRdOemP?editors=0010

@ezygaming I like to split out the animation to there respected elements and try not to animate the same object with multiple (separate) timelines. If that happens I'll just add a new element and animate that element instead. That is what I did here. I gave your image a container and instead of animating the same element twice, I just animate the container. https://codepen.io/mvaneijgen/pen/ExLbrLV?editors=1010

No but it shows you the tween that is causing your issue. And I've suggested more on how you could fix that issue by animating different properties. See below: You have to ask yourself "do I want my animation to happen on scroll? or do I want to watch for the scroll event and then animate something?" ScrollTrigger is the plugin that allows you too animate something based on the scroll position of the vistors and this is what you now use. There is also another plugin called the Observer plugin, this one allows you to watch for all kinds of events and do something based on these events. See the example bellow here, it animates to the next slide based on the user scroll interaction, but is doesn't scroll the page. (See the docs for more info) https://codepen.io/GreenSock/pen/XWzRraJ

That will require some reevaluation. And I don't know if it is as simple as ripping out everything with ScrollTrigger and repurposing what is already there, but it seems to work some what. It needs some more work based on the timings and the anchor links need to be restructured so that they work both forwards and backwards. But this would be the general setup. https://codepen.io/mvaneijgen/pen/wvjPRPg?editors=1011

It requires some setup I've made a demo time ago that does this (Also check the docs) https://codepen.io/mvaneijgen/pen/rNdzEpe?editors=0010 And a topic where some useful tips where discussed

Your T-shirt was somewhere far outside the canvas of the SVG viewBox and really large (and it was also upside down). I've opened it up in some vector editing software and moved it to the middle of the viewBox and scaled it down a bit. I've also move the circle to the middle, so that it looks like the T-shirt is created form the circle Working with SVGs on the web requires a bit more setup to make sure all the elements are ready for animating. If you are looking for some really simple tool to edit SVG files look at Boxy SVG. https://boxy-svg.com/app Our @Carl has some great tutorials about it, see https://www.youtube.com/user/snorklTV/videos https://codepen.io/mvaneijgen/pen/MWGOJLv

Immediately sets properties of the target(s) accordingly - essentially a zero-duration to() tween with a more intuitive name. See the docs for more info ScrollTrigger is a plugin for GSAP that animates timelines based on the scroll position. If you add a timeline to a ScrollTrigger, in theory the duration does nothing anymore, except determines the timing on scroll. If you have a ScrollTrigger that is a 1000px long and have 10 tweens of each a second, each animation will play over 100px. Play with the position parameter or add an empty tween to your timeline between the tweens that needs a delay tl.add(() => {}, "+=1") this does nothing for 1 second or it's scroll distance equivalent

You'll need to calculate that, you can use the property .offsetTop on the element. Important if you do this you want to also set the transformOrigin, so that it is aligned to the top edge of the box. Check the comments in the code for more details. Any particular reason you've used a keyframe? It's just one tween, so I've set it up as a normal tween, but the keyframe code it also still there if you really need it. https://codepen.io/mvaneijgen/pen/eYregZB