Search the Community
Showing results for tags 'tweenlite'.
-
Hi, I am working on a project, in which I am trying to move 12 SWF files simontaneously with the help of (TweenMax.allTo). but when I try this in browser, many frames are skipping during movement. size of each SWF is 2500X2400 px and I'm using 4 MB jpg image in SWF as backfround. Code : TweenMax.allTo([CONTAINER_1, CONTAINER_2], groundFriction, { x:xPos, y:yPos} ); Both the containers are containing 6 SWF files. xPos and yPos is calculating dynamically on keyboard key down event, and I am using ENTER_FRAME to move the canvas. If someone knows how to deal with it, please help me. Thanks in advance.
-
I have an object that is within scope of two tweens. I want to relatively tween a numeric property of this object in both tweens, however the tweens both seem to be making their own internal copy of the object during the tween and overwriting the object. Thus the resulting value of the object is equal to the value of the tween that finishes last and thus gets to overwrite the property the last. See my codepen for an example. How would I make these tweens compete against each other?
-
Hi there. This is a straight forward question. What is the best technique for coding a replay button in Greensock AS3? Would TimelineMax be best? Could I see an example? Thanks in advance for any assistance.
-
Hey everybody, I am trying to make my background scroll smoothly according to the user's drag, window (stage) is 800 by 480, background (lvl1_blitmask) is 2400 by 480 It's scrolling quite nicely, but not perfectly, it skips and jumps around toward the right side of stage. It is surely a matter of the maths involved, im afraid i just comprehend where... Here is the code: function mouseMoveHandler(event: MouseEvent): void { if (blitMask.bitmapMode == false) { blitMask.enableBitmapMode(); } var x: Number = this.mouseX - xOffset; if (x > bounds.left) { lvl1_blitmask.x = (x + bounds.left) * 0.5; } else if (x < bounds.left - xOverlap) { lvl1_blitmask.x = (x + bounds.left - xOverlap) * 0.5; } else { lvl1_blitmask.x = x; } blitMask.update(); var t: uint = getTimer(); //if the frame rate is too high, we won't be able to track the velocity as well, so only update the values 20 times per second if (t - t2 > 50) { x2 = x1; t2 = t1; x1 = lvl1_blitmask.x; t1 = t; } event.updateAfterEvent(); } function mouseUpHandler(event: MouseEvent): void { lvl1_blitmask.stage.removeEventListener(MouseEvent.MOUSE_UP, mouseUpHandler); lvl1_blitmask.stage.removeEventListener(MouseEvent.MOUSE_MOVE, mouseMoveHandler); var time: Number = (getTimer() - t2) / 1000; var xVelocity: Number = (lvl1_blitmask.x - x2) / time; ThrowPropsPlugin.to(lvl1_blitmask, { throwProps: { x: { velocity: xVelocity, max: bounds.left, min: bounds.left - xOverlap, resistance: 1000 } }, onUpdate: blitMask.update, ease: Strong.easeOut }, 10, 0.5, 1); I have also uploaded the flash cc file, Thanks anybody who can spare a sec, LeonardTheLeopardV2.zip
-
hello all, I am learning GSAP with the GSAP tutorial book I purchased from Nobledesktop, so far so good but I am running into an issue in one of the exercise. Basically, using TweenLite.from, the opacity of the target still visible for fraction of a sec before the animation starts, I want to fix it so that when the animation runs, the target is not visible, as intended by using TweenLite.from. I did a search and saw a thread that suggest using TweenLite.render(), but that didnt help me. Below is the HTML (I added the zip file for the exercise): <!DOCTYPE html> <html> <head> <title>2D Transforms</title> <style type="text/css"> body { background-color:#041218; color: white; } .panel { position: relative; background: url(img/gradient-bg.jpg); width: 700px; height: 400px; margin:50px auto 0 auto; overflow: hidden; } .clapper { position: absolute; width: 295px; height: 225px; left: 32px; top: 105px; } .clapper-top { position: absolute; } .clapper-bottom { position: absolute; top: 30px; } .panel h3 { position: absolute; left: 350px; top: 100px; font-size: 60px; font-family: Arial, Verdana, Helvetica, sans-serif; display: inline-block; } </style> </head> <body> <div class="panel"> <div class="clapper"> <img class="clapper-top" src="img/clapper-top.png"> <img class="clapper-bottom" src="img/clapper-bottom.png"> </div> <h3>ACTION!</h3> </div> <!-- load scripts after dom has been rendered --> <script src="js/gsap/TweenLite.js"></script> <script src="js/gsap/plugins/CSSPlugin.js"></script> <script src="js/gsap/easing/EasePack.js"></script> <script src="js/jquery/jquery-1.9.1.min.js"></script> <script> var $clapperTop = $(".clapper-top"); $action = $(".panel h3"); TweenLite.to($clapperTop, 0.5, {rotation:-20, transformOrigin:"15px 15px", ease:Power4.easeIn}); TweenLite.to($clapperTop, 0.1, {rotation:0, ease:Power4.easeIn, delay:1}); TweenLite.from($action, 0.2, {opacity:0, scale:0, ease:Bounce.easeOut, delay:1.1}); TweenLite.to($action, 0.5, {skewX:-45, left:750, ease:Back.easeIn, delay:1.5}); // this didnt help TweenLite.render(); </script> </body> </html> Any help will be greatly appreciated, thanks. [edit : attachment removed by admin]
-
hi guys, When I click dave btn and steve btn several times quickly, then the green and red boxes are not expanding the size they should. What do I do to fix this problem? And, how to disable either one while another one is in animation? Thanks a lot. http://codepen.io/7537247/pen/AqLEc
-
Hi there, I have the following code on an animation: import flash.display.MovieClip; import flash.events.MouseEvent; import com.greensock.*; import com.greensock.easing.*; import flash.ui.Mouse; import com.greensock.plugins.TweenPlugin; import com.greensock.plugins.BlurFilterPlugin; TweenPlugin.activate([BlurFilterPlugin]); var tl:TimelineLite = new TimelineLite(); tl.insert(TweenLite.from(who_mc, .25, {x:420, blurFilter:{blurX:10}, ease:Quad.easeOut})); tl.insert(TweenLite.to(who_mc, 1, {x:140, delay:.25})); tl.insert(TweenLite.to(who_mc, .5, {x:-126, ease:Quad.easeIn, alpha:0, delay:1.20})); tl.insert(TweenLite.to(black_mc, .5, {x:-161, ease:Quad.easeOut, delay:1.5})); tl.insert(TweenLite.from(grab_mc, .5, {x:-120, blurFilter:{blurX:10}, ease:Quad.easeOut, delay:2})); tl.insert(TweenLite.to(grab_mc, 1, {x:168, delay:2.45})); tl.insert(TweenLite.from(by_mc, 1, {x:437, blurFilter:{blurX:10}, ease:Quad.easeOut, delay:2})); tl.insert(TweenLite.to(by_mc, 1, {x:140, delay:2.45})); tl.insert(TweenLite.to(by_mc, .5, {x:-121, delay:3.4, ease:Quad.easeIn, alpha:0})); tl.insert(TweenLite.to(grab_mc, .5, {x:423, delay:3.4, ease:Quad.easeIn, alpha:0})); tl.insert(TweenLite.to(img1_mc, .5, {y:-126, delay:3.9})); tl.insert(TweenLite.from(img2_mc, .5, {y:384, delay:3.9})); tl.insert(TweenLite.from(white_mc, .5, {x:-95, delay:4.4})); tl.insert(TweenLite.from(labor_mc, .25, {x:-72, ease:Quad.easeOut, delay:4.9})); tl.insert(TweenLite.from(sale_mc, .25, {x:-72, ease:Quad.easeOut, delay:5})); tl.insert(TweenLite.from(clearance_mc, .25, {x:-72, ease:Quad.easeOut, delay:5.1})); tl.insert(TweenLite.from(rectangle_mc, .25, {x:-93, ease:Quad.easeOut, delay:5.2})); tl.insert(TweenLite.from(percent_mc, .25, {x:-93, ease:Quad.easeOut, delay:5.3})); tl.insert(TweenLite.from(save_mc, .25, {x:-93, ease:Quad.easeOut, delay:5.4})); tl.insert(TweenLite.from(save_btn, .25, {x:-93, ease:Quad.easeOut, delay:5.5})); tl.insert(TweenLite.from(blur_mc, .5, {alpha:0, delay:4.9})); function replayHover(e:MouseEvent):void{ TweenLite.to(replay_click, .5, {rotation:360}); } function clickReplay(e:MouseEvent):void{ tl.restart(); } replay_click.addEventListener(MouseEvent.CLICK, clickReplay); replay_click.addEventListener(MouseEvent.MOUSE_OVER, replayHover); replay_click.buttonMode = true; I'm using timelinelite on a replay button to replay all the animation - it works fine, and has always worked fine in the past (until recently) however it's not resetting the x value in the following two lines of code: tl.insert(TweenLite.from(grab_mc, .5, {x:-120, blurFilter:{blurX:10}, ease:Quad.easeOut, delay:2})); tl.insert(TweenLite.from(by_mc, 1, {x:437, blurFilter:{blurX:10}, ease:Quad.easeOut, delay:2})); The rest of the code is resetting perfectly. Any suggestions?
-
I'd like to understand the best way to do those 'hiding and showing" elements that are not in the HTML flow — for instance, the sort of thing where you slick on a form element and more choices appear underneath. I believe, from looking at the forums, that if you have an element that is hidden, and not in the flow, you set visibility:none,opacity:0 and then TweenMax.to(element, time {autoAlpha:1, visibility:block}) — but will this "slide" the element into place, that is both make it tween opacity as well as tween the other elements to make room? If not, what's the best way to achieve this? How does one make it hide again? Perhaps I'm not on the right track, but it's an ubiquitous internet visual technique, so I'm open for best practices how to achieve. Or perhaps one should simply keep the place occupied, have visible:hidden? — but then there are a lot of blank spaces, no? Any help appreciated, sorry if at all vague. -
Hello, I would like to know if there is way to execute any logic at half animation. For example : TweenLite.to($(item), 3, {rotationY: 180}); and at 1.5 s. execute : TweenLite.set($(otherItem), {alpha: 0}); best.
-
Hi, Noticed something when zooming in (ctrl + +) in browser the transform origin doesn't scale properly. Is this a bug or am I doing something wrong here? thanks! example: http://codepen.io/skorpa/pen/tcnld
-
Hi there. Can someone demonstrate how I would pass a numerical value to positioning setting such as x or y that is set in a variable from an array using Tweenlite if possible? (tweenmax?) For example, the Flash tween version: var myNumber : Number = 0; var myArray : Array [30, 20, 10]; new Tween(instance_mc,"x",Regular.easeOut,instance_mc.x,myArray[myNumber],1,true); Thanks for any help!
-
Hi there. This question isn't limited to Greensock but was hoping I could get a little help here. I have an image scroller that basically uses buttons to relatively position a movieclip containing a horizontal line of images. There is a mask over an area so that when you click a left or right arrow, it relatively positions the movieclip under the mask and reveals a section of the movieclip. I have this working fine, however the one functionality I'd like to add, is when the left or right border of the movieclip is reached, the appropriate button is disabled so that the movieclip isn't positioned outside of the mask. Or it loops back to the starting x position. Here is the code: import flash.display.MovieClip; import flash.events.MouseEvent; import com.greensock.*; import com.greensock.easing.*; function init():void { TweenLite.to(products_mc, 1, {x:696, alpha:1}); } init(); function productsLeft(events:MouseEvent):void { TweenLite.to(products_mc, .75, {x:"-255"}); } function productsRight(events:MouseEvent):void { TweenLite.to(products_mc, .75, {x:"255"}); } arrowL_btn.buttonMode = true; arrowL_btn.addEventListener(MouseEvent.CLICK, productsLeft); arrowR_btn.buttonMode = true; arrowR_btn.addEventListener(MouseEvent.CLICK, productsRight); if (products_mc.x == 696) { arrowR_btn.visible = false; arrowR_btn.buttonMode = false; } if (products_mc.x == -1086) { arrowL_btn.visible = false; arrowL_btn.buttonMode = false; } /* buttons */ arrowL_btn.doubleClickEnabled = true; arrowR_btn.doubleClickEnabled = true; arrowL_btn.addEventListener(MouseEvent.DOUBLE_CLICK, doubleClickHandler, false); arrowR_btn.addEventListener(MouseEvent.DOUBLE_CLICK, doubleClickHandler, false); function doubleClickHandler(evt:MouseEvent):void { evt.stopPropagation(); }
-
Hi there. Is it possible to tween the kerning of a word via TweenLite in AS3? My search hasn't pulled up info on that. Apologies if I'm over looking something! Thanks!
-
Hi I tried to use TweenLite to animate some elements, but it didn't work ! The console.log command works, no errors occures, but nothing happens too. This is the whole page : <!doctype html> <html> <head> <meta charset="utf-8"> <title>ایشکاب</title> <script src="js/greensock/TweenLite.min.js"></script> <script type="application/javascript"> window.onload = function(){ var back = document.getElementById("back"); var table = document.getElementById("table"); console.log(table); //TweenLite.to(table,4,{top:"4500px" , height:"0px"}); TweenLite.to(table,4,{top:"4500"}); TweenLite.to(back, 1.5, {width:100}); }; </script> <style> body,html { padding: 0px; margin: 0px; height: 100%; width: 100%; overflow: hidden; } #cont { position: relative; margin: 0px auto; width: 960px; height: 100%; overflow: hidden; } #back { position: absolute; background-image: url("images/back.jpg"); width: 960px; height: 1484px; } #table { position: absolute; background-image: url("images/table.png"); width: 521px; height: 1171px; left: 0px; top: 20%; } #menu { position: fixed; right: 10px; bottom: 10px; width: 300px; height: 150px; background-color: red; } </style> </head> <body> <div id="cont"> <div id="back"></div> <div id="table"></div> <div id="menu"></div> </div> </body> </html>
-
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
-
So, this one had me going for about 5 hours yesterday. Maybe it was a late night, but in case anyone else runs into the same problem I thought I'd post about it. The story so far :: I've been programming a game for mobiles using kinetic & the lite greensock libraries. In order to keep the main animation loop nice and tight the plan was to generate all of the tweens during the initialisation phase, store them in an array and call them by adding them to a timelinelite instance depending on what phase the game was in. The problem :: every time I created a new tween it ran ! Not so handy when trying to pre-compute them. I looked at test code I had written when coming up with a strategy and that code was running fine. I could create the tweens, store them in variables, and they'd be ready. There seemed no difference in the code, but the results were different. The (eventual) solution :: It turned out to be a scoping thing. Because most of the functions for the game are in a different js file, and I was creating the main work-horse timelinelite instance in the main page when adding the tweens in the function stored in the js file, I'm guessing the library thought "hmm, I can't see a TLL object, I better run these right away" So it was a really easy fix in the end, I just declared a paused dummy TLL object in the function which sets up the tween presets, add the tweens to this a few lines of code after setting them up and all is well. They're ready for use when needed. It's probably just a case of me not RTFM correctly, but I couldnt' see any info about it. Hope this nugget helps someone avoid the head scratching and beard pulling I went through ! Bests om
-
Hi there, i'm trying to do a basic animation for a button and it's not working when i put my code on my website. Here's the CodePen page(it works here): http://codepen.io/anon/pen/KnfLk When i drop that code in my website i get this: Nothing happens basically, and even the console.info doesn't work.
-
Hi - In a banner I'm working on, I have a secondary timeline which controls an object sliding up and down on my screen. The secondary timeline works properly, but I'd also like to be able to pause the main timeline when the secondary object slides up on the screen, and then resume playback of the main timeline once my object slides out of view. Here's my current code: <script> var tl = new TimelineLite(); tl.add( TweenLite.to("#studyDescription", 1, {top:20})); tl.to("bgMask", .5, {autoAlpha:1}); tl.pause(); var button = document.getElementById("openButton"); button.onclick = slideStudyUp; if (button.captureEvents) button.captureEvents(Event.CLICK); function slideStudyUp(){ tl.play(); } var closeButton = document.getElementById("closeButton"); closeButton.onclick = slideStudyDown; if (closeButton.captureEvents) closeButton.captureEvents(Event.CLICK); function slideStudyDown(){ tl.reverse(); } </script> I'm pretty sure that I just need to add something like "main timeline.pause()" to my slideStudyUp function, and "main timeline.play()" to my slideStudyDown function - but what's the correct way to reference the main timeline? Thanks!
-
Trying to figure out why this onClick event doesn't fire on the first click. But on the second-on, it works perfectly? Any thoughts? Check out the link for the code: http://codepen.io/caseybaggz/pen/KoBjE Look forward to squashing this bug! -Casey
-
Hey everyone so In my Movie Clip class I have the Object move to the Right side of the stage using TweenLite and after the tween is finished I want the function "OnComplete" to remove the object but its not doing anything and the object is still on stage. Here is how I am using it: TweenLite.to(this, 3.0, { x: 900, y: 300, onComplete:removeTween } ); Then the Function: private function removeTween():void { if (this.parent) { parent.removeChild(this); } } Does anyone know why its not removing the object from the stage?
-
Check it out its in beta right now for the public but I have been using it for a year and a half. I made a super light weight version of jquery thats way faster and lighter. It has what you need and nothing you dont. This has been stable in all my projects for a while now in ie7+ https://github.com/Lbox/minowjs
-
Why doesn't 'myFunction()' fire at the end of this? (simple scroll-to-section) $('a.trigger').bind('click',function(event){ event.preventDefault(); var $anchor = $(this); var scrollY = $($anchor.attr('href')).offset().top - 100; TweenLite.to($(window), 1.6, {scrollTo:{ y:scrollY, onComplete:myFunction, ease:Power2.easeInOut }}); function myFunction(){ alert('done'); } }); Something to do with the scrollTo plugin??? I am confused...I have tried putting onComplete outside of the scrollTo:{} brackets, still nothing... what's up? Thank you very much for any help! Luke
-
I'm making the switch from Flash to GSAP HTML5 animation and want to really make sure I'm doing this the best way. Right within my html doc I have a series of animation that utilize TimelineMax so that I may loop the entire set of animations. I have a few questions about these. First of all here is the code: <script> window.onload = function(){ var tl = new TimelineMax({repeat:2, repeatDelay:3}); tl.add( TweenLite.to(container, 1, {autoAlpha:1, ease:Quad.easeIn}) ); tl.add( TweenLite.to(my_films, 1, {width:177, height:44, alpha:1, ease:Power1.easeIn}) ); tl.add( TweenLite.from(season2, 1.5, {alpha:0}) ); tl.add( TweenLite.to(grantland, .5, {x:19, alpha:1}) ); tl.add( TweenLite.to(packshot, 2, {alpha:1, ease:Power4.easeIn}) ); tl.add( TweenLite.to(holiday, 1, {alpha:1}) ); tl.add( TweenLite.to(starts, .75, {alpha:1}) ); tl.add( TweenLite.to(buy, .5, {alpha:1, top:142, ease:Back.easeOut}) ); } </script> Is there a more optimized way to load these? I know that window.onload = function(){ isn't the best way - I heard that document.ready could be a good way but having a hard time getting that work. Further more I can probably scrap the TweenLite reference all together and just use tl.to, is that correct? Also right now I'm pulling in the entire TweenMax library in this manner: <script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script Is there a way to only load the select things that I need and therefore save on file size? Please advise. Apologies for the noob questions! Thanks in advance for any help!
-
The two tweens below fade in a group of divs, but the problem is each fades in with more time between the last as it progresses (almost like it's exponentially slowing). And both tweens below fade in the first two divs at the exact same time with no stagger (hence "faking" it with the delay on the second). Any idea why? How can I get a group of divs with the same class to fade in, one by one, with the same uniform delay between the first two and the rest? Thanks in advance! /* this one doesn't work in a linear fashion */ TweenMax.staggerFromTo($("#overlayFrame"+nextFrame+ " .hotSpot"), 1.5,{opacity:0},{opacity:1},2); /* this one doesn't work in a linear fashion */ var tl = new TimelineMax() tl.add(TweenLite.to($(".courthouse"), 1, {opacity:1})); tl.add(TweenLite.to($(".hospital"), 1, {opacity:1,delay:1})); tl.add(TweenLite.to($(".jail"), 1, {opacity:1})); tl.add(TweenLite.to($(".park"), 1, {opacity:1})); tl.add(TweenLite.to($(".cafe"), 1, {opacity:1}));
-
Hey, when I zoom in it zooms to the top left. I can scroll back to where I was centered, but is there a way to change the registration point? When I zoom in to a specific spot by moving top:-x, left:-x it crops off the top left. Would a better way, than changing the registration point, be appending the bounding box? I tried a couple suggestions with adding draggable, but in all the demos it required something for only paid members. Any ideas would be greatly appreciated. Thanks!
