Carl

your second tween is using the default ease of power1.out. add an ease:"none" to the second tween and it should line up nicely. .to ("#motionDraw", {drawSVG: "0%", ease:"none"},"<")

Here's another one from the GreenSock team that may help https://codepen.io/snorkltv/pen/KKmZYGy I have a bonus video that goes over the basic setup in my free GSAP beginner's course as bonus lesson.

Hi Adam, Thanks for the mention. So nice to hear you are finding the courses helpful. That's a cool animation you have already. ? I don't have time at the moment to experiment with this, but in addition to @GreenSock's great advice I'd recommend taking a step back perhaps and see if you can get the visual effect you want to work in just a straight line. It might get a bit challenging with the rounded corners AND with the stroke length changing size. As the stroke gets smaller, less of it is going to be under the part of the gradient that fades it out. Unfortunately it's these types of experiments that can take some time to figure out.

I don't use Animate with code. Unfortunately Adobe doesn't do much to support the canvas export. The underlying framework, CreateJS, was abandoned by its creators years ago so there is very little hope of any improvements. It's a shame as there was a lot of potential and GreenSock code worked well with it all. I just use the timeline's keyframes and tweens for very simple animation mockups and such for video or gif export. Basically anything that is fixed size and aspect ratio. I would not recommend it for any type of web development as it has no support for DOM elements, SVG, or anything related to responsive layouts. The secret sauce as @GreenSock mentioned is to get a firm grasp of the basics and slowly add more stuff as you learn it. This front-end stuff is pretty complicated these days and everyone has to suffer through quite a bit to get good. I wish we didn't, lol. @The Old Designer glad to hear you enjoyed my courses. thx for the recommendation!

For me Adobe Animate is the answer here. I still use it for 95% of my design work. I'll also use it occasionally for basic animations when the end goal is an animated gif or short video and I don't want to deal with the hassle of creating things with html and css. And although I probably fall into the group of people who can "just code animations as easily as typing a message on a forum", it still requires a tremendous amount of time to set things up and refine the timing and such. For a short animation I may literally write the basic animation code in 15 to 20 minutes but there's 3 or 4 hours (at minimum) of other tedious stuff and much more if you are adding interactivity or variations for different screen sizes. All this to say, don't get discouraged. It takes a lot of time and practice to build up the skills. Once you get a few GSAP muscles in shape you'll be amazed at how much control you have over the animations with very little code.

that is correct, you can't use groups in a clipPath. you can give multiple elements in your clipPath the same class and move them all at the same time. scaling and rotating could get a bit weird though. not really sure what you're trying to do.

You can animate things inside a <clipPath> fine in Safari as shown in this demo here https://codepen.io/snorkltv/pen/yLEOdJK?editors=0110 I noticed you are using <clippath> instead of <clipPath>. Maybe safari is picky? I had trouble following your demo with the loops and mediaqueries. If you still have trouble please reduce it down to a single tween on a single element if that works, then slowly build up.

Excellent job as always @mvaneijgen I just recently learned about toLocaleString() const num = 123455.34 console.log(num.toLocaleString()) //output 123,455.34 Great for currency too! docs https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/toLocaleString https://codepen.io/snorkltv/pen/jOKrZJy?editors=0010

Thanks for the clear demo. Things are working as designed. Changing the duration of a tween after it is inserted into a timeline does not shift every animation after it. This is done mainly as a performance optimization as it would be quite taxing for every animation to constantly be aware of changes to its duration. However, you can use shiftChildren() https://greensock.com/docs/v3/GSAP/Timeline/shiftChildren() demo https://codepen.io/snorkltv/pen/BaVjjrX?editors=1011

I am very pleased to report that I followed your instructions and everything looks GREAT on this end. No glitching at all. Silky smoothe up and down. Thanks so much for going the many extra miles. I can't believe that this was somewhat related to a gradient/will-transform combo. Good grief. Thank you thank you thank you!

slight update it seems using ScrollTrigger.normalizeScroll(true) helps to alleviate the glitch a bit, but not 100%.

