Jump to content

Search the Community

Showing results for tags 'tween'.

  • 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. I'm using LoaderMax to parse an XML file and load images and information for a document library, I've got the images being loaded in and added to movieclips but am having issues working with them now they are on stage. Basically I have an array of thumbnails and an array of Images, what I want to happen is when a thumbnail is clicked the full-size image tweens into place. I'm currently using the bog standard flash tweens rather than tweenlite, which might be the issue? Heres my import code. function completeHandler(event:LoaderEvent):void { // Set vars // var mcthumb:Array = new Array; // var mcImg:MovieClip = new MovieClip(); // Grab thumbnails var loadedThumbs = event.target.getChildren()[0].getChildren(); var noThumbs:uint = loadedThumbs.length; // Display Thumbs for (i = 0; i < noThumbs; i++){ loadedThumbs[i].content.name = i; loadedThumbs[i].content.x = 210*i; mc2.addChild(loadedThumbs[i].content); } // trace(loadedThumbs); // Grab images var loadedImg = event.target.getChildren()[1].getChildren(); var noImages:uint = loadedImg.length; // Display images for (j = 0; j < noImages; j++){ loadedImg[j].content.name = j; bigDocWrap.addChild(loadedImg[j].content); } } And this is a edited version of the code I'm using to handle the tweens function callFull(event:MouseEvent):void { var clicked:MovielClip = MovielClip(event.target); //This is the problem line if (isUp == true) { // Do some stuff fadeOut.addEventListener(TweenEvent.MOTION_FINISH, end); function end(event:TweenEvent) { // Some more stuff // Animate large image in mcDocIn = new Tween (clicked, "y", Strong.easeOut, clicked.y, -650, 1, true); } } } And here is the error message Type Coercion failed: cannot convert com.greensock.loading.display::ContentDisplay@39bc1241 to flash.display.MovieClip.at MethodInfo-312() I'm probably missing something elementary, do I need to convert my loaded content to a movieclip in order to be able to get it tweening.
  2. Greetings, I have been at this for a couple of hours now to no avail. I am trying to append some tweens to a timeline and use negative delays to offset them (they are the same animation otherwise). My problem is that the timeline is waiting each to finish before restarting, which is what I do not want Here's a link to what I have so far http://codepen.io/Zeaklous/pen/sGbku and my code: var timeline = new TimelineMax({repeat:-1}), electrons = document.querySelectorAll('.electron'), paths = document.querySelectorAll('.path'), atom = document.querySelectorAll('#atom'), startDuration = 2; for(var i = 0; i < electrons.length; i++) { var myDelay = -(i * 0.5); orbit(electrons[i], paths[i], myDelay); } function orbit(electron, path, delay) { var e = TweenLite.to(electron, startDuration, {rotationY:'-360', ease:Linear.easeNone, onComplete: function(){ //e.restart(); }, delay:delay }); //timeline.append(e); var p = TweenLite.to(path, startDuration, {rotationZ:'360', ease:Linear.easeNone, onComplete: function(){ //p.restart(); }, delay:delay }); //timeline.append(p); // The following line doesn't seem to add a negative offset... timeline.insertMultiple([e, p], 0, TweenAlign.START, -0.5); } atom.onmouseover = function() { timeline.timeScale(.2); } function TweenAlign() { } If you look at the demo it runs correctly the first iteration (before it's added to the timeline) but fails the next times Can you guys help me get this looking the way I'd like it to? Thanks
  3. Trying to tween a swf loader var queue:LoaderMax = new LoaderMax({name:"mainQueue",onProgress:progressHandler,oncomplete:completeHandler,onError:errorHandler,maxConnections:5}); queue.append( new SWFLoader("shoeHorn.swf", {name:"start", estimatedBytes:1363148.8, container:this, autoPlay:true,visible:false,onComplete:completeHandler}) ); queue.append( new SWFLoader("yourvids.swf", {name:"yv", estimatedBytes:1080, container:this, autoPlay:false,visible:false}) ); queue.append( new SWFLoader("book_Luanch.swf", {name:"bookl", estimatedBytes:10670, container:this, autoPlay:false,visible:false,x:0,y:0,width:1000,height:600}) ); LoaderMax.prioritize("shoeHorn.swf"); queue.load(); function progressHandler(event:LoaderEvent):void { trace("progress: " + event.target.progress); } function errorHandler(event:LoaderEvent):void { trace("error occured with " + event.target + ": " + event.text); } function completeHandler(event:LoaderEvent):void { TweenLite.from(event.target.content, 0, {x:0,y:0,autoAlpha:1}) setChildIndex(Object(root).spauseBtn,numChildren - 1); TweenLite.to(splayBtn, 1, {autoAlpha:1 }); TweenLite.to(Object(root).fullScreenBtn, 2, {autoAlpha:1}) trace("it worked!"); } function bookon():void { TweenLite.to(bookl.content, 1, {autoAlpha:1}); }
  4. If I have a set number of coordinates, say a user draws an s-curve with their mouse/finger, what would be the best way to tween an object along the same path? I can loop a bunch to TweenTo calls but I'm wondering if there is a better way? A plugin maybe that helps with this? Thanks for any suggestions.
  5. Spiderian

    .load problems

    Quick question. If I use the .load to change the content of a div, after it loads I want to have things animate on it, how can I get around "cannot tween null object" error? I know the elements don't exist yet, but I am having trouble figuring where to put the $(document).ready function. function animate_focalTag(event){ focalTag.animate_focalTag(), $("#content").load("focalPoints.html"), $(document).ready(function(){ var pTab = document.getElementById('pTab'); var vTab = document.getElementById('vTab'); var aTab = document.getElementById('aTab'); TweenLite.to(pTab, 1, {left:0, delay:5}); }); } I tried putting it at the end of the html I load, but then I get weird errors from jquery.
  6. hi, I want to Tween multiple divs, for example, Content1 : I want to come image from top Content2 : When I click on content 1 image, then Content1 Div should disapear and content2 Come from bottom. Please help me with this, Thanks
  7. I am using The SuperScrollorama plugin, and used the "simple-demo" included with the plug-in (which works fine..) as a template in which I want to fade the given elements. Something identical to the "design process" section of this website www.comradeweb.com if you scroll about halfway down, you will see a cool timeline they have built outlining their design process. Like I said, I used the SimpleDemo included with SuperScrollorama which does work for me has a template for my fading tweens. However when I test my version my images fail to show up, although the images are their which I can tell by the scroll bar being scrollable but just being hidden and not becoming visible on the scroll event. I am very new to this, so its probably something basic. Any help is greatly appreciated, thanks in advance! Here is the SimpleDemo, which I have based mine of off... (this one works) <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>SUPERSCROLLORAMA - Simple Demo #1</title> <link href='http://fonts.googleapis.com/css?family=Luckiest+Guy' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="css/normalize.css" type="text/css"> <link rel="stylesheet" href="css/style.css" type="text/css"> <style type="text/css"> #examples-1 { position: relative; } body { background-color: #272827; } #fade-it { position: absolute; left: 260px; top: 33px; } #1fade-it { position: absolute; left: 44px; top: 180px; } #2fade-it { position: absolute; left: 295px; top: 415px; } </style> </head> <body class="simple-demo"> <div id="content-wrapper"> <div id="examples-1"> <img alt="img1" id="fade-it" src="img1.png" width="639" height="249" /> <img alt="img2" id="1fade-it" src="img2.png" width="733" height="313" /> <img src="img3.png" id="2fade-it"> </div> </div> <script type="text/javascript" src="js/TweenMax.min.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script>window.jQuery || document.write('<script src="/js/jquery-1.9.1.min.js"><\/script>')</script> <script src="js/jquery.superscrollorama.js"></script> <script> $(document).ready(function() { var controller = $.superscrollorama(); // individual element tween examples controller.addTween('#fade-it', TweenMax.from( $('#fade-it'), .5, {css:{opacity: 0}})); controller.addTween('#fade-it', TweenMax.from( $('#1fade-it'), .5, {css:{opacity: 0}})); controller.addTween('#fade-it', TweenMax.from( $('#2fade-it'), .5, {css:{opacity: 0}})); }); </script> </body></html> And here is my Code, which does not work, <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>SUPERSCROLLORAMA - Simple Demo #2</title> <link href='http://fonts.googleapis.com/css?family=Luckiest+Guy' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="css/normalize.css" type="text/css"> <link rel="stylesheet" href="css/style.css" type="text/css"> <style> body { background-color:#000; } #examples-1 { position: relative; } #fade-it { position: absolute; left: 260px; top: 33px; } #img2 { position: absolute; left: 44px; top: 180px; } #img3 { position: absolute; left: 295px; top: 415px; } #img4 { position: absolute; left: 235px; top: 638px; } #img5 { position: absolute; left: 527px; top: 1029px; } #img6 { position: absolute; left: 127px; top: 1190px; } #img7 { position: absolute; left: 476px; top: 1384px; } #img8 { position: absolute; left: 105px; top: 1651px; } #img9 { position: absolute; left: 133px; top: 1860px; } #img10 { position: absolute; left: 430px; top: 2096px; } #img11 { position: absolute; left: 222px; top: 2143px; } #img12 { position: absolute; left: 469px; top: 2419px; } #img13 { position: absolute; left: -2px; top: 2496px; } #img14 { position: absolute; left: 152px; top: 2716px; } #img15 { position: absolute; left: 20px; top: 3026px; } #img16 { position: absolute; left: 447px; top: 3051px; } #img17 { position: absolute; left: 315px; top: 3363px; } #img18 { position: absolute; left: 279px; top: 3539px; } #img19 { position: absolute; left: 97px; top: 3621px; } #img20 { position: absolute; left: -7px; top: 3906px; } </style> </head> <body class="simple-demo"> <div id="content-wrapper"> <div id="examples-1"> <img alt="img1" id="fade-it" src="img1.png" width="639" height="249" /> <img alt="img3" id="img3" src="img3.png" /> <img alt="img4" id="img4" src=img4.png width="544" height="426" /> <img alt="img7" id="img7" src="img7.png" width="528" height="425" /> <img alt="img2" id="img2" src="img2.png" width="733" height="313" /> <img alt="img5" id="img5" src="img5.png" width="420" height="256" /> <img alt="img6" id="img6" src="img6.png" width="565" height="442" /> <img alt="img8" id="img8" src="img8.png" width="733" height="238" /> <img alt="img9" id="img9" src="img9.png" width="563" height="229" /> <img alt="img10" id="img10" src="img10.png" width="412" height="71" /> <img alt="img11" id="img11" src="img11.png" width="452" height="388" /> <img alt="img12" id="img12" src="img12.png" width="371" height="210" /> <img alt="img13" id="img13" src="img13.png" width="984" height="336" /> <img alt="img14" id="img14" src="img14.png" width="791" height="342" /> <img alt="img15" id="img15" src="img15.png" width="652" height="227" /> <img alt="img16" id="img16" src="img16.png" width="475" height="374" /> <img alt="img17" id="img17" src="img17.png" width="361" height="187" /> <img alt="img18" id="img18" src="img18.png" width="457" height="87" /> <img alt="img19" id="img19" src="img19.png" width="779" height="275" /> <img alt="img20" id="img20" src="img20.png" width="1139" height="332" /> </div> </div> <script type="text/javascript" src="js/TweenMax.min.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script>window.jQuery || document.write('<script src="/js/jquery-1.9.1.min.js"><\/script>')</script> <script src="js/jquery.superscrollorama.js"></script> <script> $(document).ready(function() { // This example adds a duration to the tweens so they are synced to the scroll position var controller = $.superscrollorama(); // amount of scrolling over which the tween takes place (in pixels) var scrollDuration = 200; // individual element tween examples controller.addTween('#fade-it', TweenMax.from( $('#img1'), .5, {css:{opacity: 0}}), scrollDuration); controller.addTween('#fade-it', TweenMax.from( $('#img2'), .5, {css:{opacity: 0}}), scrollDuration); controller.addTween('#fade-it', TweenMax.from( $('#img3'), .5, {css:{opacity: 0}}), scrollDuration); controller.addTween('#fade-it', TweenMax.from( $('#img4'), .5, {css:{opacity: 0}}), scrollDuration); }); </script> </body> </html>
  8. <!DOCTYPE html> <html> <head> <title>tween-test</title> <meta charset="utf-8" content="text/html"> <script src="js/video.js" type="text/javascript"></script> <script src="js/TweenMax.js" type="text/javascript"></script> <script src="js/jquery.gsap.js" type="text/javascript"></script> <script src="js/CSSPlugin.js" type="text/javascript"></script> </head> <body> <style type="text/css"> body { background-image:url('images/bg_main.jpg'); } </style> <p> <span id="test-1">C</span> <span id="test-2">O</span> <span id="test-3">T</span> <span id="test-4">Y</span> </p> <script type="text/javascript"> $(function(){ var testing; testing = $("#test-1"); TweenMax.from(testing, 4,{css:{ top:"-300px" }}); }); </script> </body> </html> I am VERY new, so it is probably something really basic, but I can not figure it out for the life of me. Thanks in advance.
  9. Hi guys, Does anyone know how to creat the equivalent of this TWEEN function using Greensock? new TWEEN.Tween({ val: 0 }) .to({ val: 1 }, 500) .easing(TWEEN.Easing.Circular.InOut) .onUpdate(function () { // some logic here }) .onComplete(function () { // some logic here }).start(); Thank you.
  10. jlo

    Responsive Animations

    Hi Greensock guys, Know this topic has been covered a little in some other posts, was reading about using media queries and 'resize' functions here and here, but I wanted to double-check something with you in regards to responsive animations. I've just put together a quick landing page for my portfolio, found here (and big thanks to the GS guys for helping me nut out questions I had along the way with it), and I'm using an if/else statement after the $(document).ready to fire differently scaled animations depending on the browser width. I had put in a window resize event handler in my script but I noticed it was screwing with the animations, they would still be stuck on a particular width's animation even though it had resized. Plus, I was essentially just repeating the same code all over again to get it to work, was thinking there must be a better way to call responsive animations than this. So I'm guessing to make these kinds of responsive animations work we'd need to kill the currently running ones first right? And is there a better/cleaner way of doing this than just repeating functions over when a browser resizes, say for instance if I just made the if/else media queries a function of their own, then recalled that function when a resize fired? Apologies if this is actually simpler than I've figured, I just wanted to clarify this in case any other devs needed a simplified answer to this too, am finding myself having to do a lot of these responsive animations lately and I thought it would be wise to get a more definitive approach to it Thanks as always guys.
  11. Hey All, I'm pretty new to these tools, only been working with them for about a week and I'm VERY impressed -- Great work! I'm using the tools to assist me in building a mobile app and they are performing delightfully with phonegap on both iOS and Android devices. Kudos. I am wondering if there's an easy (or at least highly performant) way in which to cause a "Draggable" item (in my situation, basically a div/box on the screen) to change it's opacity/alpha based upon how far away it gets from the "bounds" it's located within? Basically, I want the user to be aware that moving the box a certain amount will dismiss it and remove it by fading the box out more and more as it moves away (and I'd want to fade it back in if it returns), but I haven't found a great way to do this yet. Any help/thoughts would be greatly appreciated -- Thank you! -Flinn
  12. I'm using TimelineMax to create an animation. I add tweens to it with, for example, the to-method. I know it's possible to set a label to a tween on the same line as adding it to the timeline like this: tlMain.to(sky, 2, { alpha: 1}, 'skyIn') ...and how to timeoffset a tween in the timeline by using [label]+=[value] or [label]-=[value]: tlMain // MOVE IN SKY + SNOW 0 .to(sky, 2, { alpha: 1}, 'skyIn') // fade-in sky .to(snow[0], 2, { alpha: 1}, 'skyIn+=0.5'); // fade-in snow 0.5 seconds after moving in the sky But what I would like to archive is: - add tween W with label A - add tween X with a timeline offset to label A - add tween Y with a timeline offset to the last added tween (tween X) ánd setting a new label for this tween ('Label B') - add tween Z wich starts at exactly the same time as tween Y, so the timeline position is 'label B' So I would like to add a tween to the timeline, add a NEW label this new tween and set a timelineoffset to this new added tween at the same time. So no offset to the given label, but an offset to the last tween, while giving it a new label at the same time. I tried a lot and looked for it in the docs and videos (like http://www.greensock.com/sequence-video/) but can't find a solution to this. Hopefuly you understand my question Is this possible?
  13. Hi - I'm working on a new project to ramp up my AS3 skills. One thing I have is a MC with a dynamic text filed within. The text field has html copy along with styles provided via external CSS. The MC scrolls, then once it hits the onComplete there's a slight delay, autoAlpha:0 then another onComplete to fade it back in / reposition at 0,0. Everything works fine, however the copy, once the animation is reset has major aliasing issues. The image will show the before and after: when I kill the alpha and just have a normal scroll it looks fine. Frankly I'm baffled as to why the copy went coo coo for cocoa puffs - any help, advice or guidance would be appreciated! Not sure if this is a common bug or not. Thanks!
  14. I'm not sure how to concatenate a percentage value into a GSAP tween. buttonBritney.addEventListener("click", function() { callSlideIndex = 0; var leftPercentage = (callSlideIndex - currentSlideIndex) * 100; TweenLite.to(slideContainer, 2, {left:"\"" + leftPercentage + "%" + "\""}); currentSlideIndex = 0; }, false); So far, this doesn't work. Maybe there's something in the syntax I'm doing wrong? I realize that we cannot use absolute percentage values, but we can use relative percentages. So I'm trying to calculate a percentage mathematically before entering into the tween function. But I assume there should be quotes added that need to be escaped with a percentage symbol just before the ending quote. But this doesn't seem to have any effect. Your help is appreciated. LONGER, DETAILED EXPLANATION FOR CONTEXT I have a webpage with an image that must fill up the full width of the window. But, there are five more images off-screen that need to be called by a series of buttons along the bottom. Each button calls up a different image and that image should slide into place, taking up the full width of the viewport. I managed to do this by placing the six slides inside a slide container set to 600% the width of a div that is itself 100% of the browser window. Let's call that the slide viewport. It's big enough to just show one slide at a time. In the CSS, I set the slide viewport to overflow=hidden. By setting the left value to a multiple of 100%, I can shift the slide container so that a single slide fits right inside the viewport. Left: -100% shows the second slide, left:-200% shows the third slide, and so on. But I can't specify TweenLite.to(slideContainer, 2, {left:-100%}); because that's not permitted. But depending on which slide is currently showing and which one is next being called, I need an absolute percentage value, not a relative one. Thus, I came up with a formula that figures out a percentage value by assigning index numbers to each slide and then plugging that value into the tween. But it doesn't seem to work. I suspect it's a syntax problem, but I'm not sure how GSAP concatenates relative values, especially if it's a calculated percentage value. For context, here's the HTML/CSS ... DOCTYPE ... <title>GSAP test</title> <script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script> <script src="js/gsap_test_07.js"></script> <style type="text/css"> body { background-color: #000; margin: 0px; padding: 0px; width: 100%; } #slideviewport { margin: 0px; padding: 0px; width: 100%; overflow: hidden; } #slidecontainer { width: 600%; position: relative; } .slideimage { width: 16.65%; float: left; } #nav { width: 100%; } #nav img { width: 16.65%; cursor: pointer; } </style> </head> <body> <div id="slideviewport"> <div id="slidecontainer"> ... six slide images ... <!--ends div#slidecontainer --></div> <!--ends div#slideviewport --></div> <div id="nav"> ... button images ... <!--ends div#nav --></div> </body> </html> And here's the JS // JavaScript Document //in order to get all the JS actively running, you must 'init' upon window load window.onload = init; //enclose all functionality inside the init function and wrap around everything function init() { //establish variable for slide container var slideContainer = document.getElementById("slidecontainer"); //establish variable for slide index numbers var currentSlideIndex = 0; var callSlideIndex = 0; var leftPercentage; //establish all variables for buttons var buttonBritney = document.getElementById("imgButtonBritney"); var buttonKesha = document.getElementById("imgButtonKesha"); var buttonAmy = document.getElementById("imgButtonAmy"); var buttonYeller = document.getElementById("imgButtonYeller"); var buttonOlivia = document.getElementById("imgButtonOlivia"); var buttonReclined = document.getElementById("imgButtonReclined"); //animate slides in accordance with buttons pressed in navigation buttonBritney.addEventListener("click", function() { callSlideIndex = 0; var leftPercentage = (callSlideIndex - currentSlideIndex) * 100; TweenLite.to(slideContainer, 2, {left:"\"" + leftPercentage + "%" + "\""}); currentSlideIndex = 0; }, false); buttonKesha.addEventListener("click", function() { callSlideIndex = 1; var leftPercentage = (callSlideIndex - currentSlideIndex) * 100; TweenLite.to(slideContainer, 2, {left:"\"" + leftPercentage + "%" + "\""}); currentSlideIndex = 1; }, false); buttonAmy.addEventListener("click", function() { callSlideIndex = 2; var leftPercentage = (callSlideIndex - currentSlideIndex) * 100; TweenLite.to(slideContainer, 2, {left:"\"" + leftPercentage + "%" + "\""}); currentSlideIndex = 2; }, false); buttonYeller.addEventListener("click", function() { callSlideIndex = 3; var leftPercentage = (callSlideIndex - currentSlideIndex) * 100; TweenLite.to(slideContainer, 2, {left:"\"" + leftPercentage + "%" + "\""}); currentSlideIndex = 3; }, false); buttonOlivia.addEventListener("click", function() { callSlideIndex = 4; var leftPercentage = (callSlideIndex - currentSlideIndex) * 100; TweenLite.to(slideContainer, 2, {left:"\"" + leftPercentage + "%" + "\""}); currentSlideIndex = 4; }, false); buttonReclined.addEventListener("click", function() { callSlideIndex = 5; var leftPercentage = (callSlideIndex - currentSlideIndex) * 100; TweenLite.to(slideContainer, 2, {left:"\"" + leftPercentage + "%" + "\""}); currentSlideIndex = 5; }, false); //closing brace for init } Thanks!
  15. I'd like to have some table cells animate from their automatically laid out relative position, to certain designated absolute positions to highlight them, and then have them return to their position in the table. In particular I have a Gantt chart with three selectable cells which I would like to tween from its initial... {top:"0%",left:"0%",width:"auto",height:"auto",position:"relative"} {top:"0%",left:"0%",width:"auto",height:"auto",position:"relative"} {top:"0%",left:"0%",width:"auto",height:"auto",position:"relative"} to a temporary... {top:"0%",left:"0%",width:"100%",height:"33%",position:"absolute"} {top:"33%",left:"0%",width:"100%",height:"33%",position:"absolute"} {top:"66%",left:"0%",width:"100%",height:"33%",position:"absolute"} ...and then tween them back to their initial relative values again. Is there a Greensock way of doing this? If I use a regular to(...) tween with the values above, the 'position' value is toggled monolithically to 'absolute', with the top and left set to 0 so the cells jump to the top left corner immediately, then tween their location and width from there, rather than tweening smoothly from their initial (relative) location. There's probably a workaround, involving JQuery calculating the starting positions for the tween from the rendering engine, but perhaps someone has an elegant way of doing this, as I'm sure I'm not the only one who needs the behaviour.
  16. Hello, I'm trying to use a single tween, to tween a object sometimes.. I don't want create a TweenMax object every time, like TweenMax.to(...); Whats the better way to do this? Is possible? Something like this: private var tween:TweenMax = new TweenMax(object, .6, {}); // Just a example, this will be active when the user click in a button tween.to({x:20}); Thanks
  17. I have movie clips rotating in a circle. When they near the end of their rotation, they slow down. I would like the rotation to be at a constant speed the whole time. This is my code: var circle:CirclePath2D = new CirclePath2D(275, 200, 45.15); function rotateCircle():void{ TweenLite.to(Circle3, 4, {circlePath2D:{path:circle, startAngle:90, endAngle:90, autoRotate:true, direction:Direction.COUNTER_CLOCKWISE, extraRevolutions:1}}); TweenLite.to(Circle2, 4, {circlePath2D:{path:circle, startAngle:18, endAngle:18, autoRotate:true, direction:Direction.COUNTER_CLOCKWISE, extraRevolutions:1}}); TweenLite.to(Circle4, 4, {circlePath2D:{path:circle, startAngle:306, endAngle:306, autoRotate:true, direction:Direction.COUNTER_CLOCKWISE, extraRevolutions:1}}); TweenLite.to(Circle1, 4, {circlePath2D:{path:circle, startAngle:162, endAngle:162, autoRotate:true, direction:Direction.COUNTER_CLOCKWISE, extraRevolutions:1}}); TweenLite.to(Circle5, 4, {circlePath2D:{path:circle, startAngle:234, endAngle:234, autoRotate:true, direction:Direction.COUNTER_CLOCKWISE, extraRevolutions:1}}); }
  18. Hi, I have created a tween to move an object from a point A to a point B with bezier trajectory: I have to dynamically calculate the starting and ending points, that will be percentages of the whole animation. How can I tell the tween to run from i.e. 23% to 78% of the whole animation (obviously in 78-23% of the total time)? I think I have to use progress property, but maybe I am doing something wrong, because it looks like the animation runs from 23 to 78% and then to 100%. I am doing like this: var timeLine: TimelineLite = new TimelineLite(); timeLine.fromTo(item, totalTime, { x: 0, y: 0 }, { bezier: { type:"thruBasic", values: [ { x: 300, y: 200 }, { x: 500, y: 800 } ] }, ease: Linear.easeNone } ); TweenLite.fromTo(timeLine, totalTime* (0.8 - 0.5), {progress: 0.5 }, {progress: 0.8, ease: Sine.easeOut } ); I have to learn a lot about timelines...
  19. I came across a peculiar problem with Greensock today whilst playing with a 'pause' function for a game. The purpose of the two following functions are: When the pause button (in this case it's a sprite named it 'menu') is pressed it causes all existing TweenMax instances to pause in place. It also sets the stage's framerate to 0, making all display objects pause in place. I've been told this is the best method pausing the game. When the button is pressed again, it should resume all the tweens from where they were initially paused. However, the problem is these tweens jump to their finishing position regardless of when they were paused, so when I resume the game the tween finishes abruptly. The strange thing is, if the framerate isn't changed (resumes at 30, for example), the Tweens resume from where they originally paused. Am I just being stupid and missing something obvious? AS3: protected function pauseGame(event:MouseEvent):void { menu.removeEventListener(MouseEvent.CLICK, pauseGame); menu.addEventListener(MouseEvent.CLICK, resumeGame); TweenMax.pauseAll(true, true); stage.frameRate = 0; } protected function resumeGame(event:MouseEvent):void { menu.removeEventListener(MouseEvent.CLICK, resumeGame); menu.addEventListener(MouseEvent.CLICK, pauseGame); TweenMax.resumeAll(true, true); stage.frameRate = 30; }
  20. Hi Everyone, Been using greensock for a couple of months now. I finally got us to upgrade to the newest version and some things are different. My issues is we have a main big timeline that our animation runs on. There are points in it when we pause the timeline and people need to click on stuff and other animations happens. After they click everything they need to we restart the main timeline. The click functions have their own timeline with tweens in them. Well on the newer version we are using, when we resume the main timeline it ignores the css/tweens that happen in the click timeline. It restarts like the clicks animations never happen. Before on the older version we used that didn't happen. I'm seeing if there is a way to have a main timeline and have it keep the css and animtaion end tween from click on resume of the main timeline. I hope this makes sense. Thanks.
  21. Hi all: On occasion I use Flash to create some fairly elaborate apps for client presentations. I intend to move to JScript at some point, but I'm concerned that I still can't do everything I can do in flash. One of my big questions is: can we animate vector shapes using JScript or some other HTML 5 compliant tool? Also, is there an app that can be used to lay out graphics that plays nice with GS? Thanks much.
  22. Here is my full script: <script> $(document).ready(function() { var controller = $.superscrollorama(); //This code snippet is built on the parallax example: controller.addTween( '#gun', (new TimelineLite()) .append([ TweenMax.fromTo($('#hammer'), 1, {css:{rotation: 0}, immediateRender:true}, {css:{rotation: -25}, ease:Quad.easeInOut}), TweenMax.fromTo($('#trigger'), 1, {css:{rotation: 0}, immediateRender:true}, {css:{rotation: 40}, ease:Quad.easeInOut}) ]), 500, // scroll duration of tween 200); // offset? }); </script> What I need to know is... how can I add a tween to this timeline? I just need to know how to add tweens after the one I already have. Everything I have tried does not work.
  23. I'm trying to understand how a tween's invalidate() function works. According to the docs, if you invalidate() and restart() a tween, the timeline will take the new parameters of the tween, right? I tried to build a simple example to understand this behavior, but what ends up happening is really confusing. Here's what I have. (I'm using KineticJS) var t1 = new TimelineMax({paused:true, onUpdate:stageUpdate, onUpdateScope:stage}); var tweenX = TweenMax.fromTo(rect, 1, {setX:100}, {setX:500}); var tweenY = TweenMax.fromTo(rect, 1, {setY:100}, {setY:0}); t1.add(tweenX,0); t1.add(tweenY,1); When I add these tweens to the timeline, they work as expected. Now, I have a function where I'm trying to update the way tweenY works. So, I update the parameters, invalidate the tween and the timeline and restart the timeline. function updateTween() { tweenY.invalidate(); tweenY = TweenMax.fromTo(rect, 1, {setY:100}, {setY:200}); t1.seek(0).invalidate(); t1.restart(); } However, the behavior is really confusing. Original behavior: 'rect' moves right to x:500, then moves up to y:0. After updating the tween, what I thought would happen: 'rect' moves right to x:500, then moves down to y:200. What actually happens: 'rect' moves diagonally to x:500, y:200, then moves up to y:0 I built a codepen to show this: http://codepen.io/anon/pen/fLAkd Can someone help me understand this please?
  24. Hi, I was wondering if there is any help out there to create a metaball effect with two 2D circles. I am using Raphael to create the 2D shapes. Is this something that needs to be done within Raphael? The effect I am going for is that there are a bunch of indicators moving vertically down a line at varying speeds. When they get close enough, I would like to animate them with a metaball effect so that the circles merge together and a number is displayed to show how many are in the cluster. Is there any help out there to construct something like this? The bezier plugin only does tweening "along a bezier path," if I am not mistaken - it won't do a shape tween using beziers?
  25. Hi! I know there are some handy methods for naming and accessing tweens across object hierarchy, but I'm not sure about this... I have a pulsating yoyo tween on "MC" and i add a child to MC ( MC.addChild(IAmInsideMC); ) later in the app, but I want that child to ignore the pulsating Tween that is applied to it's parent... I realize that might be counter-intuitive, and there are certainly workarounds, but I'm wondering if there's a reasonable way to accomplish this? Thanks all!