odell

Ive been working on this canvas animation and I cant seem to get get the parallax / magnetic cursor that snaps to a canvas element when its within a certain radius. Not quite what to try next. I created the most minimal version that i could on codepen as my config may be the problem. Id really appreciate some help and direction on what im doing wrong and how to implement the correct solution. Im trying to have the outer cursor snap and scale up to the moving bubbles.

Quick question, Is it possible to use a gsap ease outside of a tween or timeline? For example having gsap do all the heavy lifting and just state the ease in a vanilla request animation frame animation.

So I managed to get the particle to move attract towards the mouse but the performance is extremly bad and when I take out the "foreach" loop it only effects 1 particle/sprite. Can someone help me figure out what Im doing wrong. No codepen bec I have no clue how to load a json file, but heres the code. stars = []; gsap.ticker.add(() => { calculateStarPosition app.ticker.update(); }); for (var i = 0; i < totalStars; i++) { var star = new Sprite(id["star.png"]); star.interactive = true; // enable mouse and touch events star.buttonMode = true; // show hand cursor on mouseover star.scale.set(rand(0.05, .07)); star.anchor.set(.5); star.x = rand(vWidth * .5 * -1, vWidth * .5 ); star.y = rand(vHeight * .5 * -1, vHeight * .5); stars.push(star); spriteParticles.addChild(star); function calculateStarPosition(star){ const mouseCoords = app.renderer.plugins.interaction.mouse.global; var radius = 30; var dx = mouseCoords.x - (star.getGlobalPosition().x) var dy = mouseCoords.y - (star.getGlobalPosition().y) console.log("dy") var dist = Math.sqrt(dx * dx + dy * dy) || 1; var angle = Math.atan2(dy, dx); if(dist < radius){ radius = dist; // TweenMax.to(sign, 0.3, {scale: 2}); gsap.to(star, {pixi:{scale: +.5}, duration:0.3}); } else{ // TweenMax.to(sign, 0.3, {scale: 1}); gsap.to(star, {pixi:{scale: +.1}, duration:0.3}); } gsap.to(star, {pixi:{ x: Math.cos(angle) * radius, y: Math.sin(angle) * radius }, duration:0.3}); } stars.forEach(calculateStarPosition) }

So theres two things I'm trying to accomplish that I can't seem to figure out. How would i go about changing the "baseSpeed" to 0 when I hover over the button and if I wanted the particles to interact with the cursor either repel or attract how should I go about that.

Seems Im not the only one curious about this. Even gave a potential real world example. Figured I'd direct this here.

Yeah general idea I was curios about was, is there a way I can link, attach, bind, whatever html images to canvas and animate alongside canvas objects using canvas animations. Looked into a bit since the question, and from what I understand its "technically" possible if placed inline SVG but from what you lose, and the security factors, there's not much to experiment with. But if you know different, I would love to be told I'm incorrect and there's a way lol.

This is literally a life saver lol. Question, if possible could you point me in the direction on how I can go about connecting, in no particular way, html elements to canvas shapes or elements etc. Similar to using the data attribute to connect JavaScript properties i.e. linking an array of positioned html images to an animation in JavaScript.

Makes sense. Thanks.

Hows it going. This is my first post so hello. I came across this problem that I cant seem to fix on my own. Im animating SVG rect transform properties and the width of the rectangle is a different length on Firefox than it is on Chrome. I may have read incorrect but from what I understand, although not a full recommendation, they do support inline SVG transforms. If someone could take a quick look and give an explanation to what Im doing wrong or some solid references that would be greatly appreciated. I made a quick codepen of just the logo. Everything is fine in codepen but not when I test it locally with Firefox. Also I know I'd probably have much less trouble and this same animation can probably be achieved in a much more simple way had I either gone the clip-path route or pseudo elements, but I was already pretty deep and figured I'd try and see this all the way through and if all fails then take the easy way out. Also any constructive criticism or suggestions please give.