Search the Community

So I'm trying to create a sweep like animation, but with a circular path to use as background for the whole screen. In the example codepen I did it on a 500x500 canvas, but now I want to make it responsive. I know this is not really related to gsap but 'm not familiar with working on canvas and I thought someone could help. At first I tried just scaling it for the viewport's width and height but that resulted in blurry pluses: https://codepen.io/vwjvvsoy-the-bashful/pen/PwZjgoo And then I tried to listen for resizes and redraw the canvas on resize, but this way the sweep doesn't go from end to end, only a little bit in the center: https://codepen.io/vwjvvsoy-the-bashful/pen/emJRxeq What's the way to do this?

I have an animation that draws a progressively increasing circle on the canvas until it occupies the entire canvas: const maxRadius = Math.ceil( Math.sqrt(canvas.width ** 2 + canvas.height ** 2) / 2 ); const centerX = canvas.width / 2; const centerY = canvas.height / 2; let radius = 5; function animate() { if (radius >= maxRadius) { canvas.remove(); return; } context.beginPath(); context.arc(centerX, centerY, radius, 0, Math.PI * 2); context.closePath(); context.fill(); radius += 5; requestAnimationFrame(animate); } animate(); And I tried to rewrite it using GSAP but it doesn't work: const maxRadius = Math.ceil( Math.sqrt(canvas.width ** 2 + canvas.height ** 2) / 2 ); const centerX = canvas.width / 2; const centerY = canvas.height / 2; let radius = 5; gsap.to({ radius: maxRadius }, { duration: 1, radius: maxRadius, onUpdate: () => { context.beginPath(); context.arc(centerX, centerY, radius, 0, Math.PI * 2); context.closePath(); context.fill(); }, onComplete: () => { canvas.remove(); }, ease: "power1.inOut" }); Please help me

Small issue with my circle here, it works the first time on hover (in & out) and then changes direction. Any ideas why it breaks after the first hover? It should look like this. Many thanks, Smallio

Quick question. I was wondering if is possible to create an highlight effect in top of 2 draw canvas images. I'm creating a beaker with a back and front image. I would like create a highlight effect. Any codePen or tutorial about it? or this is not possible with GSAP?

Hi, I urgently need a way to draw say dots along an entire path of a TimelineMax. The path does not need to animate. It just needs to be drawn initially. Can anyone point me in the right direction? ANy help appreciated. Sample timeline: //create timeline self.llnTimeline = new TimelineMax({ delay: 1, smoothChildTiming: true, timeResolution: 0, onUpdate: function() { } }); self.llnTimeline.seek(0); self.llnTimeline.add(TweenMax.to(self.llnPlane, 12, { left: 359, top: 998, ease: Linear.easeNone }), 0); // 1 self.llnTimeline.add(TweenMax.to(self.llnPlane, 12, { ease: Linear.easeNone, css: { bezier: { autoRotate: true, type: "thru", values: [{ left: 338, top: 1099 }, { left: 257, top: 1114 }, { left: 47, top: 945 }, ] } } }), 12); // 2 self.llnTimeline.add(TweenMax.to(self.llnPlane, 22, { ease: Linear.easeIn, css: { bezier: { autoRotate: true, type: "thru", values: [{ left: 27, top: 836 }, { left: 304, top: -573 }, { left: 379, top: -1045 }, ] } } }), 20);

Hi everybody, for a personal project I would like to build an oblique progress bar. So, my first question is: Is there a way to create dynamically and easily a Line object with Tweenmax.js? For the moment I just resize the width of a rectangle shape like this : http://jsfiddle.net/FracArt/6GJ67/2/ Which actually works! But seems a bit "hacky". Second question, as you can notice on the jsfiddle file I tried to build an oblique progress bar on the same principle. However, when I rotate the rectangle a gap appears between the initial and final position of the bar. So do you have an idea of how I can correct that without doing some geometry calculations? (maybe a transform-origin property on the css?)

I cant seem to get accsess to the BezierPlugin, I get a undefined error. My aim is to draw the line my object moves along using bezierThrough, do you know of any simple tutorials/examples of this? I found a few but they are quite confusing.