hayesmaker

Hi there, I'm using near latest npm greensock (3.11.4), and there seems to be a change in behaviour since version 2.0.1 and I'm not sure how to resolve it. Before I could have 3 items with infinitely repeating tween inside a timeline, but later I want to stop those tweens on a delay (so they don't stop at the same time), but I don't want to pause the timeline... so I'd add my tweens to a timeline like this: ``` // start rows anim this.spinTimeline = new TimelineLite({paused:true}); _.each(this.rows, (row, i) => { var slideTween = new TweenMax(row.sprite, 3, {x: row.offset, ease: Power0.easeNone, repeat: -1 }); this.spinTimeline.add(slideTween , "startRowT" + i, "-=0.1"); }); this.spinTimeline.play(); ``` then later I could stop them animating repeatedly by just calling a new tween on the row.sprite, with a slightly increasing delay on each, and the animations would transition smoothly from repeating x to landing on a specific point on the x axis. ``` stopRows() { _.each(this.rows, (row, i) => { TweenMax.to(row.sprite, 0.75, {x: row.offset, ease: Elastic.easeOut, delay: 0.75 * i, onComplete: this.animComplete.bind(this) }); }); } ``` Now with latest gsap versions I can't figure out how to recreate this. the repeating tween just keeps playing after the stopping tween finishes. If I pause the timeline first, it works but the repeating anims pause immediately.. If I use overwrite: true, then the repeating anims pause immediately (not when the stop anim starts after the delay). If I use timeline.killTweensOf(row.sprite) onStart, then it happens immediately, (not after the delay).. so i can't transition from one tween to the other anymore. My new code looks like this: ``` // start anim const tl = this.tl; this.rows.map((row, i) => { const offsetX = row.container.width / 2; tl.to(row.container, {x: offsetX, duration: 3, ease: 'none', repeat: -1}); }); tl.play(); // stop anim: this.rows.map((row, i) => { const toX = row.stopOffset; gsap.to(row.container, { duration: 1, x: toX , ease: 'elastic.out', delay: 0.75 * i, overwrite: true, // i'd expect this overwrite to happen after the delay, not immediately. onComplete: () => { //this.tl.killTweensOf(row.container); this.state = 'ready'; }, }); }); Edit: I found the problem, I needed to remove the duration from my new version and use t.killTweensOf in the onComplete (the line i had commented!).. that works as I want now!

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!

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?