Search the Community
Showing results for tags 'tweenlite'.
-
Hi, I am new to particle generation animation, and I was wondering if I could use TweenLite to make the movement more fluid with eases. If I don't need TweenLite or can't use it any alternative would be appreciated. I did a few tutorials and came up with this code for a snowing animation. I think I could ease with a sin function, but I'm not sure of where to put it in my math and I would rather use the default ease in TweenLite package { import com.greensock.TweenLite; import com.greensock.easing.*; import flash.display.MovieClip; import flash.events.Event; import flash.utils.Timer; import flash.events.TimerEvent; public class Snow extends MovieClip { private var flakesVector:Vector.<MovieClip> = new Vector.<MovieClip>(); private var timer:Timer = new Timer(2000); public function Snow(speed:int = 3, flakesNumber = 150):void { for(var i:int = 0; i < flakesNumber; i++) { var flake:Snowflake = new Snowflake(); flake.vel = (Math.random() * speed) + 0.5; flake.xSpeed = Math.floor(Math.random() * (0.5 - -0.5 + 1)) + -0.5; flake.scaleX = (Math.random() * 1) + 0.3; flake.scaleY = flake.scaleX; flake.x = Math.random() * stage.stageWidth; flake.y = Math.random() * stage.stageHeight; addChild(flake); flakesVector.push(flake); } addEventListener(Event.ENTER_FRAME, fall); timer.addEventListener(TimerEvent.TIMER, changeMovement); timer.start(); } private function fall(e:Event):void { for(var i:int = 0; i < flakesVector.length; i++) { flakesVector.x += flakesVector.xSpeed; flakesVector.y += flakesVector.vel; if(flakesVector.y > stage.stageHeight) { flakesVector.x = Math.random() * stage.stageWidth; flakesVector.y = -flakesVector.height; } } } private function changeMovement(e:TimerEvent):void { for(var i:int = 0; i < flakesVector.length; i++) { flakesVector.xSpeed *= -1; } } } }
- 6 replies
-
- procedural
- animation
-
(and 2 more)
Tagged with:
-
Wondering if there's a way to get around a "popping" issue I'm seeing in CSS animations. It seem to happen when handling the animation both natively and via gsap cssplugin. I did some googling and found this post which seems to fix it in native css animation, but when i try the same technique in gsap i still see the same issue. Here's the post on stackoverflow for the native fix and here's a jsfiddle showing that it works well and finally here's a jsfiddle of the same thing via gsap. Any thoughts on why this is happening and/or how I may go about resolving it?
-
Hello everyone This might be a stupid question but i had to ask to better understand the JS API .. I know that when you include TweenLite.min.js in your page that you use the TweenLite constructor when using different methods in the API But lets say If i have TweenMax.min.js INCLUDED in my page: what is the best usage for using set() .. using the TweenLite or the TweenMax Constructor?Its been said in the forums that you can use either TweenLite or TweenMax IF TweenMax.min.js is INCLUDED in your page... so I was curious as far as performance and/or preferred usage.. which is appropriate to use if I have TweenMax.min.js included in my page? or can i use both using TweenLite: TweenLite.set(element, {x:100, y:50, opacity:0}); or using TweenMax: TweenMax.set(element, {x:100, y:50, opacity:0}); or can i use either or ??? Im sure that what Im asking can relate to other methods in the API, when i have TweenMax.min.js included in my page.. so any help will be highly appreciated thanks in advance !
-
i am trying to use GSAP in Windows 8 Applications. As I need to prepare presentations using this technology. But GSAP is not working in WinJS that effective. Only TweenMax is working. How to connect GSAP animations with the slider.
-
Why Tweenlite does'nt apply to ul:{jquery object, filled} the transformation in this case : TweenLite.set(ul, {css:{transform: 'translateY(-4000px)'}}); But this work as it should be with TweenLite: ul.css('margin-top', '-4000px'); JSfiddle description : JSfiddle I use the latest version of TweenJs. Thanks for your help.
-
having some trouble with an tweenlite animation in query. I want to switch the animation direction depending on a variable. I have a variable that represents "left" or "right". those values is set when the user drags the mouse in that direction. And i need to change my animation so it animates in the right direction depending on this variable. The animation basically flips a div. Like a card flip. Need the get the rotation value somehow dynamic. Anyone having an idea? CODE var tb = false; if (dirX == "right") { if (tb == false) { TweenLite.to($(this).find(".obj"), 1, { rotationY: -180, transformStyle: "preserve-3d", ease: Back.easeOut, onComplete: function () { TweenLite.set($(this).find(".obj"), { rotationY: -180 }); tb = true; } }); } if (tb == true) { TweenLite.to($(this).find(".obj"), 1, { rotationY: -360, transformStyle: "preserve-3d", ease: Back.easeOut, onComplete: function () { TweenLite.set($(this).find(".obj"), { rotationY: -360 }); tb = false; } }); } } if (dirX == "left") { //the opposit }
-
Hi, I have been struggeling figuring out a simple slideshow using next and previous buttons. Currently I have a slideShow container with 4 movieclips arrranged next to one another. Essentially what I would like is have the slideshow cycle through the 4 slides in the slideshow container and have a next and previous button executable at anytime, but I have no idea on how to accomplish this. This is what I have at the moment: import com.greensock.*; import com.greensock.easing.*; var timeline:TimelineLite = new TimelineLite(); timeline.append( new TweenLite(slideShow, 0.5, {x:"0"}) ); timeline.append( new TweenLite(slideShow, 0.5, {delay:2, x:"-280"})); timeline.append( new TweenLite(slideShow, 0.5, {delay:2, x:"-260"})); timeline.append( new TweenLite(slideShow, 0.5, {delay:2, x:"-260"})); Any help is highly appreciated! Thanks, Dada
-
I am trying to set up a slider that when you click the right arrow it moves the slider to the left -750px. I can get it to do it once but need it to move -750px everytime I click the arrow. In jquery .animate I can set it to -=750px and everytime I click the arrow it moves it over -750px. Is there a way I can do that with tweenlite. Here is my code.... $(document).ready(function() { $('#Rt-arrow').click(function() { TweenLite.to('#slider', 2, {x:-750}); });// end click });// end ready
-
I've been a longtime user of the AS3 version of the GreenSock animation libraries and really got a lot of mileage out of them. Now I'm moving onto the JS version. You'll excuse me if I'm just a beginner at this. I'm trying to execute a TweenLIte animation by directly clicking on an HTML image to call functions from an external JS file. But when I click, nothing happens. My HTML file. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>GSAP Test 3</title> <!--CDN link for the latest TweenMax--> <link href="css/gsap_test_01.css" rel="stylesheet" type="text/css" /> <script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script> <script src="js/gsap_test_03.js"></script> </head> <body onload="init()"> <img src="images/yeller.png" alt="Yeller" name="imgyeller" width="150" height="150" id="imgYeller" /> <p>Click the girl to make her disappear</p> </body> </html> My external JS file, gsap_test_03.js. // JavaScript Document function init() { var yeller = document.getElementById("imgYeller"); yeller.addEventListener("click", disappear, false); } function disappear() { TweenLite.to(yeller, 1, {width:20, height:20, opacity:0}); } I tested it with just a simple alert call in the second function and it seems to have worked fine. But when I add the TweenLite code, I'll click on my image, but there is no reaction. I also tried it earlier as a straight function call without the onclick and it worked great. Am I just messing up on syntax or something simple having nothing to do with TweenLIte? I've been scouring the web for hours trying to figure out what I'm doing wrong, but there is precious little useful information.
-
Hi, I'm trying to use GSAP to animate objects in a ThreeJS project, within the requestAnimationFrame loop. Obviously this loop is firing much faster than the time it takes each tween to complete. I'm getting lots of overlapping Tweens on each object and I'm trying to figure out the best way to have each Tween run and then run it's onComplete function to tween itself back properly without losing it's references. Would TimelineLite be better suited for this or is there a better approach using TweenLite? Thanks in advance! function animate() { if(animation === true ) requestAnimationFrame( animate ); TweenLite.killTweensOf(object); TweenLite.to(object, 0.5, { x: _radius * Math.cos( num ), y: _radius * Math.sin( num ), ease: Expo.easeOut, onComplete: function(_this,_x,_y) { // animate the object properties back to what they were before we started this tween }, onCompleteParams: ["{self}",object.position.x,object.position.y] }); }
- 9 replies
-
- requestanimationframe
- threejs
-
(and 1 more)
Tagged with:
-
I've been working on an AV timeline scrubber. For the most part, it's working, except after a target element is dragged, then the animation stops and will not resume. It does call the seek appropriately with the correct value in seconds. If I kill the animation and restart it each time after a drag event, the coordinates of the scrubber knob get messed up and I cannot tell where the darn thing is at or where it should be. Plus it seems to make more sense that an animation not have to be recreated every time. What am I missing here? D var knob_offset = 4; Draggable.create("#pb-scrubber-knob", { bounds: $("#pb-scrubber-bounds"), type: "x", edgeResistance: 1, onDragStart: function() { var knob = Draggable.get("#pb-scrubber-knob"); knob.update(); }, onDrag: function() { $("#pb-scrubber-fill").width( $("#pb-scrubber-knob").position().left + knob_offset ); $("#pb-elapsed-time").text( window.odeshell.formatTrackTime( window.odeshell.getTrackPosition())); }, onDragEnd: function() { $("#pb-elapsed-time").text( window.odeshell.formatTrackTime( window.odeshell.getTrackPosition()) ); window.odeshell.seekScrub(); }, onUpdate: function() { $("#pb-scrubber-fill").width( $("#pb-scrubber-knob").position().left + knob_offset ); }, }); window.odeshell.startScrub = function() { var dur = window.odeshell.getScreenDuration(); var animate_to = $("#pb-scrubber-bounds").width()-knob_offset; $("#pb-elapsed-time").text(window.odeshell.formatTrackTime(0)); if ( window.odeshell.tlScrubberKnob !== undefined ) { window.odeshell.restartScrub(); } else { window.odeshell.tlScrubberKnob = new TweenLite( "#pb-scrubber-knob", (dur/1000), { left:animate_to, immediateRender: true, ease:Linear.easeNone, onUpdate: function() { var sndpos = window.odeshell.getTrackPosition(); var dur = window.odeshell.getScreenDuration(); var kpos = $("#pb-scrubber-knob").position().left; var bounds = $('#pb-scrubber-bounds').width()- ($("#pb-scrubber-knob").width() + 8); $("#pb-elapsed-time").text( window.odeshell.formatTrackTime(sndpos)); $("#pb-scrubber-fill").width(kpos); if ( window.odeshell.playComplete() && (kpos >= bounds) ) { window.odeshell.stopScrub(); } } }); } }; window.odeshell.restartScrub = function() { if ( window.odeshell.tlScrubberKnob !== undefined ) { window.odeshell.tlScrubberKnob.restart(false, false); } }; window.odeshell.seekScrub = function() { if ( window.odeshell.tlScrubberKnob === undefined ) { return; } var kpos = $('#pb-scrubber-knob').position().left; var dur = window.odeshell.getScreenDuration(); var animate_to = $("#pb-scrubber-bounds").width()-knob_offset; var prct = kpos/animate_to; var sndpos = dur * prct; if ( sndpos < 0) { sndpos = 0; } if ( sndpos >= dur) { sndpos = dur; } var seekpos = Math.round(sndpos/1000); $("#pb-elapsed-time").text(window.odeshell.formatTrackTime(sndpos)); window.odeshell.setTrackPosition(sndpos); window.odeshell.tlScrubberKnob.seek(seekpos); if ( !window.odeshell.tlScrubberKnob.paused() ) { window.odeshell.tlScrubberKnob.play(seekpos); } }; window.odeshell.resumeScrub = function() { if ( window.odeshell.tlScrubberKnob !== undefined ) { window.odeshell.tlScrubberKnob.resume(); } }; window.odeshell.pauseScrub = function() { if ( window.odeshell.tlScrubberKnob !== undefined ) { window.odeshell.tlScrubberKnob.pause(); } }; window.odeshell.stopScrub = function() { if ( window.odeshell.tlScrubberKnob !== undefined ) { window.odeshell.tlScrubberKnob.pause(); } };
-
i have two frame to show, play aniframe, then will appear aniframe1. last time was working, but suddenly aniframe1 not working anymore. TweenMax izit not support this code anymore? TweenLite.to($(".aniframe1"), {css:{visibility:"visible"}}); Last time i was using this topic attachment file, to do revision. http://forums.greensock.com/topic/7624-animatein-animateout-example/?hl=animatein
- 2 replies
-
- animatein()
- animateout()
-
(and 3 more)
Tagged with:
-
Hello, I do not have any real internet explorer 8, just the compatibility mode of IE10 on a Windows 7. I saw on the forum that it could have some issues with the compatibility mode. Thus, I wonder if someone could confirm or not that this example below works on a real IE8 (and IE7 if possible) The problem I have is that the rotation does not work. There is strange behavior. <!DOCTYPE html><html><head> <meta charset="utf-8"><meta name="viewport" content="width=1000" /> <title>ROTATION</title> <style>body {margin: 50px;background-color: #000;font-family:Arial, Helvetica, sans-serif;}#box {position: absolute;}</style> </head> <body> <button id="rotate">rotate</button> <div id="box"><img src="http://www.snorkl.tv/images/crab.png"></div> <script src="http://codeorigin.jquery.com/jquery-1.10.2.min.js"></script> <script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.10.2/TweenMax.min.js"></script> <script> $(function() { $("#rotate").on("click", function() { TweenLite.to("#box", 0.95, { directionalRotation:'+=90_short', ease:Power3.easeOut }); }); }); </script> </body> </html> Best
-
[see "Why can't code be in <head>?" thread as the problem has been pinned down to putting the timeline in the <head> and .play() in the <body>] Been using jQuery animation and am new to GSAP. I created a TimelineLite animation on a standalone page. The page includes all the scripts and style resources used by my live website so I could check for conflicts. It ran fine -- animation was mostly opacity changes. I put the script into my test site. [uPDATE: On the test site I use a JS closure to encapsulate the TimelineLIte animation -- this seems to be the problem]. I see the text and image resources but nothing is animated until it hits the onComplete on the last line. That calls a TweenLite.to() outside the TimeLineLite to fade everything out. I stepped through the GSAP code (min version) on the test site and it seems to be running through all the steps in the animation. For instance, in TimelineLite.min.js the value of "this._totalDuration" is the total length of all the durations and delays added up. In the TweenLite.min.js code the value "e.id" takes on the values of each of my selectors as it loops around. Yet the screen shows nothing happening. I'm using this resources. <script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenLite.min.js"></script> <script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TimelineLite.min.js"></script> <script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/plugins/CSSPlugin.min.js"></script> Any tips on debugging a problem like this [closure]? Is there a line in TweenLite.min.js I can set a breakpoint on and see what is really going on?
- 1 reply
-
- tweenlite
- timelinelite
-
(and 2 more)
Tagged with:
-
Hi there I have a nav that links to slides with tweens in between. The slideshow navigation works fine by loading each slide according to it's position on the list. See the following pen http://codepen.io/mulegoat/pen/ruHhD The problem I'm having is trying to link to a certain slide from within each slide. Using the following code works on all but one "Link to page 2" link - in this case, the link within the first slide - but on my localhost its slide 5 where the link fails. I know this is more of a jquery issue but though I'd put it up here incase somebody had a better way of doing this with getElementById or something else. Many thanks for any help function initActionPlan() { $(".actionPlanLink").each(function(index, element) { $(this).on("click", gotoActionSection); }); } function gotoActionSection(e) { if(currentSectionNum != $(e.currentTarget).index()){ if(currentSection) { TweenLite.to(currentSection, 0.5, {autoAlpha:0}); } currentSection = $(".tabsContainer")[1]; TweenLite.to(currentSection, 0.2, {autoAlpha:1}); } } //OpenClose Action Plan function actionInit(){ initActionPlan(); $(".actionPlanLink")[1].click(); } actionInit();
- 5 replies
-
- jquery
- navigation
-
(and 1 more)
Tagged with:
-
Hi all! I set up a site using TweenMax 1.9.5 for any animation, and everything worked properly. Later, I updated the libraries to 1.9.7 and finally to 1.9.8. With current version, the animations don't work properly; there is a conflict with Addthis dynamically created iframes. Here is a sample code reproducing the problem with a YouTube static iframe: <!DOCTYPE html> <html> <head> <!-- 1.9.6 --> <!-- <script type="text/javascript" src="https://raw.github.com/greensock/GreenSock-JS/f91853a0e9f753c1ae8b6b36172a4d42759296af/src/uncompressed/TweenMax.js"></script>--> <!-- 1.9.7 --> <!-- <script type="text/javascript" src="https://raw.github.com/greensock/GreenSock-JS/7c36c8f249526f687e185caa599a6e39bbed15e9/src/uncompressed/TweenMax.js"></script> --> <script type="text/javascript" src="https://raw.github.com/greensock/GreenSock-JS/ab62042130fa8f6a875b92bd2532d1f39d7a18f4/src/uncompressed/TweenMax.js"></script> <!-- Still the same from february --> <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.9.8/plugins/ScrollToPlugin.min.js"></script> <style type="text/css"> body > div { background-color:green; height:5000px; } </style> </head> <body> <div></div> <iframe width="560" height="315" src="http://www.youtube.com/embed/CZF2o06mlgQ" frameborder="0" allowfullscreen></iframe> <script type="text/javascript"> setTimeout(function(){ // This is to allow the iframe being loaded TweenMax.to(window, 2, { scrollTo: { y: 2500, autoKill:false }, onComplete: function() { alert("end"); } }); },10000); </script> </body> </html> As you can see, an error is thrown in TweenMax.js, line 5700. In that location, "target" is "window" when attempting to scroll it, but window[0] (target[0]) doesn't allow the access to "nodeType" property. In particular, Firefox says "Error: Permission denied to access property 'nodeType'" and Chrome indicates a cross-domain conflict between the current page and the imported in the iframe one. I figure out that this happens because window object also contains the included frames and iframes (http://www.w3schools.com/jsref/obj_window.asp), hence target[0] isn't the "desided" window object, but only the first contained iframe. There should be a window.frames[x], but looks like that window[x] works in the same way (as well as window.length), that is an array of window objects (cross domain or not). Reverting to TweenMax version 1.9.5 (the last working I had on SVN), everything works as expected. In the reported example I also included the commented imports of previous versions, and the last which looks like working is 1.9.6. Moreover, another animation in my pages throws a similar error on native IE8, and looks like 1.9.5 doesn't do the same: I didn't investigate deeply in this, because maybe that fixing the regression will also fix the other trouble. I'll get some time to do it if U wished Thanks in advance for your precious help Massi
-
I'm trying to plug this into my custom framework before I pull the trigger on a commercial licence and I might be asking a super noob question but I have looked through a bit of the documentation and from what I can tell there is no way of manually updating a tween through a external function. bool = true; TweenLite.to(someMC, frameCount, {useFrames:true, updateOnFunction:updateTween, onComplete:tweenComplete}); public function render():void { if(bool) updateTween(); } public function tweenComplete():void { bool = false; } I'm sure I can program some roundabout way to get this to work but I am hoping I am simply blind Xp
-
Hi, Im just getting started and am excited about the prospect of a new door to flash. However, I am stumped right off the bat going through "Getting Started" for Tweenlite. I downloaded TweenLite for AS2. Created a test folder. Put the com folder inside. Created a test fla. I imported the classes as was instructed on the first frame of the timeline: import com.greensock.TweenLite; import com.greensock.*; import com.greensock.easing.*; TweenLite.to(poly_mc, 1.5, {x:100}); I created a polygon called poly_mc, and also named the instance poly_mc. I extended my timeline in the event it needed 1.5 seconds of frames to run the animation. Nothing happened. No errors either. Am I doing something wrong? I'm on Flash CS6, but wouldnt imagine it matters since it's AS libraries.
-
Hi, I would like to create a simple count-up from let's say 0 to 1000. I would also like to control about the time it takes to count up to that number and have a vertical blur effect applied, kind of like in an odometer. Is that possible in AS2? Thanks for any help, Dada
-
Is there any way I can reduce the size of TweenLite's footprint within my Flash banner? On publish, Actionscript 2.0 Classes make up 20K of my 32K banner. I'm not doing anything crazy here, just fading in/out and moving up/down. I tried using TweenNano...file size was GREAT. But I couldn't figure out how to make my banner repeat only two times, since there is no "repeat" or "restart" features like there are in TweenLite. Am I importing something that I don't need? Here's my AS2.0 TweenLite Code: // import the tween engine import com.greensock.*; import com.greensock.easing.*; ////////////////////////////////////////////////////////////////////////// // define the timeline var timeline:TimelineLite = new TimelineLite({onComplete:repeat}); // define repeat function variables var nPlays = 0; var totPlays = 2; // repeat timeline if played less than three times function repeat() { if (nPlays < totPlays) { timeline.restart(); nPlays++; } } ////////////////////////////////////////////////////////////////////////// // get your tween on timeline.appendMultiple([ TweenLite.from(text1, 1, {_alpha:0, _y:"-20", ease:Expo.easeOut, delay:.5}), TweenLite.from(text1b, 1, {_alpha:0, _y:"40", ease:Expo.easeOut, delay:.5}), TweenLite.to(text1, 1, {_alpha:0, _y:"20", ease:Expo.easeOut, delay:2.5}), TweenLite.to(bg1, 1, {_alpha:0, ease:Expo.easeOut, delay:2.5}), TweenLite.from(text2, 1, {_alpha:0, _y:"-20", ease:Expo.easeOut, delay:3}), TweenLite.to(text2, 1, {_alpha:0, _y:"20", ease:Expo.easeOut, delay:5}), TweenLite.from(text3, 1, {_alpha:0, _y:"-20", ease:Expo.easeOut, delay:5.5}), TweenLite.to(text3, 1, {_alpha:0, _y:"20", ease:Expo.easeOut, delay:7.5}), TweenLite.from(text4, 1, {_alpha:0, _y:"-20", ease:Expo.easeOut, delay:7.5}), TweenLite.from(stall, 2, {_y:"10", delay:10})]); stop(); Here's my AS2.0 TweenNano code. File size is great, but I can't figure out how to make it repeat only twice. // import the tween engine import com.greensock.*; import com.greensock.easing.*; ////////////////////////////////////////////////////////////////////////// // define repeat function variables var nPlays = 0; var totPlays = 2; // repeat timeline if played less than three times function repeat() { if (nPlays < totPlays) { //initBanner.start(); initBanner(); nPlays++; } } ////////////////////////////////////////////////////////////////////////// function initBanner({onComplete:repeat}) { //the issue is with this line TweenNano.from(text1, 1, {_alpha:0, _y:"-20", ease:Expo.easeOut, delay:.5, overwrite:0}); TweenNano.from(text1b, 1, {_alpha:0, _y:"40", ease:Expo.easeOut, delay:.5, overwrite:0}); TweenNano.to(text1, 1, {_alpha:0, _y:"20", ease:Expo.easeOut, delay:2.5, overwrite:0}); TweenNano.to(bg1, 1, {_alpha:0, ease:Expo.easeOut, delay:2.5, overwrite:0}); TweenNano.from(text2, 1, {_alpha:0, _y:"-20", ease:Expo.easeOut, delay:3, overwrite:0}); TweenNano.to(text2, 1, {_alpha:0, _y:"20", ease:Expo.easeOut, delay:5, overwrite:0}); TweenNano.from(text3, 1, {_alpha:0, _y:"-20", ease:Expo.easeOut, delay:5.5, overwrite:0}); TweenNano.to(text3, 1, {_alpha:0, _y:"20", ease:Expo.easeOut, delay:7.5, overwrite:0}); TweenNano.from(text4, 1, {_alpha:0, _y:"-20", ease:Expo.easeOut, delay:7.5, overwrite:0}); TweenNano.from(stall, 2, {_y:"10", delay:10, overwrite:0}); } initBanner(); stop();
- 4 replies
-
- file size
- optimization
- (and 5 more)
-
Hi All, apologies if this has been asked before but it's causing me a headache. I am trying to provide a tween with variables (which are _x & _y coordinates) so here is my code: if (id == 1) { TweenLite.to(newPic,0.5,{_x:xcoordinate1, _y:ycoordinate1, onComplete:showText, ease:Circ.easeOut}); } else if (id == 2) TweenLite.to(newPic,1,{_x:xcoordinate2, _y:ycoordinate2, onComplete:showText, ease:Circ.easeOut}); { Where I know _x:xcoordinate1 are numbers. My problem is that when I run this code and toggle between these two tweens the values of the variables seems to be ADDED each time so that my image is gradually being pushed off the stage rather than toggle between two positions. (If I trace out the variable after each tween they are as expected but clearly the values are being incremented) I want the movieclip newPic to just move between the two points, does this make sense? Many thanks
-
This seems like it should be a no-brainer, but I've searched the API and can't see how to kill a Tween(Max) and force it to complete. I see how to kill ALL tweens and force to complete, or child tweens of a particular object and force them to complete, but for a TweenMax I didn't see the option to force to complete. Could someone point me in the right direction? Thanks!
-
I've been making good use of TimelineMax's convenience methods: timeline.to(....), etc. As I understand it, these are syntatic sugar for timeline.add(Tweenlite.to(...)), etc Is there a way to change it so that the convenience methods would instead use TweenMax? Ran into an issue where I was trying to use 'yoyo' but wasn't working…and it's because TweenLite doesn't offer 'yoyo', I believe. I offer it as a suggestion for future releases, if it's not currently implemented.
- 2 replies
-
- as3
- timelinemax
-
(and 2 more)
Tagged with:
-
Hi, I am trying to make an animation where a wheel eases in to rotate quickly then stops really slowly for 10 seconds. So I would like it to run slowly for about the last 3 seconds. I am struggling to get this really slow ease out and was hoping someone would have some advice? I have looked at every ease class available, I have tried making my own custom ease, but it seems I just cannot physically achieve the ease out I want. I have also tried using the ThrowProps plugin but again the easing was not good enough. All I want is an ease out that causes the rotation to move really slowly for the last third of my animation. I generally use the TweenLite.to() method to start my animation. Thanks!
-
Hi there. I have a simple animation I'm trying to do using a combo of the colorTransform exposure setting on instance name: bg1_mc. Here is my code: import com.greensock.TweenLite; import com.greensock.*; import com.greensock.easing.*; import com.greensock.plugins.TweenPlugin; import com.greensock.plugins.ColorTransformPlugin; TweenPlugin.activate([ColorTransformPlugin]); TweenLite.to(bg1_mc, 1, {alpha:1, colorTransform:{exposure:1.5}}); TweenLite.to(bg1_mc, .2, {colorTransform:{exposure:1}, delay:1}); TweenLite.to(bg1_mc, .5, {x:726.95, y:0, ease:Circ.easeOut, delay:3}); The first line works if the other two are commented out - but if they are uncommented, that bg1_mc simply doesn't show up. What I'm trying to do is fade in the movieclip set the exposure a little higher, then flash it out back to a normal exposure. Then after 3 seconds slide that movie clip off the stage. What am I doing wrong? (the instance is orig at x:0 y:0 on the stage btw) Thanks!
- 7 replies
-
- colortransform
- tweenplugin
-
(and 1 more)
Tagged with: