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?

Hello, I need to create an image sequence with a seamless repeat animation. I already have a structure for this sequence using the canvas element, but there seems to be an issue when the animation repeats itself. The first and last frame are displayed for half the time they should. Thanks in advance for the help.

Hi everyone, Can anyone help me figure out on how to do this type of animation on scroll. It is a canvas with svg patterns, and when the user scrolls it will start scaling the 1st row from a smaller size to the initial svg width and height. Not sure how to make this one work Would really appreciate if someone can help me. I have had an attempt, maybe it is a good start but I can't figure it out properly. I have also break down the code into parts from the https://remote.com/global-hr/contractor-invoicing-and-payments https://i.imgur.com/hXHepSI.mp4 HTML <div class="sc-f1d6031c-0 hjWElG pattern-transition" from="white" to="red500"> <canvas width="5080" height="868"></canvas> <svg width="78" height="40" viewBox="0 0 78 40" xmlns="http://www.w3.org/2000/svg" class="pattern duo-petal pattern-ref" style="fill: pink;"> <path d="M39 39.9939C47.9212 39.939 60.9436 36.5061 67.7442 29.6951C74.3072 23.122 77.7258 14.2683 78 5.54268V0H76.507C66.495 0.195122 56.2148 2.82317 48.5672 10.4878C43.4911 15.5732 40.3162 21.8232 39 28.378C37.6838 21.8232 34.5089 15.5732 29.4328 10.4878C21.7852 2.82317 11.505 0.195122 1.49297 0H0V5.54878C0.280313 14.2744 3.69891 23.128 10.2558 29.7012C17.0564 36.5122 30.0727 39.9451 39 40"></path> </svg></div> CSS .hjWElG { position: relative; width: 100%; display: grid; margin-top: -0.5px; margin-bottom: -0.5px; background-color: #ffffff; } /*!sc*/ .hjWElG canvas { width: 100%; height: auto; } /*!sc*/ .hjWElG .pattern-ref { position: absolute; visibility: hidden; pointer-events: none; } document.addEventListener("DOMContentLoaded", function() { const canvas = document.querySelector('canvas'); const ctx = canvas.getContext('2d'); const svgPath = document.querySelector('svg path').getAttribute('d'); const patternColor = 'pink'; // Color of the SVG fill let pattern; let maxScale = 1; // Maximum scale at the bottom of the page // Function to draw the SVG path into a canvas pattern function drawPattern(scale) { const scaledWidth = 78 * scale; const scaledHeight = 40 * scale; const blob = new Blob([`<svg xmlns='http://www.w3.org/2000/svg' width='${scaledWidth}' height='${scaledHeight}'><path fill='${patternColor}' d='${svgPath}' transform='scale(${scale})'/></svg>`], {type: 'image/svg+xml'}); const url = URL.createObjectURL(blob); const img = new Image(); img.onload = function() { pattern = ctx.createPattern(img, 'repeat'); updateCanvas(scale); URL.revokeObjectURL(url); }; img.src = url; } // Function to update canvas drawing based on scroll function updateCanvas(scale) { ctx.clearRect(0, 0, canvas.width, canvas.height); ctx.fillStyle = pattern; ctx.save(); ctx.scale(scale, scale); ctx.fillRect(0, 0, canvas.width / scale, canvas.height / scale); ctx.restore(); } // Update the canvas on scroll window.addEventListener('scroll', function() { const scrollPercent = window.scrollY / (document.body.scrollHeight - window.innerHeight); const scale = Math.max(scrollPercent, 0.1) * maxScale; // Scale starts from 0.1 to 1 drawPattern(scale); }); // Resize canvas dynamically and redraw pattern window.addEventListener('resize', function() { canvas.width = window.innerWidth; canvas.height = window.innerHeight; const scale = window.scrollY / (document.body.scrollHeight - window.innerHeight) * maxScale; drawPattern(Math.max(scale, 0.1)); }); // Initial setup canvas.width = window.innerWidth; canvas.height = window.innerHeight; drawPattern(0.5); // Start with the smallest scale });