Thanks so much for the thorough deep dive. Can't imagine what it was like to track that stuff down. In case it helps others, i was pleased to learn that CodePen offers the ability to add that meta tag with an easy button. I deeply regret to report though that I tried with the meta tag and new beta and although the glitch is by far less frequent, I can still manage to get it to occur. I thought it may have only been happening with fast scrolls but fastScrollEnd:true didn't seem to help. I also tried normalizeScroll(). Here is a video of a forked pen with those changes RPReplay_Final1666354764.MP4 Here is the debug mode version here is the full editor version https://codepen.io/snorkltv/pen/GRdVNWY?editors=1010 I appreciate all the help.

Hi and welcome to the GreenSock forums, Thanks for the demo. ScrollTrigger and pinning can be a challenge to wrap your head around. If I understand correctly, you don't want the 4th panel (green) to be pinned and the test section should just animate up with it. If so, I used a condition inside your loop to not create a ScrollTrigger for the last panel. https://codepen.io/snorkltv/pen/yLjdLvq Edit: I removed the 100vh height from .test just to verify that no extra spacing was being added by pinning or whatever.

I came up with this setup where the first panel scrolls up to reveal pinned content beneath it GOOD CODEPEN EMBEDDED AT BOTTOM OF PAGE Basically once you scroll down the full height of the page the stuff underneath the blue panel gets unpinned and moves up. I'm not 100% sure it's the best way to approach the html / css but it works and I'm implementing this on a site where I may not have control over all the html. However, when I add a scrubbed animation to this setup of the word "one" spinning while elements are pinned, Safari totally glitches out when I scroll up the page (making the blue section renter from the top of the viewport). Notice in the video below the red section completely disappears w and reappears when the scrolling stops. RPReplay_Final1666186478.MP4 Open the following demo in debug mode on your device to test. https://cdpn.io/pen/debug/QWrRoVr I've tried a few will-change:transform and force3D:true/false things to no avail. Again the only difference between the good demo posted below and the bad one is that the animation of the word "one" spinning is enabled. I'm seeing the glitch on iOS 15.6.1. On desktop it works fine. thanks for the help. Carl

Sorry, but I really can't go on offering 1 on 1 consulting on your project every time you want to add a new feature and I definitely can't try to dive into css layout issues. However, I'll offer the following before I go. Putting code in between lines of timeline code doesn't mean it's going to execute in that position of the timeline. tl.to(video3, {opacity: 1}) video3.play() // this runs immediately and is in no way associated with the playback of the timeline. tl.to("#seq-4", 3, {opacity: 1}) If you want to trigger a video to play or run any external function from a timeline you need to use call(). This is a basic example of 2 videos being triggered from a timeline https://codepen.io/snorkltv/pen/wvjOKXR?editors=0111 Another problem is that your videos have opacity:0 in the css and I don't see you fading them in before you want them to play. Hopefully this helps get you in the right direction. If you have more GSAP questions please consider a new thread with a minimal demo that clearly illustrates a single issue. If you want to maximize what you can do with GSAP, I'd strongly suggest spending a month or 2 with training. It could really help you avoid these problems and speed up the learning curve immensely. Best, Carl

So glad to hear you put in the time and achieved this result on your own! That's the best way. I know it feels good when things finally work. Sometimes the best way to learn is just to grind it out a bit. Between my classes and this forum I've seen very similar questions regarding "i want to animate all these things basically the same way, but the first and/or last should be different. The truth is there are many ways to get the same results and some just make more sense to some people than others. Some methods are more concise and some offer more flexibility. I'll be using this demo below for my lesson this week, but figured I'd share it with you as a little reward for your hard work. It basically shows a variety of ways to "kind of stagger things". Best viewed in it's own window https://codepen.io/snorkltv/pen/mdLvXPP?editors=0010 Congrats on the progress!

nice catch @elegantseagulls I didn't look that closely originally. attached iphone-blend-mode.mp4 is a video that sheds more light on the trick. I removed overflow:hidden from the element in dev tools and set the background to something other than black.

