Leaderboard

Hi Sandy! You're animating <g> elements, so you're scaling a container. You need to get more granular and target the shapes. And I would set the transform origin ahead of time. For example, your circles could be like this. gsap.set("#circles circle", { transformOrigin: "50% 50%" }); ... .from("#circles circle",{opacity:0,scale:0,duration:2}) But it would probably better to just give your circles the same class name to make target easier. <g> <circle class="circles st6" cx="775.79" cy="197.35" r="5.81"/> <circle class="circles st6" cx="370.82" cy="55.65" r="5.81"/> <circle class="circles st7" cx="595.77" cy="70.42" r="5.81"/> </g> The zigzag could be done with the DrawSVGPlugin, or maybe by animating a clipPath. For beginners, I would recommend checking out @PointC's MotionTricks and @Carl's CreativeCodingClub.

Hi @Sibteali Baqar Welcome to the forum. Looks like the problem is that your orbit path (#ellipse_1) is a filled path so the circle wouldn't animate along it as you expect. I've created a little demo using your SVG. The path you were using has no fill and a red stroke. See how the circle would orbit along the outside of that path? Probably not what you want here. I added a simple ellipse and converted it to a path to show you that everything is working correctly with the MotionPathPlugin. I'd think an actual ellipse would be the easiest method here. https://codepen.io/PointC/pen/576a99f87ecf0a9aea713b8beb894f00 Hopefully that helps. If you have additional questions, you'll need to create a demo. Just strip it down to the minimum like I did above and we'll be able to provide the most accurate and helpful answers. Happy tweening and welcome aboard.

Hey DoPhuongAnh, Welcome to the GreenSock Forum. It's a lot of fun: a color 'kaleidoscope'. https://codepen.io/mikeK/pen/powWwMm Happy scrolling ... Mikel

Hey DoPhuongAnh and welcome to the GreenSock forums. Here's how I'd break down this effect: Position all of the text, one after another, around a circle. You've already done most of this! The text will overlap at this point. Select all of the parts of the text for each segment (in the case of the site you linked that means each person's name). Store this for reference. Keep a reference of which part is currently active. Whenever the active segment changes, rotate the circle so that the active one is where you want it. Also animate the transparency of all of the segments that are off screen to 0. Animate the transparency of the segments next to the active one to a value like 0.7 or so. Animate the transparency of the active segment to 1. Hopefully that will help you get a bit further than where you are now

🐸 https://codepen.io/GreenSock/pen/NWgrqpG?editors=1111

I'm pretty sure Illustrator has its reasons why it puts out things the way it does - like grouping things. It can not know what you are going to use the output for - and for animating often a rather specific setup is needed, that you will have to tweak yourself. I myself am not familiar enough with Illustrator for being able to give you any advice on what you could possibly do better there. As mentioned, it is pretty much that's going on in your demo. If you need assistance, it is always best to strip things down to the bare minimum showcasing what you do have problems with. Not only will it help you figure things out easier, but also does it help others figure out what the problem might be and how to possibly find a solution. And with lots of code, that can become quite cumbersome. Here is your example boiled down to just the left eye - and everything related to that wrapped in a group with the clip-path applied. I did remove all the other clip-paths set to other elements in there - unfortunatelly, I can not clean it all out for you, but a setup like this appears to be working as I would expect it to work. https://codepen.io/akapowl/pen/df10519493a5b3e5785ee9f2343d01c5

Hi monospace! .addPause() will only work with a timeline, but you could do something like this using delayedCall. let tl = gsap.timeline() .to(".blob", { y: 200, duration: 9, ease: "none" }) .addPause(3, function(){ gsap.delayedCall(2, () => tl.resume()); }) .addPause(6, function(){ gsap.delayedCall(2, () => tl.resume()) })

I'll throw my two cents in too. You could just move the first arrow to a yPercent of -100 and then animate each one to a relative yPercent of +=100. https://codepen.io/PointC/pen/77a4780b72feb6ee6c0ab901c1511aea Happy tweening.