Hi everyone, I'm trying to follow a guide from this code pen i saw on this forum Canvas Basic Starter (codepen.io) which is about using gsap to animate canvas elements. This works with rect but when using arc to construct circles it's neither clearing the previous frames and changing color or looping like the guide. I'm not sure what's going on. please any suggestions?

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

So I want to resize my WebGL canvas to be bigger than window.innerHeight but more like document.body.scrollHeight. I also don't want to lose the ration, so I would resize the width by the way (with ratio). I already achieve some sort of resizing, but either the ratio wasn't good or the effect was not on the cursor anymore, like it was some hundreds pixels away from the cursor place.

This is probably really obvious, but i can't make it work. Basically I adapted the code from the given codepen to my react project but I can't get it to work in the way I want. What I'm trying to do is make use of image sequence animation triggered by scrolling while also snapping to full screen sections. I've managed making these work individually but when I tried combining them is when I ran into trouble. The conclusion I came to is: the way I have it setup now, for the scroll snapping to work is body overflow:hidden and everything is taking place in a container div configured for snapping which is scrolling. Now the canvas animation is not triggering because it is expecting for the window to scroll which is not actually happening it is the div that is. I think the solution should be me directing and giving the right scroller to ScrollTrigger but I can't get it to work. I'm going to share the code below and I thank anyone in advance for any help provided. index.css Home.js Solutions I tried are a combination of the code below: I should mention that using this code above made the animation play trough once upon refreshing the site but it would not respond to the scroller. I'm sorry if the post is breaking any forum rules and if I didn't explain the problem quite as well as I could've.

Hi, There are some issue in canvas when implements 3d horizontal flip. Is there a way to make a horizontal flip animation in canvas - fabricjs? Thanks in advance.

Hey guys So i am making a project with gsap3 kind of like the apple airpod website I have like 500 + images and on scroll these images are being rendered in the canvas. I want to animate some text which will depend on the frame count the sequence is - frame ==0 animate in some text frame>0 animate out the previous text frame>10 again animate in some text frame>200 animate out the previous text so it goes... can some one tell me how can i do this in a efficient way. Thanks

I was wondering how does this kind of white wave from this site possibly made by GSAP? Is there any additional plugin necessary? I took so many times investigating this site. Hope I find the answer here. Thanks https://krotravelengineering.jp/

Dear forum participants. I need your professionalism in coding. I can’t understand what is used to achieve effects such as in these examples: 1. When you click on any project from the bottom up, the rounded form of the divlock block https://jesperlandberg.dev/ 2. a very similar effect we can see when you click on the menu at https://www.chiaraluzzana.com/about 3. when you hover over any project + when you click on this project, a similar effect appears https://www.martinehrlich.com/ I hope I threw off enough examples to understand what I mean. I want to achieve a smooth distortion of the standard div block. With CSS, this smooth effect is not possible. Please tell me the script or explain how to repeat it? I also found a library with a similar menu, but I don’t quite understand whether it is or not: https://tympanus.net/Development/OffCanvasMenuEffects/bubble.html

Hi, guys! I'm wondering if there is a way to move an element without the need to hover the cursor on the draggable element? Thank you!

Just curious if Draggable now works with EaselJS and Canvas? I found a post from almost 7 years ago where the answer was no, but that was 7 years ago and now I know that GSAP 3 is compatible with EaselJS I even use it inside of Adobe Animate which I do a lot of programming in. But my issues is If draggable is compatible now I am not sure how I can target my movieclips. Draggable.create(Main.MorningTasks.getChildByName(Root.ScheduledTasks.Morning[i].text), { type:'x,y', bounds: Main, onClick: function() { console.log(Task.name); }, onDragEnd: function() { console.log('Released ' + Task.name) } }); Following the example on Draggable Plugin Page, what I have I think should be right. Just looking for some guidance, I love GSAP and would love to be able to use draggable as well.