thanks for the demo. it's a start. I think it would be best for you to focus on the animation of only 3 elements and worry about ScrollTrigger later. Just get 3 elements to fade in and out EXACTLY as you want with 3 tweens. Don't worry about loops or writing efficient code right now. In your demo multiple items have the same heading and sub-title text which makes it impossible to tell what is fading in and what is fading out. Definitely change that. However I noticed the second tween animates to opacity:1 tl.to("#seq-2", {opacity: 1}); but I don't see that it was ever set to 0 in the css or elsewhere... so it is animating from 1 to 1. Think of the starting state of each of the 3 headings and write specific tweens for each one. You started this thread asking to how to animate multiple items in order and I guess we assumed you just wanted them each to do the same thing. Now you want the first item to start visible and fade out second item to be invisible and then fade in and fade out .... last item to fade in but not fade out Hopefully this helps you review your code and adapt those 3 animations.

Start with the gradient animating through the text https://codepen.io/snorkltv/pen/QWrYvJV Next Steps Add ScrollTrigger to the animation add scrub:true modify page so that you have room to pin the text and have enough room to scroll

No problem! Animating a single tween with ScrollTrigger is exactly where you should begin. Watch the video in the docs https://greensock.com/docs/v3/Plugins/ScrollTrigger this tutorial also will help Also this great short video from @Cassie will help too! Let us know where you get stuck and we'll jump in to help with your minimal demo.

Hi, This can be achieved with a basic stagger https://codepen.io/snorkltv/pen/qBYLwXQ?editors=1010 I have a Free GSAP beginner's course that I think will be great help. https://www.creativecodingclub.com/courses/gsap-3-express

do you have an example of this? this seems like an interesting challenge but it would be best to provide a minimal demo so that we can better understand what you are trying to do. This isn't typically the type of thing we just build up from scratch on request. Also a question: When you say "pressing a button has it go to 100% slowly" does that mean pressing and holding down or pressing multiple times in quick succession. Trying to better understand the game mechanics and see what features of GSAP might help you best.

Thanks, for the mention @Rodrigo the ScrollTrigger course isn't free. Just the GSAP 3 Express beginners course. However, I'd like to think the complete course bundle offers a ton of value at my re-introductory pricing of $2.95/month

Thanks for the demo. I think gsap.utils.mapRange() can help https://greensock.com/docs/v3/GSAP/UtilityMethods/mapRange() it will basically convert the progress to a value between 0 and the highest index of elements these are the values I'm passing in mapRange(lowest progress : 0, highest progress : 1, lowest index : 0, highest index : 4, current progress) let index = Math.floor(gsap.utils.mapRange(0, 1, 0, 4, self.progress)) setdoputText(index) console.log("index", index) /* if (self.progress > 0 && self.progress < 0.2) { setdoputText(0); } if (self.progress > 0.2 && self.progress < 0.4) { setdoputText(1); } if (self.progress > 0.4 && self.progress < 0.6) { setdoputText(2); } if (self.progress > 0.6 && self.progress < 0.8) { setdoputText(3); } if (self.progress > 0.8 && self.progress <= 1) { setdoputText(4); } */ test it out with a few variable numbers of elements and see how it goes. Although I don't know everything about your project, I wouldn't use this approach of assessing the progress using onUpdate. onUpdate fires VERY OFTEN and and it seems wasteful to be constantly re-applying classes and running logic. ScrollTrigger already has toggleClass functionality built in. You just have to create ScrollTriggers for each element like so https://codepen.io/snorkltv/pen/rNvKQQb Note the text turns green when active. Hopefully this helps

Hi @Sismeo Thank you for the clear demo. I spent some time exploring this and couldn't quite explain exactly why things were appearing this way. @Cassie Ah, this seems to be the missing nugget! Thanks for that! One of the bigger things I couldn't wrap my head around was why taller items with the same speed as other items were moved in seemingly weird places. Now that I know that everything has to be in it's "native" position when it hits the center of the screen all of this makes much more sense. I created a new pen that hopefully clearly illustrates this behavior for others. Probably best viewed in it's own, taller window. https://codepen.io/snorkltv/pen/vYjrKWX?editors=1100 Also a little tip for everyone that doesn't want to go crazy. If you have codepen configured to auto-update (no run button) it seems that some css changes will be updated on the fly but it's not a real reload as the ScrollTriggers will not refresh and update. I strongly recommend disabling the auto-update when working with ScrollTrigger in codepen. Thought I was going nuts for a bit.