Hey there @tolka You can actually get away with one relatively simple timeline for this. First things first: In this example I added a rotation to your arrows, so they point down now and scaled them down a bit just so they will still be fully visible then. Also, I positioned them absolute, so they initially are stacked on top of each other, which will come in handy for the animating. This is what your timeline could then look like const arrowScroll = gsap.timeline({ repeat:-1 }); arrowScroll .fromTo('.arrow--down', { yPercent: 0 }, { yPercent: 100, ease: 'power1.inOut', duration: 1 }, 0) .fromTo('.arrow--down-2', { yPercent: -100 }, { yPercent: 0, ease: 'power1.inOut', duration: 1 }, 0) One of the arrows (as they are both in the same position now it actually shouldn't matter much, which does what) gets translated down from the initial position to below it, and one gets translated down from above the initial position to the initial position. Both tweens are set to start at the same time via the position parameter. Sidenote: If you want to repeat things inifinitely, you can set repeat: -1 (so you won't have to use large numbers for the repeats) And I see, that @nico fonseca already replied, too - so you see, there are different ways you can approach things. Happy tweening. https://codepen.io/akapowl/pen/18ec22fbc52642571cce664f5453f2c0

Hey @tolka you can do something like this 🙂 https://codepen.io/nicofonseca/pen/badf67592921f8951b6366ce06367181

Welcome to forums @monospace How about this? GSAP Starter Template (codepen.io)

Yep. Here's how you can leverage the MorphSVGPlugin to animate along a motion path. Animate Motion Path (codepen.io)

Hey @KivxD It could be as easy as calling a tl.reverse() in an onEnter callback of a ScrollTrigger. But depending on how and when exactly you want things to happen, the logic behind that could become more complex. https://codepen.io/akapowl/pen/b1d5b33091bf0c258f7784bba4c37c71

Hey @_Greg _ I really liked the idea 🙂 I used a quickSetter to set the lines position and updated them based on the wrapper position. https://codepen.io/nicofonseca/pen/27b6e70f467907cd31e5ed6f528a5c90?editors=1010 Is it helpful ?

For tutorials, I would highlly recommend checking out @PointC MotionTricks. There is a lot of stuff about using clip paths and masks in there. https://www.motiontricks.com/ I'm not familiar with Affinity, but maybe this flatten transform option would help. https://forum.affinity.serif.com/index.php?/topic/85042-flatten-transforms-svg/ And it would also be a good idea to run your SVG through SVGOMG to clean it up. https://jakearchibald.github.io/svgomg/

Hi Cody For percentage transforms, you should use xPercent and yPercent. .to(".foo", { xPercent: -50, yPercent 100 }) You also have a bunch of transforms on your elements, which is messing stuff up. It's a good idea to remove those. https://stackoverflow.com/questions/13329125/removing-transforms-in-svg-files Calling setInterval is a bad idea. If you want something to repeat, you should use repeat along with repeatDelay. gsap.to(".foo", { repeat: -1 }) gsap.timeline({ repeat: -1, repeatDelay: 1 }) And overflow doesn't work for elements inside an SVG. You would need to use a <mask> or <clipPath>.

Just a little FYI - I do have a tutorial all about meters, needles and dials which may be helpful. https://www.motiontricks.com/svg-skill-level-meter/ Happy tweening.

Hi @Walek, Have a look at svgOrigin https://codepen.io/sgorneau/pen/oNwBJmj?editors=0110

@polymedia If you need to move the lines synchronously with the circle position, you can do something like this: https://codepen.io/nicofonseca/pen/e93cef6b2e0ca6a6169b15f08129d21b Also, you can check the quickSetter method to improve the performance 🙂

Hey there Vlad! This example is using canvas - GreenSock can animate properties of canvas objects - but the setup will involve learning about the canvas API and likely a bit of maths for the shapes/sine waves Here's a thread that may help Daniel Shiffman's youtube channel is also great for learning more about these animations. https://www.youtube.com/channel/UCvjgXvBlbQiydffZU7m1_aw

This is a really fun place to start - https://beginnerjavascript.com/

