Search the Community

Hi, As shown in the codepen, the issue I'm having is that whenever I finish dragging the object, the Bezier tween of that object stops, as both the Draggable and beziertween use Translate3D. While experimenting, I found that only x,y properties on both provide smooth animation and are not breaking the position of elements. Using margins or top/left positions renders bezier animation to be choppy, while using those types for Draggable causes the elements to be thrown off their initial positions. You can see the full-scale animation I'm working on at http://patmir.com. Using onDragEnd to re-initialize the bezier tweens returns the objects to their initial positions, which I want to avoid. The question is: What would be an appropriate solution here? I'd rather avoid having to re-initialize tweens and modyfing the tweens to use current position of elements, as it might decrease the site's performance significantly. Using different types for Daggable won't work, as the elements are positioned on top/left based on % and calc(). I would appreciate any insight into what I'm doing wrong here, With Best Regards, Patryk

I'm trying to ease an element that is being translated to the left by a percentage amount. Easing doesn't seem nearly as effective as when I'm translating by a pixel amount. Any ideas on what I should do?

I searched around a bit to see if this had been suggested before - I'm guessing it has, but just in case - you can already pass in an array of clips to have their properties tweened - why not allow passing in a vector (e.g. Vector.<DisplayObject>) as well? mostly for the sake of sheer convenience in not having to switch collection formats when you need to tween things.

Is it possible for GSAP to do what I think. Because my idea is to let the Timeline go to a specific child (tweens inside/added to a timeline) and when that tween is finished animating, it will pause. Here's the code sample: HTML <div class="book"> <div class="last page"></div> <div class="page one"></div> ... <div class="cover page"></div> </div> <div id="prevPage"></div> <div id="nextPage"></div> JAVASCRIPT var book_timeline = new TimelineMax({ paused: true }) /* tween children */ .to('.page.cover', 0.4, { rotationY:'-180deg', transformOrigin:'0 0' }) .to('.page.one', 0.4, { rotationY:'-180deg', transformOrigin:'0 0' }) .to('.page.two', 0.4, { rotationY:'-180deg', transformOrigin:'0 0' }) .to('.page.last', 0.4, { rotationY:'-180deg', transformOrigin:'0 0' }); $('#nextPage').click(function(){ // code that animates only one (next page) tween inside a timeline then pause book_timeline.play(); }); $('#prevPage').click(function(){ book_timeline.reverse(); }); I want to use GSAP to make my own book flipping div's

As I know GSAP can't handle percentage values for x and y. Percentage values can help us to make relative animations (relative to the element's width or height) combined with responsive design. Here is a codepen which shows the problem: http://codepen.io/anon/pen/fszAh Steps: Load the codepen click on the red box watch the animation, it moves horizontally 100% relative to the width of the current box Resize your window Click on the box again The tween doesn't get updated, so it moves horizontally with the old width Is there a way to "fix" this? I would like to prevent the browser from the recreation of the tweens and timelines every time the browser resizes.

Hello guys How do I make that the object that I click, start moving in circles ( 2-3 times ) around the stage before arriving at its end position.Something like in this picture. PS: it doesnt have to have an exact radius or exact steps, it just has to rotate 1-2 times and after that go to the certain point on the stage. the way I figured out it could be is something like this: private function onClick( ev:MouseEvent ):void { var currentObj:Sprite = ev.currentTarget as Sprite; TweenLite.to(currentObj, 1, {x:first_X, y:first_Y, onComplete:goToPosition2 }); function goToPosition2():void { TweenLite.to(currentObj, 1, {x:secontd_X, y:second_Y, onComplete:goToPosition3 }); } function goToPosition3():void { TweenLite.to(currentObj, 1, {x:third_X, y:third_Y, onComplete:goToPosition4 }); } .. .. . . . //and so on and so on } yet I somehow feel that this is very wrong way of doing it. thanks.

Hi, Is it possible when adding a tween to a timeline, to have its' duration be automatically as long as the time gap until the next tween on the timeline (and the last until the total duration of the entire timeline)? So that if, for example there are 3 tweens at time 0, 7 and 10 each, on a time line with a total duration of 20, the first would have a duration of 7 seconds, the second - 3 seconds, and the last - 10 seconds? and if the second tween is removed - then the duration of the first tween will automatically update to 10 seconds?... If it's relevant, all tween target the same dom element. Thanks! beamish.

So I was trying to find a nice way to make a lot of automatic tweens (for lack of a better term) and I found the bubble example from snorkl (http://www.snorkl.tv/2010/12/timelinemax-bubbles-play-pause-and-rewind-particle-systems/) I used his code and modified it to better fit my needs (took out a lot of the randomness and the buttons) but now the clips won't tween. They are placed on the screen, but don't move at all. Also, I already had my own randomRange function defined elsewhere in my project. Heres the code: import com.greensock.*; import com.greensock.easing.*; var tl:TimelineMax=new TimelineMax({paused:true,onComplete:done}); function createWords() { //create a word (attach symbol in library with Class Bubble) and position on stage var word:words = new words(); word.y=500; word.x=randomRange(100,400); word.alpha=1; addChild(word); //create timeline for each word var nestedTl:TimelineMax = new TimelineMax(); nestedTl.insert(TweenMax.to(word,17, {y:-50, ease:Linear.easeNone})); //append new timeline very close to when the previous one started //don't even ask about the offset...k? tl.append(nestedTl, 6); } function done() { trace("the party's over"); } function init() { for (var count:Number = 0; count<50; count++) { createWords(); } } init(); WordTest.fla.zip

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

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.

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}); }

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.

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.

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

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>

<!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.

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.

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.

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

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?

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!

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!