Jump to content

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

Search the Community

Showing results for tags 'javascript'.

  • 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 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>
  2. i am wondering if it is possible to use the BezierPlugin to create a curve that not only goes through a series of points, but will hit each of them at a defined amount of the way through the tween? using an array something like this: var tracker1Positions= [ {x:13.3, y:19.5, progress:0}, {x:14.8, y:19.0, progress:0.1}, {x:16.8, y:18.3, progress:0.7}, {x:19.0, y:17.9, progress:0.75}, {x:21.0, y:13.3, progress:1}, ]; my end goal here, is that i have a video that will have a some dom elements following certain items in the video, and i think a bezier curve would make a much smoother way to simulate tracking than just straight tweens. thank you.
  3. Hey Guys, I am still new to GSAP animation, and i need some help. I am implementing a timeline using greesock js which handles a presentation of different SVG images mainly made up of simple lines, circles and paths. What is want to achieve is the animation of these SVGs while to timeline is being moved. As far as the timeline implementation goes, all is well. But when it comes to animating the svg the way i want i am reaching a road block. I can animate the scaling, width and opacity with no problems. The code is as such: TimeLine.from($('#Shape2 polygon'), 2, { scale: 0, onStart: function () { //Dont mind the variables mainTimeline.timeScale(NormalTimeScale); } }, timeShift) What i want to achieve is the drawing effect of the lines circles etc... As the user moved the timeline scroll bar, the vector graphics should be drawn and of course the reverse effect should be obvious. I am mainly trying to achieve this with stroke-dashoffset and stroke-dasharray but i cannot alter these properties even after i included the AttrPlugin. This is what i am trying: Timeline.from($('#Shape2 line'), 1, { atrr: { 'stroke-dasharray': '20px' }}, timeShift + 1) Please note that these are just example blocks of code. Can you guys help me with this please?
  4. Hey so i'm not sure if this is a greensock bug or a browser bug or me just pushing the limits too much, but what i have noticed on a couple projects i've started lately is that where i may have a bunch of tweens going on successfully in Chrome or Firefox, that when i test in Safari or on my iPhone, the animations dont seem to fully update visually. if i resize the window or anything like that, the screen corrects itself. where i've run into it, the problem doen'st happen if only 1 or two things are tweening at once, but if a more than a handful are tweening at once, it seems that the browser cant keep up or something. if you zoom in or out or rotate the screen or something to get the browser to react, the end of the animation will rectify itself after its been messed up. even with the window resize listener turned off. you can check out one project currently in progress where you can view this. to see them problem, in safari or on iphone open the link, then click between "bird" and "big bang". you will see that the divs and the nav elements will linger in Safari and iOS, yet not in Firefox or Chrome. if you step across the nav one at a time, (big bang, liquid, snakes, globe, wedges, candle, bird...) then it tweens fine in all browsers. http://danehansen.com/temp/gs
  5. I'm getting an actionscript error on the console but i'm doing an HTML5 simple javascript tween.to. screenshot of error attached. see all files in action here-> http://polklein.com/gs
  6. My colleague had scaled a DIV container with text/vector graphics. It looks super sharp on a retina screen in firefox, but on a regular monitor he has connected it looks blurry. For me it looks like on the retina it has scaled the fonts, but on the regular screen it seems like it has bitmaped and scaled (everything is blurry) Any workarounds? We used Elements inspector to check the width/height after scale and it´s whole pixel values.
  7. Firstly I would like to say thanks to you Greensock guys for making such a great animation platform. I have struggled with animation over the years using JS and GS is simply the best out there. My question is this: I am currently trying to create a clock with an hour and minute hand (also an AM to PM dial but that can come later after I get over this hurdle). I have got the hands to tween infinitely around and this works great if it were static and you just want a clock to keep spinning and spinning around. What I ultimately want to acheive is to be able to set the time and the clock would spin around till it reached that time. I have created a codepen link to show what I have done so far http://codepen.io/anon/pen/Iakzg I am very new to the platform, I hope I can get some advice about what I need to do. Any help is greatly appreciated and I would love to hear from some of you greensock gurus! Thanks!
  8. Hello everyone! I wanted to ask you something. My task is to reproduce flash banner with javascript and html. I attached example in .mov format to sendspace so you can download see it. First part of animation is not a problem to me but raising stars are. I don't know how to begin that animation. Can someone help me about this? Thank you! video file http://www.sendspace.com/file/4790e8 working files http://www.sendspace.com/file/pil2ph
  9. 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.
  10. Greetings, Thank you for reading, and for any insight anyone can offer. It is appreciated. I adapted the code from this demo on codepen: http://codepen.io/GreenSock/pen/bpezc ... in order that I may understand how things work. For some reason unknown to me, I must run the timeline from a button (unlike the code in the codepen deal). This works: window.onload = function() { var logo4 = document.getElementById('logo4'); var tl4 = new TimelineLite(); $("#play").click(function() { tl4.insert( TweenLite.to(logo4, 2, {ease:Linear.easeNone, css:{borderBottomColor:'#90E500', left:'542px', backgroundColor:'black', color:'white'}, delay:0, paused:false}) ); }); $("#pause").click(function() { //alert("Pause Button"); tl4.pause(); //tl4.play(0); }); } This does not: window.onload = function() { var logo4 = document.getElementById('logo4'); var tl4 = new TimelineLite(); $("#play").click(function() { tl4.insert( TweenLite.to(logo4, 2, {ease:Linear.easeNone, css:{borderBottomColor:'#90E500', left:'542px', backgroundColor:'black', color:'white'}, delay:0, paused:true}) ); //tl4.restart(); tl4.play(); }); } Nor does this: window.onload = function() { var logo4 = document.getElementById('logo4'); var tl4 = new TimelineLite(); tl4.insert( TweenLite.to(logo4, 5, {css:{borderBottomColor:'#90E500', left:'542px', backgroundColor:'black', color:'white'}, delay:0, paused:true}) ); $("#play").click(function() { tl4.play(); }); } It only works if the timeline is put in the function of the button ... but in codepen: var tl = new TimelineLite({onUpdate:updateSlider}); tl.set("#content", {visibility:"visible"}) .from("h1", 0.5, {left:100, autoAlpha:0}) .from("h2", 0.5, {left:-100, autoAlpha:0}, "-=0.25") .from("#feature", 0.5, {scale:0.5, autoAlpha:0}, "feature") .from("#description", 0.5, {left:100, autoAlpha:0}, "feature+=0.25") .staggerFrom("#nav img", 0.5, {scale:0, rotation:-180, autoAlpha:0}, 0.2, "stagger"); $("#play").click(function() { // function } Obviously, I am missing something. Thanks for any guidance offered. Steve
  11. The JS api doc's say that the duration of a tween has to be in seconds. Can this be values less then 1s, like 0.6 (600ms), or 2.54 second? I think so, just checking, as I am not completely sure...... Or does it round/truncate the numbers? Thanks
  12. I'm just beginning to get my head wrapped around a project which involves porting some of my Flash applications (built with TweenMax) over to javascript. I'm trying to understand what the best practice is for translating a fixed-coordinate system (Flash) to a flexible / multiple-resolution environment. (HTML). My Flash applications all run at full screen, so in order to simply account for all mobile environments, I assume that one simply creates a "screen sized" DIV set at height/width 100%. But since TweenMax uses a numerical coordinate system, I'm wondering if there's a commonly used approach to translate that to a percentage-based coordinate system? Can TweenMax work with percents instead of fixed coordinates? The examples I've found seem to use multiple CSS definitions for multiple platform types -- although this seems like a real pain -- particularly if the coordinates don't need to be that precise. Or is a % based method inadvisable for some reason?
  13. Hello everybody! I have a problem with the Superscrollorama plugin. I'm a graphic desiner, so I don't understand too much about Javascript. But I'm trying to learn it. I could make an animation with the plugin, but my problem is that I'm doing a responsive website, where each section has a height that fits on the screen. For this reason, I would need to start the animation when the section is displayed, not when I scrolled up to X number of pixels (3000px in this case). I hope I explained the trouble. I'll paste the code that I would like to change, someone can help me? Pleeeeease controller.pin($('#slide5'), 2800, { anim: (new TimelineLite()) .append( TweenMax.fromTo($('#move-1'), .75, {css:{left: 0, top: 0}, immediateRender:true}, {css:{top: 100}} ), -1.5 // offset for better timing )
  14. Hi Greensockers - you will see that my trouble is not Greensock but rather incorporating a two dimension Array to feed back into the TimelineMax tweens that I have set up. I have seen that it's possible to have the Tweens inside the array as it loads and have attempted that as well. I'm fairly sure that my limited programming knowledge hasn't helped me and I apologise for the circuitous methods employed. If anyone has time to plough through all this I would appreciate any help you can provide. Once I have the array loading and feeding I will add some colouration. Many thanks - Trevor Forgot - CodePen working is: http://cdpn.io/mkCJd and non-working is: http://cdpn.io/Abjip http://codepen.io/thorntontf/public/ greensock.html greensock array test.html
  15. Not sure if this is me or not, so I wanted to check it out. I am more or less doing an animation with a sprite map. When trying to change the backgroundPosition in IE8 I get an error. But changing the backgroundPositionX and Y individually is fine. Here is my code: var flame = document.createElement('div'); . . . flame.style.overflow = 'hidden'; flame.style.backgroundImage = 'url("my_files/images/flame.png")'; var tl = new TimelineMax( { repeat:-1 } ); tl.to(flame, 0, { css:{ 'backgroundPositionX':'-5px', 'backgroundPositionY':'-7px' } }, 0); //no error in IE8 tl.to(flame, 0, { css:{ 'backgroundPosition':'-17px -4px' } }, .1); //error in IE8 The error is: SCRIPT5007: Unable to get property 'backgroundPositionX' of undefined or null reference TweenMax.min.js, line 15 character 22204 Please let me know if I'm coding this wrong. Thanks!
  16. Hi, We're using TimelineMax and TweenMax to make a scrollable timeline animation. Everything is going great except when leave the tab open and navigate away to another tab, which causes chrome to (I'm not sure on this one) suspend or slow down timers from 'ticking'. When you navigate back to the tab, we're seeing erratic behavior that will show random pieces of our timeline all stacked up on top of each other (http://screencast.com/t/vC00sJHXCkCT). I've tried to use https://github.com/ai/visibility.js to set the timeline progress to zero whenever a user activates the tab again, but the behavior still exists. Steps to create: 1. go to http://alert-gum.herokuapp.com/ in chrome/firefox 2. scroll down a little bit 3. open a new tab in front of the alert tab and wait for 3 mins 4. go back to the tab and try scrolling. result: items scattered and stacked on top of each other from different points in the timeline. p.s. the issue 'kind of' fixes it's self if you scroll all the way up and all the way down (obviously not satisfactory) Thanks for any help.
  17. I am having some basic trouble getting a div within a div to alpha tween on and off. Basically I'm trying to randomly change the text inside the div (it will be using a pictorial font so the image will change). The text changes, thus the timelineMax is working, but there is no tweening on and off -- no alpha tweening. I'll include the relevant js and css below -- if the full zip is needed, can do, but I'm sure it's something really simple I'm missing. I also noticed that storing the div in a 'global' variable -- grabbing it at the start with jquery -- wasn't working for whatever reason, and that's why I'm grabbing it each function. Thanks for pointing the errors of my ways. JS startRotateDiv(); function startRotateDiv() { var rotateDiv = $('#home_div div.content_image'); var tl = new TimelineMax({repeat:-1}); tl.add(setText); tl.to(rotateDiv,.5,{autoAlpha:1}); tl.to(rotateDiv,.5,{autoAlpha:0},"+=2"); tl.play(); } function makeid(len) { var text = ""; var possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789"; for( var i=0; i < len; i++ ) text += possible.charAt(Math.floor(Math.random() * possible.length)); return text; } function setText() { var rotateDiv = $('#home_div div.content_image'); var txt = makeid(1); rotateDiv.html('<div class="notice">'+ txt + '</div>'); } CSS .notice { font-size: 80px; font-family: 'noticenotice2'; color: red; background: url('http://media.npr.org/assets/news/2010/04/11/panda-f8a7c9331bbac776e52b26feeccc53de959f46d1-s6-c30.jpg'); }
  18. Hi, I'm studying the video-tutorial "advanced sequencing - meet the blobs". http://hub.tutsplus.com/tutorials/timelinelite-ultimate-starter-guide-advanced-sequencing--active-10331 by Carl Schooff I want to rebuild it in javascript not AS. in the video at 25'45 I'm stucked with looping through the blobani timeline with insertMultiple and push the created timelines into an array. var blobTweens = new Array(); function createBlobs() { for (var i=0; i<10; i++){ var blob = $("#blob"); var blobani = new TimelineLite(); blobani.insertMultiple([ TweenLite.to(blob, 2, {x:480}), TweenLite.to(blob, 0.5, {y:-250}), TweenLite.to(blob, 0.5, {rotation:360, delay:.1}), TweenLite.to(blob, 0.5, {y:-140, delay:0.5}) ]); blobTweens.push(blobani); or blobTweens = (blobani); } } I can't push the timelines that were created by the for loop into the blobTweens array. can you please help me with the right javascript syntax for this wonderful idea to create multiple objects? thank you for the timeline guide videos and for your answer Michael
  19. Hello everyone, I have just launched a new website: http://html5maker.com It exports frame-based animations using TweenMax library. Currently only Move and Fade effects are supported but I plan to add more effects in future. Here are some templates that were done using html5maker. Waiting for your feedback and feature requests! Thanks!
  20. I've been working on reproducing one of my favorite card games in JavaScript and I'm having some problems getting the 3d rotations to work the way I'd like. I'm using TweenLite to flip the cards' divs with rotationX and rotationY, but I can't figure out how to tell when I need to swap out the front and back of the card. Is there a way to detect which side of the card is visible? I've seen it done with CSS like this: http://davidwalsh.name/css-flip, but 'backface-visibility: hidden' doesn't seem to affect objects that are rotated with TweenLite.
  21. Hi, I'm "converting" to GSAP, and I just can't seem to find anything regarding external use in any of the documentation. Please visit www.duwaynebrown.com to see what I have now. Since I don't see "typewriter" plugin under the tweens, I'd like to know if I would be able to create an instance in the timeline where it would call the typewriter() function ? Also, the h2, how would I "convert" that to tweening ?
  22. I have two timelines.. tl1, tl2 for demonstration purposes. tl1 starts when the dom is ready. tl2 starts via button click. There is another button that reverses everything to where tl1 starts. The problem I have is that if the button that starts tl2 is clicked before tl1 is finished, then someone clicks the button that reverses the timelines to the start of tl1, then tl1 is reversed to the point where the interruption happened. How can I tell the button that reverses everything back to tl1 to go all the way back to zero?
  23. Hey guys, Found some behaviour that's causing me issues. I have an animation of a vehicle, that's yoyo-ing from left to right infinitely. In the onRepeat callback i'm flipping scaleX between 1 & -1 to flip the graphic. The problem happens when the browser tab is not active. The timeline may have repeated multiple times, however the onRepeat callback is only fired once when focus is returned to the tab. Therefore the orientation of the graphic can become out of sync with the actual direction. I realise that RAF halts all callbacks when the tab is inactive so, but I would have expected the onRepeat callback to be fired retroactively for the number of times the animation has technically repeated. Is the behaviour intended or a GSAP bug? For the moment I have changed my code to manually change direction based on the x vector in the onUpdate callback. Hope I've not rambled too much Look forward to your reply. Rob
  24. Hello everyone, let me say at the beginning that this is a fantastic animation platform, since I've been only working a little bit with jquery animate, this is way easier to work with, good job. And now here comes my problem. So I'm trying to make a CPU scheduling animation, pretty much the same thing as here on this link: http://courses.cs.vt.edu/csonline/OS/Lessons/Processes/index.html My problem here is that I'm not really sure can this even be done. So let's say I have 10 processes which are represented as a small images, and animation is just moving those images across screen, nothing to fancy. My idea is very simple and it goes like this: - take process from ready queue and animate it to the CPU - there wait for few seconds and animate it to waiting queue - there also wait for few second and animate it back to waiting queue - repeat this untill all processes are finished (bool variable) Ofcourse when one process finishes in CPU other from ready queue is comming in. And when process is in waiting queue, the rest of simulation should be running. So if I wouldn't have waiting queue this would be very easy animation to do, but with it in game it gives me troubles. My possible solution to this would be using 2 timelines, one which would animate processes in ready queue and to the CPU, and other timeline which would animate them from CPU to the waiting queue and back to the ready queue. The problem is I'm not sure how to do it. Can anybody give me some tips or link to some tutorial where something similar is done, it would be much help. Tnx
  25. I have a few tweens as part of a TimelineMax instance that have a speed of 0. However they are executing out of sequence with the rest of the tweens, seemingly running at the very start of the timeline playback. Changing the speed to 0.1 fixes this issue. Here's a fiddle: http://jsfiddle.net/wxxkA/2/ Any ideas? Thanks