Search the Community
Showing results for tags 'javascript'.
Found 298 results
-
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>
-
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
-
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.
-
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!
-
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
-
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?
-
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.
-
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
-
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
-
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?
-
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 )
-
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
-
Note: This page was created for GSAP version 2. We have since released GSAP 3 with many improvements. While it is backward compatible with most GSAP 2 features, some parts may need to be updated to work properly. Please see the GSAP 3 release notes for details. With the release of iOS 7, I was anticipating some big leaps forward in browser performance. What I found was quite surprising. Is anyone else experiencing the same thing? Here's a quick [and very casual] video showing what I discovered: A lot of people in the industry talk about the benefits of using CSS transitions because they're so much faster, especially with transforms (scale/translate/rotate) on mobile devices. What happened? Why is Zepto (which uses CSS transitions) so much slower? GSAP's performance remains solid in iOS 7 (far better than jQuery and other libraries), but CSS transitions fall flat on their face (at least with transforms). Can anyone shed some light on what's happening? Are you seeing the same results in iOS 7? Also, is anyone else seeing worse performance when altering the scrollTop or scrollLeft of DOM elements? Useful links Speed test Draggable Demo CSS Transitions/Animations vs. GSAP Cage Match jQuery vs. GSAP Cage Match Why GSAP? A practical guide for developers UPDATE: Apple reached out to us and acknowledged the apparent bug and said they're working on a fix. (Thanks Apple) -
Is there a way to tween the values of an array when in a for loop? I saw that there was an endArray plugin for the AS version of greensock which is close to what i'm looking for, but it doesn't appear to exits in js. Trying to do something like this: var array=[0,1,2,3,4,5]; for(var i=0; i<array.length; i++) { TweenLite.to(array, 0.5, {i:0}); }
-
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!
-
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'); }
-
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.
-
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
-
Note: This page was created for GSAP version 2. We have since released GSAP 3 with many improvements. While it is backward compatible with most GSAP 2 features, some parts may need to be updated to work properly. Please see the GSAP 3 release notes for details. Making a DOM element draggable isn't terribly difficult - there are jQuery plugins and even some native HTML5 capabilities in newer browsers. But generic dragging is kinda boring. What about smooth, natural momentum-based continuation after the user releases the mouse (or touch on mobile devices)? What about imposing bounds and edge resistance and silky-smooth redirection to certain landing values that you provide? Or flick/drag scrolling with bounce-back that doesn't look awkward? Or instead of dragging to change the position of an element, what if you want to spin it? Maybe you even want to track the momentum and let it come to rest naturally or rig it to glide to a stop at a certain value, Wheel-of-Fortune style? Yeah, that's a lot more complex. In fact, it can be a real drag to build (sorry, the pun was irresistible). Draggable makes it remarkably simple. More importantly, it delivers a very fluid user experience on both mobile devices and desktop browsers. Instead of explaining what makes Draggable so special, we built an interactive demo that showcases some of its talents. There are even code samples that update as you change the options. Go play around and have some fun. View Demo -
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!
- 6 replies
-
- 2
-
-
- html5maker.com
- animation
- (and 3 more)
-
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.
-
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 ?
-
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?
-
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 -
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
