Carl

Thanks for looking and for the explanation. yup. the circle is inside the scrollbar element. the scrollbar element is being centered, but I expected that the circle would always have a native / starting y of 0 relative to its position inside its parent. I guess I haven't seen the size of the window impact transforms of child elements like this before.

Thanks for the demo. I had some similar code laying around that made for an easy upgrade https://codepen.io/snorkltv/pen/PodyzXb once you undestand all the draggable values @mvaneijgen referred to you can do quite a bit with them. The normalize() utility function makes it easy to get the percent from the minY, maxY, and current y values https://greensock.com/docs/v3/GSAP/UtilityMethods/normalize() ISSUE I hit a weird snag with your original demo in that it seems draggable is reporting unexpected minY and maxY values. It appears the position and margin css setting you were using were causing them to be set to minY:1 and maxY:251. @GreenSock please look https://codepen.io/snorkltv/pen/wvEYzgy?editors=0111 EDIT: it seems to get the weird values you have to view the pen in its own larger window. very strange EDIT 2: works fine in firefox. issue seen in Chrome and Safari

Yes, a minimal demo is always a big help, but these 2 demos should get you a little closer Path https://codepen.io/snorkltv/pen/gOvWdGy viewBox https://codepen.io/snorkltv/pen/xxjqEvj They are from my SVG Animation with GreenSock course which has over 30 lessons to help you understand how to design svgs, hand-code them, and animate them.

Hi @mvaneijgen I wish everyone understood the "what and why" of what I do as well as you do! Thx for all the support in sharing my lessons.

I would lean on the pluckRandom() helper function and create a recursive function that handles the displaying of elements https://codepen.io/snorkltv/pen/PodJXzp?editors=0011 this could make a good lesson. thx.

i really can't follow much of the code in your demo (I don't know a lot about pixi and native canvas stuff) and it's been many years since I've touched the old GSAP syntax and bezier plugin. However, I was able to find and modify an example from the depths of the archives that might help you a bit conceptually. https://codepen.io/snorkltv/pen/mdGMWmB?editors=1111 The basic idea is that you add a bunch of bezier tweens to the same timeline that are offset using the position parameter. The left and right buttons use tweenTo() to tween the progress of the timeline by small amounts in positive or negative directions. For what it's worth, even back then these were fairly advanced concepts so I'm guessing it could be a much to bite off if you are new to the platform. I believe the newer MotionPath plugin would make this quite a bit easier as @mvaneijgen suggested.

Hi @Lamonier Congrats on the new job and thanks for sharing the site. I really enjoyed the variety of animations. I'm going to have to use this as "Exhibit A" for when people ask me why I don't give certificates for my courses. Just the other day I replied to a potential student by saying that "as a former employer I would MUCH rather someone proved competence and effort through a small gallery of examples than be shown a certificate". Your site and experience landing the job is the PERFECT example of this. While I'm here, I'll also add that playing a bunch of videos that you paid for (even mine) is not much of an accomplishment. It takes no skill and doesn't prove anything. I guess that's the end of my Ted Talk as the kids say. ha. Keep up the great work! Carl

Thanks for the demo. transformOrigin only applies to transforms like x, y, rotation, skew, scale. width and height are not transforms for what you want to do I suggest using scaleX. I wasn't sure where you want the line to start and end, but hopefully this demo points you in the right direction. feel free to play with the values. https://codepen.io/snorkltv/pen/WNKVYGV?editors=1010

Hi. It sounds like you are looking for gsap.matchMedia() the docs have an excellent video and a bunch of examples to get you on your way.

being that I just did a lesson on cloning groups in my SVG Animation with GreenSock course, I figured I'd take a stab at this. The top-level approach was: take polygons out of pattern in defs wrap them in a group create a loop-inside-a-loop to clone the initial group and place the clones in a grid animate using same technique as above https://codepen.io/snorkltv/pen/ZEjNvKw?editors=1010 Hope this helps

welcome to the GreenSock forums. thank you for the minimal demo. I don't think you can target unique instances of objects that repeat in a pattern like that. With what you have I think this is the easiest way to randomize it a bit https://codepen.io/snorkltv/pen/rNrgBqm?editors=0110 The only option I know is to programatically create the grid so that each polygon is it's own entity in the svg. There's a chance I'm wrong, and if so, I welcome other ideas.

Great to have you as a student in Creative Coding Club! Definitely check out the lesson ScrollTriggers for Multiple Sections in ScrollTrigger Express. The video goes into great detail on how to loop through multiple elements, find child elements to animate, and control each section's animation with ScrollTrigger. I modified that lesson's demo to include a basic SplitText animation on the <h1> in each section https://codepen.io/snorkltv/pen/gOjZPEY?editors=1010 Side Note: if anyone around here is into 90's imports, a 1994 Supra just sold for $150,000 on BringATrailer.com

Yes it's totally possible to do everything on that site with GSAP. It's important to note that the hero animation is basically a series of images stitched together in a <canvas> element to simulate a video. If you inspect the page you'll see this canvas element <canvas width="1120" height="1002" class="ImageSequencerstyled__Canvas-sc-b2vw9p-0 cJWUKl"></canvas> Notice it has a class containing "ImageSequencer". That's a good clue! If you check the network settings you'll see a TON of images being downloaded. It would be totally possible to use ScrollTrigger to control that sequence of images being rendered.

Thanks Jonathan, the broken link has been updated: GSAP 3 Beyond the Basics

i noticed you have "0 0 100% 100%" as your viewBox. I don't think I've ever seen that before and I'm not sure if it's even valid. As far as making an svg element 100% width and height svgs naturally scale and everything inside them will scale with them (based on viewBox and viewport settings). In the demo below the rounded edge <rect> i started out with is inside an svg that is only 300px by 300px but you will see it scales up with the window size. https://codepen.io/snorkltv/pen/gOjzKoE?editors=1010 as far as the percentage values used by DrawSVG I really can't explain it much better than the interactive example in the docs https://greensock.com/docs/v3/Plugins/DrawSVGPlugin In the examples where we have the lines drawing from center-top i have a full lesson on how those measurements are calculated in my SVG Animation with GreenSock course. the reason i use a set is because we need to specify the starting and ending values, you could also use a fromTo(). If you are struggling with creating svg elements, I strongly recommend BoxySVG it's free and I use it loads in my course. In the video below you'll see how to: create a rectangle with rounded corners convert it to a path add a custom start point split-path-quick-tip.mp4 view the rounded rectangle as path svg (in google chrome) Trust me, SVG is full of pitfalls and it took me years to really figure it all out and I'm still learning. Hopefully these resources can help get you closer to achieving the goals of your project.