laser_bang

I can't tell you how much I appreciate all of this! I meant to mention in my initial post that I was thinking about becoming a paying customer. The goal is to release everything of mine as non-commercial Creative Commons, but – as a person who provides expert consultations myself – I want to make sure people are fairly compensated. I have much bigger plans for these, so I think it's worth at least discussing a paid membership more. What's the best way to set up that consult?

Okay, one last thing! First, I want to thank y'all so much. With this guidance, I've managed to recreate my largest ~150MB animated SVGs in very simple 100KB html/JS files. The size savings appear to be exponential as the animations scale, too. This is all incredible and beyond what I hoped. Thank you! BUT, the code that I am currently using is very "jittery." I know it's GSAP, because the code jitters with both SVG and Pixi implementation, and Pixi can't be what's slowing it down if I'm rendering things like I think I am! The jittery behavior can be observed at full-scale, here: http://nickbloom.net/gallery/green.html The intended behavior can be observed in Webkit browsers only via the (24MB!) animated SVG, here: http://nickbloom.net/gallery/green.svg A potentially important note: Each cell has a different "framerate" so they change at different speeds. For animated SVG, you pass the total length of each animation for each cell, and SVG does the framerate math. So for GSAP, I just divided each cell's animation length by the total number of "frames" (in this case, 593) to give each cell its fractional speed. This, to me, should recreate the SVG animation exactly, but perhaps I'm misunderstanding `duration`. Page sourcing the html file linked above will get you all the code (everything is in that file!), but the relevant javascript absent only the lengthy arrays of colors, speeds, and start positions, is: //INPUTS var colors = [...]; var speeds = [...]; var startValues = [...]; const rows = 12; const cols = 400; //CREATE PIXI let app = new PIXI.Application({width: 1500, height: 750}); document.body.appendChild(app.view); //MATH FOR GRID CREATION let cell_width = app.view.width/cols; let cell_height = app.view.height/rows; //CREATE GRID (BITMAPPED, LEVERAGING TINT FOR SPEEEED) for (let i = 0; i < rows; i++) { for (let j = 0; j < cols; j++) { var s = new PIXI.Sprite(PIXI.Texture.WHITE); s.width = cell_width; s.height = cell_height; s.tint = 0xCCCCCC; s.position.x = j * cell_width; s.position.y = i * cell_height; app.stage.addChild(s); } } // SET INITIAL VALUES (THIS SHOULD BE STRAIGHT FROM CASSIE'S CODE ABOVE) gsap.set(app.stage.children, {pixi:{ tint: (i) => { console.log(i, '-' ,startValues[i]) return gsap.utils.wrap(colors, startValues[i]); }} }); // LOOP VALUES (THIS SHOULD BE STRAIGHT FROM CASSIE'S CODE ABOVE, BUT I TOOK OUT THE DELAY AND PASSED A SPEED FOR EACH) gsap.to(app.stage.children, {pixi:{ tint: (i) => { console.log(startValues[i]) return gsap.utils.wrap(colors, startValues[i]++) }}, duration: (i) => { return speeds[i] }, repeat: -1, repeatRefresh:true });

I had started to surmise that, but thank you for confirming and saving me a bunch of time!

I think this is an incredibly basic question, but I can't find an answer after like an hour or so of searching and it's likely just my javascript naivete showing: if I am creating shapes procedurally using `canvas`, how do I select those shapes for gsap. The code for procedural shape generation is (in this case rectangles): const rows = 10 const cols = 500 for (let i = 0; i < rows; i++) { for (let j = 0; j < cols; j++) { ctx.beginPath(); ctx.rect(j * 12, i * 300, 12, 300); ctx.fill(); } }

Thanks a bunch, Cassie, this is super helpful!

