icraft-websites

Hey forums, I've just started using TimelineMax and have put together a small sequence. But when I click to play it in reverse there is a small 1 second delay before it moves any animation yet when I click to play it forward there is no delay. This is what I have got. var aboutMenuTimeLineIn = new TimelineMax({paused: true}); buildMenuTimeline(); function buildMenuTimeline(){ var menu = $('.popup-menu-container'); var overlay = menu.prev(); aboutMenuTimeLineIn.to(overlay, 0.3 ,{autoAlpha: 1}) .to(menu,.5, { autoAlpha: 1, top: 0, ease:Quint.easeIn}) .to(menu,.5, { width: 800, ease:Quint.easeIn }) .to([menu.find('.menu-option'), menu.find('.menu-close-box')], 0.1, { autoAlpha:1 }); } self.openMenuPopup = function(){ aboutMenuTimeLineIn.play(); }; self.closeMenuPopup = function(){ aboutMenuTimeLineIn.reverse(); };

Close, I cleaned up your code to what I wanted yet when trying to tween only the shadow inset it tweens the inset instead unless I declare both inset and outset. Here is what I wanted http://jsfiddle.net/D2z2C/27/ I am trying now to only tween the shadow inset and it tweens the outside shadow instead

Got it, applying jamie jerffersons answer by removing the inset parameter allowed both the inset and outset shadows to pulse self.animationPulse = function(){TweenMax.fromTo('#current-level', 0.75,{ boxShadow:"0px 0px 0px 0px #0066ff , 0px 0px 0px 0px rgba(0, 153, 255, 1)" }, { boxShadow:"0px 0px 30px 8px #0066ff , 0px 0px 30px 8px rgba(0, 153, 255, 1)", repeat: -1, yoyo: true, ease:Linear.easeNone }); } fixed it.

Sorry just realized I posted in Action script forum instead of JS. I was trying to apply an pulse effect using TweenMax and have the outside pulsing yet not the inside. As it I wish to apply the repetitive yoyo effect, This is what I have got self.animationPulse = function(){TweenMax.fromTo('#current-level', 0.75,{ boxShadow:"0px 0px 0px 0px #0066ff inset, 0px 0px 0px 0px rgba(0, 153, 255, 1)" }, { boxShadow:"0px 0px 30px 8px #0066ff inset, 0px 0px 30px 8px rgba(0, 153, 255, 1)", repeat: -1, yoyo: true, ease:Linear.easeNone }); }

Choice, Thank you! Will put this to good use

Hey there, is it possible to tween both shadow Inset and the outside shadow at the same time??

Thanks for the link rhernando, though not quite what I was looking for, allthough it is a really cool effect.

Using the tint in the ColorPropsPlugin drops my FPS too. I think my alternatives are to draw in a new/brighter image over top then fade it in and out to simulate the shine or set the exposure in one frame then set it back after the delay.

I would like to make a code pen but there's allot of code and dependencies there and cant seem to add extra CDN for Easel JS (plus I'm currently testing my project locally). . Carl you were spot of with the exposure. I removed the tween for the exposure on the Easel bitmap and it ran allot more smoothly (Only dropped 2 frames). I will now just have to find new way to shine my image. By the way You guys have amazing support and quick response time! thank you so much.

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