Jump to content

Search In
  • More options...
Find results that contain...
Find results in...

Search the Community

Showing results for tags 'tweenlite'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


  • GreenSock Forums
    • GSAP
    • Banner Animation
    • Jobs & Freelance
  • Flash / ActionScript Archive
    • GSAP (Flash)
    • Loading (Flash)
    • TransformManager (Flash)

Product Groups

  • Club GreenSock
  • TransformManager

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start





Website URL







  1. Hey everyone so I know that tweenMax has a onComplete function but I was wondering is there anyway that I can setup a tweenMax or tweenLite function to only run 30 intervals of my stages frames per second then once finished call on the onComplete function? I have a movie clip object that is added to the stage every 0.8 seconds and what i wanted to do was when my character picks up a powerup I wanted to have the movie clip object added to the stage every 0.1 seconds but only for a couple intervals or like say 5 seconds then I wanted to put it back to its original time. Is there anything that the tween engine offers to call on a onComplete function for this?
  2. Greetings everyone! Thank you for taking the time to read my question. I am using TweenLite and TimelineLite to create an animation timeline that simulates a user navigating a set of "sections". When the user clicks a button, I create a tween that animates a percent value over the course of 0.3 seconds. On "update" of this tween, the "progress" of my timeline is set using TimelineLite.progress(x). My issue is that if one of the sections is tweened for another reason to a different position on screen, when the timeline is progressed, the section immediately snaps back to where the timeline wants it, based on the original creation. What I would like is that the position of the section would tween from it's new, updated position, to the endpoint defined in the timeline. Is this possible? Here is some pseudo-code that should help illustrate my question. var percentObj = { current: 0 }; var myTimeline = new TimelineLite(); // ---------- // Set starting positions myTimeline.add( TweenLite.set($('#section1'), { 'css': { 'y': 0 } }), TweenLite.set($('#section2'), { 'css': { 'y': 1000 } }), TweenLite.set($('#section3'), { 'css': { 'y': 1000 } }) ); // ---------- // Now that starting values are set, // pause the timeline myTimeline.pause(); // ---------- // Create future animations that // will be triggered by the user // Animate to section2 myTimeline.add( TweenLite.to($('#section2', 1, { 'css': { 'y': 0 }, 'ease': 'Power1.easeInOut' }) ); // Animate to section3 myTimeline.add( TweenLite.to($('#section3', 1, { 'css': { 'y': 0 }, 'ease': 'Power1.easeInOut' }) ); // ==================== function buttonClick() { TweenLite.to(percentObj, 0.3, { 'current': 0.5, 'onUpdate': updateProgress } } function updateProgress() { myTimeline.progress(percentObj.current); }
  3. Hi I am theme developer in ThemeForest and I use GSAP for my theme, more exactly I use TweenMax because of advanced functionality it offers, however the problem is that when user purchase my theme, they include some sort of plugins, which in this case one of them uses TweenLite library, so its conflict error and GreenSock gives me this error: http://cl.ly/ZTax So, what is the best solution in this case, I must use TweenMax, while other plugins may include or not TweenLite as well. Thank you very much
  4. Hi, I'm struggling to get a basicTweenLight example to work in FlashBuilder. Below is a photo of my code. Notice that I have the 'com' folder in the project folder. Notice the errors I'm getting. Any advice would be appreciated.
  5. mlovett

    Ease on Play

    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
  6. 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
  7. 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
  8. 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
  9. 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
  10. 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
  11. 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!
  12. 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; } } }
  13. 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(); } });
  14. 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!
  15. 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.
  16. 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.
  17. 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?
  18. 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...
  19. 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
  20. 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?
  21. 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.
  22. 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?
  23. 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.
  24. 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
  25. 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]