Hey Kitson, I've removed scrollTrigger so you can see how the animation is set up without being linked to the scroll. https://codepen.io/GreenSock/pen/yLXJyQY?editors=1010 // create a timeline gsap.timeline() // set all image blocks apart from the center to visibility hidden and opacity 0 .set(".gridBlock:not(.centerBlock)", { autoAlpha: 0 }) // animate the image blocks apart from the center to visibility visible and opacity 1 .to(".gridBlock:not(.centerBlock)", { duration: 0.1, autoAlpha: 1 }, 0.001) // scale up the container to it's full size from a third of it's size .from(".gridLayer", { scale: 3.3333, ease: "none", }); Then that animation is tied to scroll using our ScrollTrigger plugin. Does this help - Is there a specific part that you have questions about?

@GreenSock that is amazing - exactly what I wanted to achieve! Thank you for showing up a good way to solve this 🙌🏻 Let me add this compliment to you and all other users: when I was searching for solutions yesterday and was looking through this forum there were so many posts that showed people helping others very generously and hands-on like this one. This is a fantastic community here! I hope to dig deeper and also be of help in the future

Hi @PG1 Building a robust timeline visualizer would be quite an undertaking. I created a video to explain how the getChildren() method can be used to grab animations from a timeline, get their start times and durations, and then use that info to build a rudimentary visualization Once you start throwing in staggers, nested timelines, and tweens that target multiple elements things get complicated fast. This video is just meant to introduce you to some of the basic concepts.

These are just callbacks. It calls the provided function when the timeline reaches that spot. Callbacks don't return values, so anything you return is ignored by the timeline. If you create an animation inside a callback, it will of course run, but it won't be added to timeline. tl.add(spinAnimation); tl.add(moveAnimation); The parentheses executes the function, which in this case returns an animation, which will add it to the timeline. tl.add(spinAnimation()); tl.add(moveAnimation()); Same as doing this. tl.add( gsap.timeline() .to(".card0", { x: "-30px", duration: 0.5, ease: "power4.inOut" }).to(".card0", { x: "0px", duration: 1, ease: "power2.inOut" }) )

