Search the Community

Hello all! So I have button that plays a timeline when it's mousedown and then stops when mouse up, but I want it to ease into the play every time the button held down, so it doesn't feel so linear. I haven't really used TweenLite very much, and I have the TweenMax script in my document. So far my code looks like this: var omni = sym.getSymbol("omnibed_side"); var pos = omni.getPosition(); if (pos < '3000') { omni.play(); } else { omni.stop(); } I was thinking it'd go inside the "if" statement. Any help would be greatly appreciated! -mlovett

Hi, I'm new in gsap and need a little help. I have an animation that triggers on each scroll event and sometimes the animation stutters badly. The fps meter shows values from 9 to 55. (I'm trying to animate divs with png background). Rough version of my code: var scrollPosition = 0, lastScrollTop = 0; $(window).scroll(function(){ scrollPosition = $myWindow.scrollTop(); if (scrollPosition > lastScrollTop){ // --- scroll down TweenLite.to($('.boxes'), 2.5, {top: "+=50px", force3D:true, ease:Quad.easeInOut}, 0.25); } else { // --- scroll up TweenLite.to($('.boxes'), 2.5, {top: "-=50px", force3D:true, ease:Quad.easeInOut}, 0.25); } // --- update last scroll lastScrollTop = scrollPosition; }); Is there something that I could optimize, must I use timelines etc.? Any help would be greatly appreciated p.s. sorry for my bad English

Hi, Working on some banner ads, where filesize is important, I was wondering if it is possible to use the yoyo effect without loading TweenMax.min.js . At the moment it's the only effect I'm using TweenMax for, but it's an extra 76 kb if I'm not mistaking. I included a codepen demo where I built the yoyo effect as a TweenLite sequence, but it's not very beautiful to copy paste this every time I want a similar effect. Been looking around at the forum, but can't really find a solution (Using the CDN links is of course an option, I know). Thanks in advance, Wouter

Hi there, I have a feeling this is a really stupid question simply because it feels like it should be so easy, yet I can't find a solution online that will work for me. I have a Sprite that I want to tween the rotation using the "shortRotation" plugin. Everything is generally ok, except that: 1) The rotation is occurring around the top left point of the Sprite rather than the centre. I had read that the default transformation point is the centre, but then I saw a post that suggested this may have changed? 2) I've tried specifying the transformOrigin using two methods I found online - neither of which work. This is my basic call: [public var _secondHand:Sprite = new Sprite();] TweenLite.to( _secondHand, 1, {shortRotation:{rotation: _secondsDeg } } ); I read that one could specify the origin as a parameter: TweenLite.to( _secondHand, 1, {shortRotation:{ rotation: _secondsDeg }, transformOrigin:"50% 50%" }); This results in a runtime error as transformOrigin isn't a property of Sprite... Should I not be using Sprite?? I also read that you can set a property value on an object using TweenLite.set( ... ). I tried this too but it also fails at runtime. I've also seen references to another plugin "transformAroundCenter" (and AroundPoint) but I don't have Club membership so I don't have these plugins. Have these plugins replaced support for transformOrigin? Please help! I really like TweenLite so I'm hopeful I can get this to work! Cheers, Oliver

I have a point drawn in an canvas (html5). Then I want this point to animate in a circular path. I saw an example using time differences to set the x and y variables, in respect to time. Some of the variables and formulas used are quite vague, I have forgotten my physics, d*mn. But I have researched quite a bit on circular motion, so I can understand some of it. Here is my [codepen][1] on how it was done. Basically here are the parts I have identified so far: this.orbit = 100; // this is the radius of the circular orbit this.radius = 5; // orbiting object's radius this.velocity = 50; // yeah velocity but without direction, should be speed (agree?) var angle = 0; starting angle of the point in the orbit inside the canvas's quadrant, set `x` and `y` coordinates with respect to the coordinates of the canvas first get the center of the canvas by dividing the width and the height by 2 then adding to the product of the orbit's radius and the position of `x` and `y` with respect to the initial position in the orbit(angle), and since Math trigonometric functions uses radians, we should multiply it to the quotient of `PI` and `180`. this.x = _width / 2 + this.orbit * Math.cos(angle * Math.PI / 180) this.y = _height / 2 + this.orbit * Math.sin(angle * Math.PI / 180) by doing the above, we now get the initial position of x and y in the orbit. What is quite trivial to me are the next variables `_dx` and `_dy` and also the `_magnitude`. var _dx = this.x - _width / 2; var _dy = this.y - _height / 2; var _magnitude = Math.sqrt( _dx * _dx + _dy * _dy); Here is how the point is animated: Point.prototype.update = function(dt) { var dps = this.orbit * 2 * Math.PI / this.velocity; var angle = (360 / dps) * dt / 1000 * -1; this.vx = this.vx * Math.cos(angle * Math.PI / 180) - this.vy*Math.sin(angle * Math.PI / 180); this.vy = this.vx * Math.sin(angle * Math.PI / 180) + this.vy*Math.cos(angle * Math.PI / 180); var _magnitude = Math.sqrt( this.vx * this.vx + this.vy * this.vy); this.vx = this.vx / _magnitude * this.velocity; this.vy = this.vy / _magnitude * this.velocity; this.x += this.vx * dt / 1000; this.y += this.vy * dt / 1000; } And here is the execution of the script: function animate () { dt = new Date() - ldt; if (dt < 500) { // context.clearRect(0, 0, canvas.width, canvas.height); point.update(dt); point.draw(context); }; ldt = new Date(); setTimeout(function() { window.requestAnimationFrame(animate); }, 1000 / 30)} dt = new Date(); animate(); } With the unclear variables, like `_dx _dy _magnitude` I cannot understand how it works and how the computation of variables, `vx vy` which I assume the velocity with respect to x and y respectively. I wanted to use greensock tweenlite for the animation and it is done like so: Point.prototype.update = function(p){ var _to = { x: , // change the value of x y: , // change the value of y ease: Cubic.easeInOut, onComplete: function () { this.update(p) } } TweenLite.to(point, 2, _to) } As you can see the first parameter is the current object (point), then the second parameter is the time, I assume this to be the velocity and the the third parameter is the change in the object's properties, x and y. During the time of the writing I realized what are the variables `_dx` and `_dy`, they are the differences or change in the position of x and y

Hello, I'm sorry if this question is being discussed already, i couldn't find anything in the documentation or the forum. Basically i have a button with which I'm triggering a background-position animation on a DOM element with lets say 240px. Everything is working fine there. The problem is if i click the trigger button while the animation is active, its start again and the background is moved 240+ pxls, depends how quickly I have clicked the second time. Is it possible to ignore clicks on the trigger while animation is running ? I've tried the following with no luck: var tl = TweenLite.to(element, 0.5, {backgroundPosition: newPosition + "px 0px", ease: Cubic.easeInOut}); if(tl.isActive()){ return false; } Thanks in advance! M. Gorchev

I'm trying to create a line of text that slowly fades into view from left to right (or top to bottom, whatever). I see the very simple process of fading the entire text field in or out, but is there a way to fade vertically or horizontally? Thanks!

The code is below. When Tweenlite is called it treats "tileList[count1]" as a string instead of a variable name. However the trace seems to return what I would expect (tile1, tile2, tile3...). If I remove "tileList[count1]" from the tween and replace it with a direct call to the MovieClip (tile1, tile2, etc) the code works perfectly... Things I've tried: Using a vector instead of an array. Setting tileList[count1] to a public and local variable and then calling that variable. Removing the randomSort. Removing count1 and calling the array element directly (ie, tileList[5]). public class wtpMain extends MovieClip { public var tileList:Array = new Array(tile1,tile2,tile3,tile4,tile5,tile6,tile7,tile8,tile9,tile10,tile11,tile12,tile13,tile14,tile15 ,tile16); public var count1:int = 0; public function wtpMain() { nextButton.buttonMode = true; nextDis.mouseEnabled=false; nextButton.addEventListener(MouseEvent.CLICK, nextButtonClickh); tileList.sort(randomSort); } public function nextButtonClickh(event:MouseEvent):void { nextButtonClick(); } public function nextButtonClick():void{ TweenLite.to(tileList[count1], 5, {y:700, alpha:0}); trace(tileList[count1]); count1++; } public function randomSort(objA:Object, objB:Object):int{ return Math.round(Math.random() * 2) - 1; } } }

I am trying to achieve something like this http://www.puma.com/mobium/ Where it only animate when you scroll. I figured it uses mousewheel jquery and tweenlite. I managed to make the animation play on scroll, but I am having problems trying to make the animation play backwards. I am using this line of code to make the animation: TweenLite.to('#animation', 2, {backgroundPosition: '-'+(frameWidth*numCols)+'px 0px', ease:steppedEase}); Also, how do I make the animation actually play a number of frames on one scroll, rather than playing the whole animation on one scroll. EDIT: I managed to make it play backward by using timelineLite instead of tweenlite. But I am still having problems with trying to have a better control of the animation. $("#animationwrap").mousewheel(function(objEvent, intDelta){ if (intDelta < 0){ tl.to('#animation', 2, {backgroundPosition: '-'+(frameWidth*numCols)+'px 0px', ease:steppedEase}); } else if (intDelta > 0){ tl.reverse(); } });

Hi! Thank you bringing us GSAP and providing such a great support. We are struggling a little with making the overwrite options work the way we understood in the documentation they should work. We are designers and not professional programmers. These are the lines of code we're using to test it: TweenLite.to( basePath.position, 1, { y: "-=250", delay: 0, overwrite: 0, onOverwrite: reTween } ); TweenLite.to( basePath.position, 2, { y: "+=250", delay: 0.5, overwrite: 0, onOverwrite: reTween } ); We don't seem to be able to prevent the second tween from overwriting the first one half way of it. What are we missing or doing wrong? Thank you!

I am trying to rotate an element(button) counter-clockwise 90deg using TweenLite. It is working fine in chrome and firefox but misbehaving in IE9. Expected behavior is that it only rotate but in IE9 along with rotation it is changing is position also. This behavior is consistent in IE9 and is produced only in special case, with simple rotation test in IE9 the behavior is as expected. Here is a video for reference (notice the button labeled button 17): http://screencast.com/t/waaEX1NxWcTd The HTML of button looks something like: <div data-id="animWrapper_spin9ivgo7os" style="height: 11.2%; width: 8.65979381443299%; position: absolute; top: 17.6%; left: 67.5257731958763%; z-index: 8; -webkit-perspective: 400; -webkit-backface-visibility: visible; -webkit-transform-style: preserve-3d; display: block;"> <button checked="checked" tagname="BUTTON" src="" srcsize="0" srcduration="" srcformat="" domstyle="[object Object]" name="button 17" class="button adelem" data-id="9ivg" adtype="button" style="width: 100%; height: 100%; left: 0px; top: 0px; z-index: 8; -webkit-perspective: 400; -webkit-backface-visibility: hidden; -webkit-transform-style: preserve-3d;">button 17</button> </div> The rotation is applied to the div wrapping the button [data-id=animWrapper_spin9ivgo7os], which is inside another iframe. I am unable to reproduce the error in simple page. Please help me if someone know what could have been the reason.

I am hopeful that someone might be able to offer a suggestion or two about how I might work around an issue that I'm experiencing. I've implemented TweenLite carousel on one of the pages for our corporate website 2 years ago. Everything works perfectly until I've tested it in IE 10. IE 8 and 9 are completely fine. Does anyone know what might happened. I was trying to link to the latest TweenLite.min.js file - didnt help. Any suggestions? Thank you.

I've been working on learning GSAP in anticipation of doing some banners. The basic idea is to hide all text boxes, then sequentially Tween their opacity and position with some Easing effects. Here's a small example: <div style="width:750px; height:90px"> <div class="box" id="first"><p>some text here</p> </div> <div class="box" id="second"><p>some text here</p> </div> <div class="box" id="third"><p>some text here</p> </div> The CSS2 method of hiding elements was either: .box { display:none: } or .box { visibility:hidden; } For CSS3 (and GSAP), I've found that I have to use (the second line being for IE8 browsers): .box { opacity:0; filter: Alpha(opacity=0); } And then just tween away to make them visible. But it occurs to me that there must be a "standard" way of hiding text box elements in order to animate them into position from their initial -invisible - starting positions. Would the best method be to just set overflow to hidden, and then position the "idle" boxes outside of the containing div, i.e. : .box { overflow:hidden; position:absolute; top:-200px; } In short, how are elements initially positioned "off the stage" so that they can be Tweened into position and displayed?

Hi folks, I've been googling this to death and can't figure out why I can't set the Z position of these divs using TweenLite (which is writing translateZ transforms, so presumably that way, either). Any help, taking a look at the plnkr here? http://plnkr.co/edit/OKIzzKlNv7yJVVHlraCR See the _setLayoutTargets function and _moveEm function...

I'm trying to make some animations based on mouse location and scroll ~ but the Tweenlite *Autoplays* (aka finishes the animation instead of staying on that frame). So how do I make Tweenlite static so I can manually change frames it via Tweenlite.progress() ? I am having a little trouble finding it in the documentation. Thanks, Daniel ..... I posted the local file .... *Facepalm* but I cant edit it

In the example codepen I have two divs overlapping each other. During the tweenLite activity the first div fades out and at the end needs to fade back in. It appears that it's opacity seems to remain at 0. In otherwords, the div with the button should reappear. Does anyone have a solution?

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?

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.