Hey all, after adding SVG support for elCanvas I wanted to also add the ability to draw an svg outline In the code pen I attached( which i used the public examples version of drawsvg on) I am attempting this 1) Draw a svg on the document with the same paths as the one in the canvas 2) Animate the svg outlines with drawSVG 3) On update match strokeDasharray to setLineDash and lineDashOffset so the canvas shape gets updated As you see it works! However every time I would need to draw an svg into the canvas I would first need to put one on the document, I wanted to ask is there a way around this? Is there a way to get the lineDash/DashArray data without having to draw an svg visually? When I put some animations with this effect into our game the devs might get upset I'm drawing all these elements just for reference I guess this is mainly a question to you awesome devs that made the lib in the first place @GreenSock but also to anyone else who might know. I had another consideration where I could make modifications to the plugin itself, but I really didn't wanna touch that, trying to do this without needing to modify Gsap code Thanks in advance!

Hi Everyone, The CodePen associated with this was forked from @OSUblake. I was successful in adding viewport responsiveness and circular button expansion but am failing in reversing to a circular button collapse. I believe I set the circular canvas diameter and arc correctly but when clicking the close icon on the menu button there is no canvas animation. I would appreciate some assistance and sincerely thank you in advance.

Let me start by saying that I know this is a Chrome/Chromium issue. The CodePen works as expected in Firefox. Also, I know Blake has warned about using foreignObjects but I'm stuck with using them because, in my app, I have to use foreignObjects to render image layers to canvas creating a stack of PNG sequences inside a master SVG. I'm also forced to be able to support Chrome/Chromium. Here's the deal. I've run into a stacking context issue which I thought I had resolved before by doing something subtle to the SVG container using TweenMax to force the browser to do a redraw. Here, though, the issue is a little different. I have to allow my users to shift the order of each foreignObject which I accomplish using a javascript insertBefore. But, as you can see in the CodePen, if you shift the animated element to the back of the stack and then re-run the animation the browser is rendering it on TOP of the stack for as long as the animation is running. Then, once the animation is completed, the browser renders the element to the back of the stack where it belongs. Forcing a redraw like I've done in the past is not working. Any help would be greatly appreciated.

I am trying to add the gradient effect of the small arc in my canvas image. Using context.createLinearGradient(0, 0, 400. 400); secondGradient.addColorStop(0, 'white'); secondGradient.addColorStop(0.2, 'black'); secondGradient.addColorStop(0.8, 'black'); secondGradient.addColorStop(1, 'white'); But unable to get the expected results, also would be great if someone can explain how createLinearGradient works with circle. the idea is to have the edge effect of the arc's end. If I had to guess, I think I am doing something wrong with the context.createLinearGradient(0, 0, 400. 400); part. Thanks in advance.

Lets have a look at this awesome 4 column animation. Website: orangina.eu Any idea how to make the 4 column hover animation using gsap?

Hi all, happy to join this forum with my first post! I've been using GSAP for quite some time now (Loving it!), and I also started to integrate his capability along with other cool drawing libraries. In this case, I'm having some hard time figuring out why frame-rate and animation performances decrease drastically on Safari and Firefox (Chrome is buttery smooth) when animating the following SVG shape using a combination of GSAP and two.js (Canvas Rendering). I've tried to change the rendering intent from canvas to SVG (via the two.js API) and animate a standalone SVG with GSAP only. In all scenarios, I'm experiencing the aforementioned issues. Does anyone have some good suggestion? Many thanks in advance!

