hayesmaker

I'm rolling back to Pixi 4.8.8 so I can make progress, thanks everyone for your help!

Hi thanks Jack, Unfortunately my 1 year Greensocks membership expired earliler this month, and I cant afford to renew for a while... So it looks like i'll miss out on the GSAP 3 update. @PointC Your approach is the only one doing what I want, so i'm trying to implement that... But it looks like the lineTo method gets called always from 0,0 and so it animates lines to each of the points along along the path... I made a codepen to demonstrate. [Edit] With the Pixi version @PointC uses it's ok.. with Pixi 5 it's not.. so it seems to be a difference in how line graphics work between the pixi version which is causing the problem in my codepen... it's weird, because lineTo should be moving the pen to the new location each update. :S https://codepen.io/hayesmaker64/pen/gOYXVEy

This looks good.. I'll give that a try thanks!

@PointC This will do what I want.. but I dunno how to construct that path for what I want

I'm referring to Greensocks own docs which says: " draw the path using the canvas's drawing API. " (see the snippet i quoted in OP) and wondering how I can do that. It's fine if I don't use pixi for the line draw and stick to context2D.. but i'd like to avoid using SVG data which you are using in your example.

Bezier Plugin Help: i'd like to animate the drawing of a bezier line like one I'd see using graphics.bezierCurveTo... I dont want to use divs or SVGs. (and I'm using Pixijs v5 for rendering) reading the docs says use BezierThrough method to draw the path using canvas graphics API... However there is no example for this.. and every example I've found online is just animating divs and SVG lines. const bezier = new PIXI.Graphics(); bezier.lineStyle(4, 0xAA0000, 1); bezier.position.x = 167; bezier.position.y = 409; let dest = { x: 819, y: 321 }; let localDest = { x: dest.x - bezier.position.x, y: dest.y - bezier.position.y }; let cp1 = { x: localDest.x * 0.25, y: - 400 }; let cp2 = { x: localDest.x * 0.75, y: - 400 }; bezier.bezierCurveTo(cp1.x, cp1.y, cp2.x, cp2.y, localDest.x, localDest.y); this.stage.addChild(bezier); Thanks.

Implemented method 1, And it works! Thank you! http://www.andy-hayes.com/src/screenshots/ss1.png Can you tell what it is yet?

eek, sounds like fun.. will let u know how it goes!

Hi there, I am trying to use ThrowPropsPlugin, I'm using canvas, so I can't use Draggable. I want to give my x and y 'end' property an array of end positions to throw to, but these positions are not arranged in a grid.. they are at different regions of the page. Because I want to be able to throw to various offset regions on the page,,, snapping to a grid using the 'topNotches' and 'leftNotches' arrays in the example isn't good for me. You mention that we can provide a function instead, but I can only give the function the x or y value as the parameter.. so the function in x's 'end' only knows about x, and the y only knows about y., I need to define non-grid like regions, do you think this is possible?

Ok, thanks for explaining it.

Hiya, I just wondered if this line in the ThrowProps plugin docs was correct or a typo: top = ((i / gridColumns) | 0) * gridHeight; should it be this? top = ((i / gridColumns) || 0) * gridHeight; or am I missing some fundamental law of javascript?