First, thank you for the excellent support despite my caginess. I'm still in the "wtf am I doing" stage of this and trying to figure out a way forward, and I think what I'm doing is probably an extreme edge case of one very specific application. I've copied a working example below with some relevant comments in it. I'm not sure how to do the codepen thing, but the code should work saved as HTML even without a webserver. I've got four shapes in the sample, but as I've said the catch is this: let's say (in the extreme limit) I want do this on 10,000 shapes several times a second, like a primitive pixel display. This toy solution does not scale, I have tested it. Based on the comments here and some more research today, I think the way forward is probably abandoning SVG in favor of Pixi graphics + some GSAP (if only bc of wrap()), but If anyone has thoughts on the most efficient way to do this, I'd be highly appreciative of any advice. I can for sure figure all this out myself, but I'd rather spend time on the actual work itself than building the framework for it. And I'd like to get a framework that could scale even further if possible! Some additional questions/notes: 1. One main clunkiness is that each shape has a different initial value. Is there a way to pass an initial starting value to `wrap()`? That would make things SO much easier for me, but it looks like there isn't from the docs. 2. The order of the circles and the order of the colors matters, but they aren't related to each other. Each circle is fixed, only the color changes. And they all cycle through the same set of colors in the same order. <!DOCTYPE html> <html> <head> <title></title> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.5/gsap.min.js"></script> </head> <body> <svg id="a" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" height="100%" viewBox="0 0 6000 3000"> <svg id="a" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="1500" height="2068.4" viewBox="0 0 1500 2068.4"> <!-- Circles are fixed throughout --> <circle class='c1' cx="286" cy="253.9" r="231.9" /> <circle class='c2' cx="286" cy="749" r="231.9" /> <circle class='c3' cx="286" cy="1246.1" r="231.9" /> <circle class='c4' cx="286" cy="1743.1" r="231.9" /> </svg> </svg> <script type="text/javascript"> // Define the color array // NOTE that the color array is not the same length as the number of circles // NOTE that the initial "starting" values of the circles does not go in the order of the array var colorArray = ["purple","green","red","blue","orange"] // Arrays of circle classes and starting array indices to pass to for loop var objClasses = ['.c1', '.c2', '.c3', '.c4'] var startValues = [2,1,3,4] // Use gsap.set to set initial values // NOTE: As best I can tell, `gsap.getProperty` does not work on custom CSS variables if the CSS variable is set natively in the svg/html file already, it has to be set via gsap.set // If I'm wrong and there's a better way to do this please let me know for (var i = 0; i < objClasses.length; i++) gsap.set(objClasses[i], { '--curColor':startValues[i] }); // gsap.to call for each of the four circles. This current solution does not scale elegantly. gsap.to('.c1', { fill: function() { let curColor = gsap.getProperty('.c1', '--curColor'); gsap.set('.c1', { '--curColor':curColor+1 }); return gsap.utils.wrap(colorArray, curColor) }, duration:2, ease: 'none', repeat: -1, repeatRefresh:true }); gsap.to('.c2', { fill: function() { let curColor = gsap.getProperty('.c2', '--curColor'); gsap.set('.c2', { '--curColor':curColor+1 }); return gsap.utils.wrap(colorArray, curColor) }, duration:2, ease: 'none', repeat: -1, repeatRefresh:true }); gsap.to('.c3', { fill: function() { let curColor = gsap.getProperty('.c3', '--curColor'); gsap.set('.c3', { '--curColor':curColor+1 }); return gsap.utils.wrap(colorArray, curColor) }, duration:2, ease: 'none', repeat: -1, repeatRefresh:true }); gsap.to('.c4', { fill: function() { let curColor = gsap.getProperty('.c4', '--curColor'); gsap.set('.c4', { '--curColor':curColor+1 }); return gsap.utils.wrap(colorArray, curColor) }, duration:2, ease: 'none', repeat: -1, repeatRefresh:true }); </script> </body> </html>

Thank you for the thoughtful reply! I can ask some general questions, which I think will be enough, because my questions are more conceptual rather than "why isn't this prototype working?" 1. I have different svg circles, let's say 20, all with unique opacities, and I want to cycle each circle's opacity stepwise in the same order through all 20 opacities in the set. Is there a way for me to maintain an ordered "database" of opacities that each shape can reference, rather than having to hard-code all 20 opacities for each of the 20 objects? Ideally I'd be able to pass every object only a "cycle start" position in the database and a speed to move through the queue, because the opacity information is shared across the set. Would the method for doing this be different if there were only 10 unique opacities for the 20 shapes? I imagine not but just in case! 2. Will GSAP automatically handle optimization as the number of objects scales up? Say, to 200 or 2000 objects? Or are there particular tips about how to enable GSAP to scale gracefully in these kinds of situations?

Hi all, I looked for forum rules and couldn't find any, I hope this doesn't violate anything. I am an artist currently developing a project that relies on SVG animations. I am trying to port my animation code to use GSAP since SVG-native is starting to sag under my requirements. Would someone very knowledgeable in GSAP be willing to answer some questions for me? Since the project isn't public yet I'd rather not post details about it publicly. For context, I am an experienced coder, but am totally new to GSAP. I don't think it'll take more than a few minutes, I mostly just need to be pointed in the right direction in a general sense by someone who can help me really my optimize my specific use case (several thousand linked, simultaneous animations), I can write all the code and troubleshoot from there. Again, hope this is okay. Thanks!