Ok pal. Before you smash your laptop here's a *really simplified* pen to show you what I'd recommend. I'm afraid there's no magic '*animate this*' code that you can pass your fish into. SVG animation and animating with code takes time to understand and master and the prep takes planning. What I would suggest is to figure out which bits need to change and which will stay the same. Pupils - stay the same across all expressions, so you can keep ONE set. You can then move the pupils around to make it look like the eyes are moving Shadows - four shadows, these are complicated shapes and morphing will likely look a little odd. (I've added a commented out example so you can see what I mean), I'd recommend fading between them. Outer eyes - four simple circle shapes, these are nice and simple so they're good for morphing. Delete any extra little shadows or decorative paths that aren't necessary. Simple is key. I organised them into those groupings and saved the file and optimised it. You'll see it's *much* tidier and easier to work with. Everything but the starting expression has opacity="0" set inline. Then there's just a few tweens needed. 🥳 Not everything will need morphing, opacity fades and transforms will work in a lot of cases. Does this help? If you have any questions - shoot. https://codepen.io/GreenSock/pen/WNOrYqm?editors=1011

Hey @ThePixelPixie you can do something like this. Send the color you want to the function in order to animate https://codepen.io/nicofonseca/pen/ecfe39fecf06caa658105d4536da694a

Hey @polymedia, Welcome to the GreenSock Forum. This should give you some pointers. https://codepen.io/mikeK/pen/vYgGqLB Happy tweening ... Mikel

Hey there @GGQa You will have to find a way within the logic of swiper to toggle the opacity. Swiper is not a GreenSock product and thus support for it is actually not offered in these forums. Here you'll find a list of events for swiper.js https://swiperjs.com/swiper-api#events One very basic way could be to use swiper's slideChangeTransitionEnd event to tween all images to opacity 0 but/and the one in the swiper slide that is active to 1. Something like in this example below - but I have no idea if it is the best way to do it, as I'm not very firm with swiper. Anyone having a better approach is of course welcome to help, but in general these forums try to stay focussed on GSAP-specific questions. Hope that helps, though. https://codepen.io/akapowl/pen/8b5fd3a7d0ecddcbeb7a230b49fe13db Edit: Here are two more approaches for the tween itself. One is using a forEach loop (commented out here) and one is using function based values with the target passed into the function. Both utilize a ternary operator for the tween to check wether the target's parentElement (the swiper-slide container) has a class of swiper-slide-active - if it does, the opacity will be tweened to 1, else it will be tweened to 0. https://codepen.io/akapowl/pen/85cca33c373c2ca1d789f681150d9e8a

If I were you, I'd just use a function and then parameterize whatever you want: ScrollTrigger.matchMedia({ // desktop "(min-width: 769px)": build("top 60%"), // mobile & tablet "(max-width: 768px)": build("top 80%") }); function build(start) { return function() { gsap.from(".first", { duration: 1, autoAplha: 1, yPercent: 0, scrollTrigger: { trigger: container, start: start, end: "bottom bottom", toggleActions: "play none none reverse" } }); }; } That way, you avoid repeating things and you keep all your code nice and tidy. 👍

It's working. Turning a square 90 degrees will look the same.

Hi @simoncoudeville Welcome to the forum. In addition to Blake's excellent advice above, you can also set defaults like this: gsap.defaults({ duration: 0.75, ease: 'power2.inOut', yoyoEase: 'sine.out' }); More info: https://greensock.com/docs/v3/GSAP/gsap.defaults() Happy tweening.

Hey WEINDE, Try to build up the animation piece by piece, step by step. Take a close look at the positioning options (Positioning animations in a timeline). Then build the tweens: order, timings, distances, overlaps ... https://codepen.io/mikeK/pen/XWgMvGy?editors=1010 And then integrate the scroll trigger. Happy scrolling ... Mikel

I made some example for you using clipPath 🙌 https://codepen.io/nicofonseca/pen/d48c0e046673bbec4296bd9a692ae1d2

After re-reading your question and looking at your demo, I think I understand what you mean - you're trying to avoid the DUPLICATE first element. You just want a normal group of elements that infinitely loop seamlessly. I've got two ways you could approach this - one uses less code but is more CPU-intensive because it has to modify each value on every tick: let height = 50, boxes = gsap.utils.toArray(".box"); boxes.forEach((el, i) => { gsap.to(el, { y: boxes.length * -height, modifiers: { y: gsap.utils.unitize(gsap.utils.wrap((i + 1) * -height, (boxes.length - i - 1) * height), "px") }, duration: 2, repeat: -1, ease: "none" }); }); And here's a more performant version that uses a bit more code: let height = 50, boxes = gsap.utils.toArray(".box"), duration = 2, tl = gsap.timeline({repeat: -1, defaults: {ease: "none"}}); boxes.forEach((el, i) => { let dur = duration / boxes.length * (i + 1); tl.to(el, { y: -height * (i + 1), duration: dur }, 0).fromTo(el, {y: height * (boxes.length - i - 1)}, { y: 0, duration: duration - dur, immediateRender: false }, ">"); }); Here are both in a CodePen: https://codepen.io/GreenSock/pen/GREOLZM?editors=0010 Is that what you're looking for?

This thread might also be of help. If you're just making an input, it seems like it might be better to use Draggable.

Forgot to mention more recently, I've had success using Draggable and FLIP together for what I needed. Here's an example that includes a bit of my final solution: https://codepen.io/MichaelHeyDonny/pen/yLXVxbx The top left blue bars are the triggers. There's a few things missing in this example like how to handle empty parent containers etc but thought I would share. The FLIP plugin has certainly helped greatly in providing a solution to what this has replaced. So thanks GSAP as always!

@Skatedan something like this? https://codepen.io/nicofonseca/pen/4e8a91ca94a783949a147dd62661552a

Hey there! If you're trying to set the end trigger at the top of the footer element you can set the footer as the end trigger. https://codepen.io/GreenSock/pen/rNwLQOK?editors=1011 You can also use the invalidateOnRefresh property. It will refresh any functional values. invalidateOnRefresh Boolean - If true, the animation associated with the ScrollTrigger will have its invalidate() method called whenever a refresh() occurs (typically on resize). This flushes out any internally-recorded starting values. https://codepen.io/GreenSock/pen/MWoezpG

Welcome to the forums (and web development...and GSAP), @gmbirdiv. Performance optimization is a very, very deep topic. It would take many hours to try to explain the ins and outs, but here are a few quick thoughts: The bottleneck is almost always graphics rendering. The actual changing of the underlying numeric values (which is what GSAP does) is dirt cheap compared to dynamically fabricating all those pixels on each tick. Like...the pixel calculations (totally unrelated to GSAP) accounts for well over 95% of the load in most cases, so focus your attention there. The main reason CSS may be performing better for you in this particular scenario is because GSAP has to do some extra work under the hood in order to ensure cross-browser perfection (technically it's building a transform matrix() and baking in the transform-origin values on the fly). There's a massive tradeoff with using CSS - you get quite a few browser bugs, quirks, and different behaviors in various browsers, especially with transforms. Trust me - you're gonna get really frustrated if you go the pure CSS route. Ask anyone with experience. You might get it to look good in Safari and then open Firefox where everything falls apart. And then if you need to animate scale and position independently and maybe with different eases and timings, you're hosed. It's just very limiting. The key is to minimize the graphics rendering work. SVG is notoriously hard on the CPU because it is forced to calculate all those vectors constantly as you scale. If those pixels are just sitting there or you're only animating a small portion of them, it'd be fine. But when you scale an entire complex set of artwork like you're doing, think of how many pixels must get fabricated. And it has to do all the ones off-screen too! So if you zoom up to 300% and you've got a ton of pixels spilling outside the viewport, it's just really tough on the CPU. Completely unrelated to GSAP or CSS. Optimizing your SVG probably won't help a whole lot. Sure, it might reduce the file size a bit but ultimately if it has a bunch of vectors that are taking up a very large portion of the screen, it'll be a lot of work. If you rasterize your artwork (think of it like a screen capture, or saving your SVG as a PNG), it's MUCH easier for the browser to just shove around a set of pixels rather than fabricating them on every tick from vectors. One tradeoff can be pixelization if you scale UP, but you can solve that by saving your artwork at the scaled-up size natively. In other words, if you're scaling from 100% to 300%, you should save your artwork at 300% nice and sharp, and then scale THAT from 33% to 100% to get that same effect. PixiJS could be a very useful tool for something like this but the concepts are the same. Ultimately you'd want to rasterize the artwork which could be on a <canvas> with PixiJS and scale that. It's more hassle production-wise, though. One trick you can try is to wrap your SVG in a <div>, set will-change: transform on that, and animate the scale of that <div> because most browsers can essentially rasterize the artwork and GPU accelerate regular DOM nodes (but most can't do that for SVG children). Worth a shot before you invest a bunch of time going the PixiJS route. I hope that helps!

Hey @Aeryla welcome to the forum ! 💚 You have some issues: - Set pointer-events:none on your .animate class to remove the target and you can interact on the parent .link class - Add a mouseenter event to know when the mouse enter on your .link element and start to animate the box! - Don't animate left, top properties, it's better to use x, y properties - Don't use transform property to change the translate, use x and y - For better performance, calculate the mouse position in the mousemove listener and for the rest use gsap.ticker - You can replace gsap.to(".animate",{duration:0, ...}) to gsap.set(".animate", {...}) or even better if you use gsap.quickSetter I created a Codepen so you can check it out 🙌 https://codepen.io/nicofonseca/pen/48e69918ed59edc1ed41f503d06601f8

It doesn't "understand" any English whatsoever. You can name variables/properties whatever you want (within the guidelines of JavaScript, like you typically can't start the name with special characters or numbers, etc.) Nico could have just as easily named that variable "pinkToadsAreCool". It's merely a holder for a value, that's it. GSAP/JavaScript doesn't try to decipher the meaning in any of the variables or property names. You might benefit from taking a course or reading some articles on basic JavaScript. I don't mean that at all as an insult or dig - I just genuinely think it might help clear some things up for you. Once you wrap your head around some of that stuff...and the GSAP API, you'll be an animation superhero in no time. For future reference, we really try to keep these forums focused on GSAP-specific questions. Please read the Forum Guidelines. Happy tweening! 👍

Ha. Sorry, maybe it's just a personal pet peeve of mind that nobody else really cares about. If I click 5 times quickly, I want it to advance 5 chunks, not 1. Nobody has ever accused me of being picky, stubborn, or opinionated...ever. 🤥

Okay, CodePen is back up so I made a quick demo for you. I think it should be enough to get you started. https://codepen.io/PointC/pen/XWgdmro Happy tweening.

Hey INKORPORATION, It may well be that I don't understand your intentions properly. This would be my interpretation. https://codepen.io/mikeK/pen/0de2740e35f205301f110ae226aa8386 Happy tweening ... Mikel

Ha, I wish I had 😅 I'm actually no advocate for locomotive-scroll, and I wouldn't even know where to park such a beast 😋 When it comes to smooth-scrolling, there are some pit-falls to avoid, that are the same across all/most libraries and/or approaches, though; Like position: fixed elements not working the way you'd expect within the container that is being transformed because of the transforms on that container changing the context for the fixed position. I guess position: sticky falls in a similar/the same vein, as it can be seen as some sort of a special version of position: fixed maybe?

I hate when I forget to change this!!! 😠 😠

Yep - groups won't work. It needs to be path → path. That being said, you can loop through and create a tween for each one. Here's an old demo of mine that shows how to loop and morph. I've added IDs in this case for clarity, but an ID on each one is not necessary. https://codepen.io/PointC/pen/LNLpgB For that to work properly you'll need the same number of paths in each group. In looking at your demo it appears that the various groups are not consistent so it may take some extra work. Maybe some of the elements in each group don't actually change? Just guessing on that, but if something isn't changing, you can move it out of the morph group. Hopefully that helps. Happy tweening.

Yep, in GSAP 3 it's even easier, as @Carl explains beautifully in the video: // OLD Sine.easeInOut.getRatio(diff) // NEW var sine = gsap.parseEase("sine.inOut"); // this returns an ease function sine(diff); // now you can use it as many times as you want. Here's a fork that's updated to GSAP 3: https://codepen.io/GreenSock/pen/VwWvoxV?editors=0010 Notice there's no more BezierPlugin because MotionPathPlugin makes things much easier and more intuitive. // OLD var data = BezierPlugin.bezierThrough(values, curviness); var d = "M" + data.x[0].a + "," + data.y[0].a + " C" + segmentToString(data.x[0], data.y[0]); for (var i = 1; i < data.x.length; i++) { d += "," + segmentToString(data.x[i], data.y[i]); } // NEW var data = MotionPathPlugin.rawPathToString(MotionPathPlugin.arrayToRawPath(values, {curviness: 0.5})); Happy tweening!

My video on Locomotive Scroll and GSAP has helped quite a few people get up and running My course ScrollTrigger Express addresses many common issues that come up in these forums and I've been going into responsive, scrolldriven animations as well as doing some helpful demo destructions. Although I do very comprehensive explanations of ScrollTrigger's core features, I wouldn't claim for it to be an "advanced" course. Id say 80% of the cool ScrollTrigger effects have more to do with having a solid understanding of building the effects with GSAP than controlling them with ScrollTrigger. But it seems you have a good handle of that stuff. I also tend to stay away from "performance" topics as there are so many variables that there is rarely a silver-bullet solution. FWIW ScrollTrigger internally has loads of optimizations to deliver amazing resuls. Also, I'm 100% confident that the next release of GSAP will have some very cool ScrollTrigger features that you will appreciate, but I'm not at liberty to discuss them. trust me