Search the Community

I am currently working on a project- I have been using TweenJS. But I have fallen in love with versatility with GSAP. The only thing I am trying to figure out is if there is a similar function for GSAP that removes every instance of a tween like CreateJS createjs.Tween.removeAllTweens(); I have found myAnimation.kill(); but from what I can tell that is a per instance usage and I am looking for more of an overall function when I go to reset that would remove all tweens.

Hi! I use Animate cc in conjunction with greensock to develope banners and animation. In Animate cc 19.1 there looks to be a bug or change in code that affects how nested animations work in symbols. Used to be able to do this: tl.to([this.sym1.sym2],1,{x:"-=500"},"+=0"); Moves sym2 inside sym1 500 pixels. Making a new animation in "19.1" this no longer works. However opening a file in "19.1" made in version "18.whatever" this still works. If possible please confirm behaviour. Or perhaps there is a better way of targeting nested symbols.

Hey there forums! recently jumped into using TweenLite and really like its simplicity. All though when I try to tween between 40-60 CreateJS shapes at once my fps drop by 1 thrid. Here is what I have got. The tweenInStar gets called 3 times simultaneously. and draws a whole bunch of particles and shapes (The particles are handled by raw canvas code and dont affect the fps). The moment it gets to the " TweenLite.to(largeSparkle,.8, {easel:{rotation: 270 }});" My fps takes the hit. function tweenInStar(star, starX, starY , particleCount){ var shape = starsShapes[star]; if(!sparkleArrayFilled[star]){ buildSparkles(star, starX - 58,shape.y - 20, random(20,40)); sparkleArrayFilled[star] = true; } TweenLite.to(shape,.2, {easel:{scaleX: 0.9, scaleY: 0.9, alpha: 1.0},onComplete:function(){ fireworks.push( new Firework( starX, starY , starIndex, particleCount) ); createParticles(starX,starY); var largeSparkle = createSparkle(starX , shape.y - 10, 80, 40); TweenLite.to(largeSparkle,.8, {easel:{rotation: 270 }}); TweenLite.to(largeSparkle,.4, {easel:{scaleX: 1, scaleY: 1 ,alpha: 0.8 }}); TweenLite.to(largeSparkle,.4, {easel:{scaleX: 0, scaleY: 0 ,alpha: 0 }, delay:.4}); TweenLite.to(shape,.15, { easel:{exposure:1.25}, onComplete: complete}); }}); function complete(){ TweenLite.to(shape,.15, { easel:{exposure:1}}); drawSparkles(sparklesArray[star]); } } var sparkleArrayFilled = [false, false, false]; var sparklesArray = [[],[],[]]; function buildSparkles(star, x, y, scale){ var i = Math.floor(random(5,15)); while(i--){ sparklesArray[star].push(createSparkle((x + random(15, 100)), (y + random(-20, 60)), Math.floor(random(10,30))), 20); } } function drawSparkles(sparkles){ for(var j = 0; j < sparkles.length; j++){ var shape = sparkles[j]; TweenLite.to(shape,.8, {easel:{rotation: 270 }, onComplete:resetRotate()}); TweenLite.to(shape,.4, {easel:{scaleX: 1, scaleY: 1 ,alpha: 0.8 }}); TweenLite.to(shape,.4, {easel:{scaleX: 0, scaleY: 0 ,alpha: 0 }, delay:.4}); function resetRotate(){ shape.rotation = 0; } } } function createSparkle(x, y, scale, shadowBlur){ var sparkle = new createjs.Shape(); //sparkle.shadow = new createjs.Shadow("#fff", 0, 0, shadowBlur); sparkle.graphics.beginFill("#fff").drawPolyStar(x , y, scale, 4, 0.87, -90); sparkle.x = x; sparkle.y = y; sparkle.regX = x ; sparkle.regY = y ; sparkle.scaleX = 0; sparkle.scaleY = 0; sparkle.alpha = 0; // sparkle.cache(-x, -y, 200, 200); stage.addChild(sparkle); return sparkle; } Would be eternally greatful for any help

Hi Team, I am a wireless specialist by trade and a very amateur programmer in my spare time. So I may ask some funny questions and my understanding may not be on par with most of you. I am trying to program a basic asteroid avoidance game in easeljs. Basically I am drawing 10 asteroids on the canvas and making them move towards the left and offscreen. I will later initialise them offscreen to the right, move left and recycle them once they hit the left edge of the canvas to give a continuous asteroid field effect. Underneath is my code. All is working except my tick function (animate function). The tick function is actually part of createjs.Ticker class, so I am not actually calling this function with tick() anywhere in my code as the createjs.Ticker.addListener(this) is doing the work. The stage.update(); call in the tick function redraws the canvas. This is working but every frame it is not animating my asteroids. The for loop before the stage.update() seems to not do anything ! Not sure how to console debug it ! The Documentation surrounding the ticker class is very confusing. I have gone through a number of demos and they have similarly used the ticker function with bitmap image instead of circles. Could any of you who have some Easeljs experience please give me a brief rundown on how to fix the issue, how to correctly call the ticker.addlistener function and if there are any rules with adding additional functionality to the tick() function as the easeljs library has a number of attributes already defined in the tick() function. I could write my own animate function but I would rather use the Easeljs way for now as it cuts down on the code substantially. Thank you for taking the time to read this post. Hope you have a great evening and Thank you in advance. Emanuel! <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Easel Intro</title> <script src="js/easeljs-0.6.0.min.js"></script> <script> var canvas; var stage; var Asteroid; var numAsteroids; var radius; var asteroidsARRAY; var canvasWidth = 800; var canvasHeight = 600; function init(){ canvas = document.getElementById("canvas"); stage = new createjs.Stage(canvas); drawAsteroids(); } function drawAsteroids(){ var container = new createjs.Container(); stage.addChild(container); var numAsteroids = 10; // Number of Asteroids to be reproduced on screen. asteroidsARRAY = []; //Array to store Asteroids. for (var i=0; i<numAsteroids; i++){ //for loop to draw 10 Asteroids on canvas. radius = 5+(Math.random()*10); templateAsteroid = new createjs.Graphics(); templateAsteroid.setStrokeStyle(1); templateAsteroid.beginStroke(createjs.Graphics.getRGB(0,0,0, .7)); templateAsteroid.drawCircle(0,0, radius); Asteroid = new createjs.Shape(templateAsteroid); Asteroid.x = Math.floor(Math.random()*canvasWidth); Asteroid.y = Math.floor(Math.random()*canvasHeight); Asteroid.speed = (Math.random()*5)+2; container.addChild(Asteroid); Asteroid.name = "asteroid"+i; asteroidsARRAY.push(); } stage.addChild(Asteroid); createjs.Ticker.addListener(window); } function tick(){ var l = asteroidsARRAY.length; for (var i=0; i<l; i++) { var a = asteroidsARRAY; a.x -= a.speed; document.write(a.x); } stage.update(); } </script> </head> <body onLoad="init();"> <canvas id="canvas" width="800" height="600"> <!-- Insert fallback content here --> </canvas> </body> </html>

Hello, I've been working with the Javascript version of GreenSock v 12, EaselJs, and the Canvas element. I know that the Actionscript version of Greensock has a CircluarPath2D or something something like that, but I've searched Google and the Greensock forums and cannot find a way of actual animate the drawing of a shape like in Flash. I've seen tons of examples on "Transforming" shapes, and the drawing of shapes and then put them on the screen, but not any actual on-screen animated drawing of a shape/bezier. I also, looked into svg, but did not see an option there. Is it possible to do this without using masks? If so, please provide a very simple example or send me a link to how to do this Thanks for viewing, any help will be greatly appreciated.

Hi Has anybody got experience using TweenLite with EaselJS? I would rather use TweenLite because of the performance and familiarity I have with it. But not sure if EaselJS will work better with TweenJS, as both come from createjs.com. Thanks James