handiworknyc

THANK YOU!!!

Thanks @Cassie I'm very lost with this as the example shown has a single square where as my example is drawing rows and columns of circles. Any further hints you can give? thanks

Hi all, thanks in advance for your help. I've never really used canvas before but i got pretty far with ChatGPT... However ChatGPT was not good at getting these to animate with gsap. How can I set it up so that these circles animate (i'm thinking a staggered fade in, the first row from the left and the second row from the right) when the canvas element scrolls into view using ScrollTrigger var HW = {}; var $$ = function (selector, parent) { return Array.prototype.slice.call((parent ? parent : document).querySelectorAll(selector)); }; var loop = function (arr, callback, method) { method = method || 'forEach'; return Array.prototype[method].call(arr, callback); }; HW.circMotif = function(canvas) { const ctx = canvas.getContext('2d'); const circleSize = 80; // Size of the circles const padding = 3; // Padding between circle and square const canvasWidth = window.innerWidth + 6; const numRows = 2; // Number of rows // Calculate the square size based on the available width and padding const squareSize = (canvasWidth - 2 * padding) / Math.ceil(canvasWidth / (circleSize + 2 * padding)); // Calculate the number of circles that can fit in a row const numCirclesPerRow = Math.floor(canvasWidth / squareSize); // Calculate the total width of the circles and padding const totalWidth = numCirclesPerRow * squareSize; // Calculate the left margin to center the circles const marginLeft = (canvasWidth - totalWidth) / 2; // Calculate the canvas height based on the number of rows const canvasHeight = numRows * squareSize; // Set the canvas dimensions canvas.width = canvasWidth; canvas.height = canvasHeight; // Clear the canvas ctx.clearRect(0, 0, canvas.width, canvas.height); // Loop through the rows and columns to draw the circles for (let row = 0; row < numRows; row++) { for (let col = 0; col < numCirclesPerRow; col++) { // Calculate the x and y coordinates for the current circle const x = marginLeft + col * squareSize; const y = row * squareSize; // Determine the starting color combination for each row const isBlueCircle = ((row + col) % 2 === 0); // Set the fill color and draw the square ctx.fillStyle = (isBlueCircle) ? 'blue' : 'white'; ctx.fillRect(x, y, squareSize, squareSize); // Draw the circle ctx.beginPath(); ctx.arc(x + squareSize / 2, y + squareSize / 2, circleSize / 2, 0, 2 * Math.PI); ctx.fillStyle = (isBlueCircle) ? 'white' : 'blue'; ctx.fill(); } } } HW.doCircMotif = function() { var $circleZazz = $$('.circle-zazz'); loop($circleZazz, function(el){ HW.circMotif(el); }) } HW.doCircMotif();

Thanks for this... took me hours of troubleshooting and adding that line fixed the bug.

A super amateur hour mistake to watch out for. If you have more than one SVG on your page, make sure you give your clippaths UNIQUE ID's!!! Illustrator will give the clip paths an ID of "clippath" so just make sure they're unique. This will break clipmasks.