Carl

That extra space is probably due to the 3000px you have in your end value. Questions about this type of layout come up a bit around here. I'm in the process of making a lesson. The video in this tweet gives some background on the basic setup I added a little animation on the right in this updated (yet not finished) demo https://codepen.io/snorkltv/pen/MWPgoXV

Nice job getting it set up. it looks like you were loading multiple versions of ScrollTrigger. As @mvaneijgen mentioned it looked like there were some issues with the external asset hosting earlier. This works at the time of posting https://codepen.io/snorkltv/pen/WNaewvB

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.

I'd say most of the time, if you want to set funky start positions for rectangles it's probably best / easiest just to use a path as @alig01 suggested. However, using the width and height you can calculate the top center and bottom center coordinates. https://codepen.io/snorkltv/pen/wvxjJwP?editors=1010 If you add rx attributes to both it will require some tweaking of the numbers, which again would bring us back to a <path>

Very glad to hear it worked!

Hi, i'm not exactly sure what effect you are going for. FWIW it seems a bit disorienting to move something down to a y:200 while scrolling up. That aside I would avoid creating 2 timelines initially time that control the same properties of the same thing. To avoid conflicts I would suggest creating these animations fresh when you need them inside your callbacks sort of like: ScrollTrigger.create({ trigger: ".top-page", start: "top-=100 top", end: "top+=200 top", markers: true, onEnter: () => {let tl1 = gsap.timeline({}) .fromTo("header", { y: 0, overwrite: 'auto' },{ duration: 2, y: 200, ease: CustomEase.create("custom", "0.5, 0, 0, 1"), overwrite: 'auto' })}, onLeaveBack: () => {let tl2 = gsap.timeline({}) .to("header", { scale: 1.2, y: 200, }) .set("header", {y: 200,scale: 1,},"hide") .to("header", {opacity:1},"start2") .to(("header"), { y: 0, duration: 1, ease: "power4.out" }, "start2")} }); I would also remove locomotive scroll until you know things are working fine without it. Hopefully this set up will allow you to remove some of redundancy between the 2 animations like tweening and setting y:200 multiple times. If you need more help please try to simplify the animations as much as possible in a fork of the original pen.

welcome to the GreenSock forums, Thanks for the demo. Unfortunately, the code is a bit much to untangle quickly and I'm not really sure what effect you are going for. However, my advice would be to make sure your trigger is not the same thing that you are animating. If you animate the trigger it can mess up all the measurements ScrollTrigger needs to make. try something like this <div class="triggerElement"> <div class="targetOfAnimation"></div> </div> If that doesn't help please consider simplifying the demo by removing mapper objects, parsing functions and passing data around through functions like scrollListner(element, anim1, animateOnce, mirror); I understand it is probably an elegant and effective way for you to code but it causes first-time viewers additional effort to decipher. thanks!

Hi Louis, Nice to see you. Greart demo. Please try moving the GSDevTools.create() to the very end of your js after the forEach loop. It appears to resolve the issue.

Wow @GreenSock this is incredible.

similar to @Rodrigo's slick approach I tend to reach for solutions that end up with a timeline being constructed. I also like to lean on as many of the API features as possible like: repeat, repeatDelay, stagger, etc. From what i understand every item fades in and fades out except the first item which doesn't need to fade in. Using a Loop add a single tween to a timeline that fades the first item out. Then loop through the rest and add a repeating tween to the timeline that fades each item in and out. https://codepen.io/snorkltv/pen/rNrzobQ?editors=1010 tweenFromTo() Here I build a timeline with a single stagger and use tweenFromTo() to omit the part of the timeline where the first item fades in https://codepen.io/snorkltv/pen/LYBjMJK I added GSDevTools so that you can mess with the fade and static variables and test that they are working properly. There are many ways to approach these things and the best one is the one you're most comfortable with. Note: Rodrigo's approach would have a clear advantage if you want a different ease or animation for the enter and exit animations.

Great work. The timing with the music is spot on.