Hey GSAP friends! I'm tweening a SVG circle's radius value and need it to sorta vibrate as it expands and contrasts. I'm just wondering, from a performance standpoint, what should give me best performance: var tl = new TimelineMax({repeat: -1, ease:Power0.easeNone}) //A: tl .to(svg, 2, {attr:{r:150}, ease: CustomEase.create("custom", "M0,0,C0,0,0.051,0.218,0.06,0.256,0.073,0.245,0.138,0.197,0.155,0.185,0.166,0.209,0.213,0.311,0.22,0.324,0.222,0.316,0.291,0.284,0.294,0.276,0.299,0.29,0.362,0.23,0.386,0.284,0.466,0.375,0.446,0.529,0.474,0.56,0.479,0.538,0.574,0.486,0.58,0.462,0.622,0.505,0.803,0.689,0.905,0.792,0.911,0.871,0.923,1.026,0.925,1.045,0.929,1.038,0.973,0.959,0.98,0.948,0.982,0.954,1,1,1,1")}) .to(svg, 2, {attr:{r:100}, ease: CustomEase.create("custom", "M0,0,C0,0,0.051,0.218,0.06,0.256,0.073,0.245,0.138,0.197,0.155,0.185,0.166,0.209,0.213,0.311,0.22,0.324,0.222,0.316,0.291,0.284,0.294,0.276,0.299,0.29,0.362,0.23,0.386,0.284,0.466,0.375,0.446,0.529,0.474,0.56,0.479,0.538,0.574,0.486,0.58,0.462,0.622,0.505,0.803,0.689,0.905,0.792,0.911,0.871,0.923,1.026,0.925,1.045,0.929,1.038,0.973,0.959,0.98,0.948,0.982,0.954,1,1,1,1")}) //B: tl .to(svg, 4, {bezier:{curviness:1.25, values:[{ {attr:{r:90}}, {attr:{r:40}},{attr:{r:50}},{attr:{r:80}},{attr:{r:150}},/*...etc...*/{attr:{r:95}},{attr:{r:100}} ]}} }) //or C: tl .to(svg, .1, {attr:{r:90}}) .to(svg, .1, {attr:{r:40}}) /*...etc...*/ .to(svg, .1, {attr:{r:150}}) /*...etc...*/ .to(svg, .1, {attr:{r:100}}) I know the level of control/readability will be different with each, but just wondering from a performance standpoint what will be best, or if it'd be minimal? Also, how would one go about testing this? There will be more going on in the timeline (several circles being animated in a similar way).

There are 4 same sized pictures that's I have cut in 4 equal parts, the problem is I can't make them animate on hover. The part I have hovereda should become wider. I tried to make it this way - but this example doesn't work with reactive variables in Vue, I'd declared in object with coordinates.

http://robinmastromarino.com/ Hi I want to make a slider in this way. Could you help me with a similar project

Hi everybody! I am completely new to GSAP. First of all I´d like to notice that I really have a hard time to get into this stuff. The documentation isn't that good for a beginner. I neither don't know what kind of plugins or other 3rd party java stuff is needed to use the gsap plugins, nor I really do not get it how to call up funtion to do something with gsap. So, how did I get here? I already programmed a little website for a geocache listing, but on mobile devices the site is kind of slow. Somebody told me to "do the trick" with gsap because it is much faster than jquery. My goal is to change the colors of pictures, borders and text when a checkbox is clicked. Here you can see what I mean: My example website I removed the images (actual code not in the example page) and now want to draw one corner image in 4 canvas. Here is what I got so far. <script> window.onload = function() { var canvas = document.getElementsByClassName("edge_can"); // I gave the canvas a class named "edge_can" / not on the example page! var ctx = canvas.getContext("2d"); var img = new Image(); img.src = "https://www.tissi-solutions.de/caches/matrix/edge.jpg"; ctx.drawImage(img,0,0,100,100); }; </script> Do the canvas need all one "id" or can I use a class to draw 1 picture in multiple canvas? How do I do that? Do I really need canvas for this or can I manipulate the colors by just calling a gsap funtion? Which plugins are needed to change all mentioned colors? Do I need PixiJS for the Pixi plugin? Am I on a right approach or do you think that the speed won´t improve by changing to gsap? Any suggestions are welcomed! Thanks in advance! Tissi

I am trying to reveal the black background only after the two red and blue canvases have completed the animation. But as you can see there is "leak" and the black ground is visible during the rotation. Also I'm learning to control overflow and have found this link https://stackoverflow.com/questions/8837050/allow-specific-tag-to-override-overflowhidden , but theres something I'm doing wrong . Please Help.

Hi, I'm new to GSAP and I'm trying to find a way to create an interactive map using a JPG image as the basemap and canvas and GSAP for the animation. I came across several examples on the GSAP website and a live project online that looks exactly like what I'm intending: http://rainforest.arkivert.no/#kart Can you tell me how is this done, or if there are any documentation/tutorial/workshop materials that I can go through. Please advice. Thanks in advance, Hagop