Gary Horsman

Doggone it. It figures it would be a typo of all things. Sorry for the hubbub. But thanks for answering quickly. Kudos!

Hi again. Getting my feet wet with Bootstrap v.3.2.0. I set up a responsive web page with LESS and then wanted to incorporate some animation using GSAP, but no matter what I've tried, I've seen no animation or any evidence that GSAP functions inside a Bootstrap layout. Did I miss something? Is it the development environment? Did I not load the various CDNs or styles in the proper order? Revised Codepen: http://codepen.io/garyhorsman/pen/gJmft

Yes, I saw somewhere something about the attachEvent method for old IE. Good fallback. I find it interesting that you can animate all elements in an array with one line of code, but you have to run each one separately through a loop to attach a listener. There's probably some hidden logic to that. Thanks, Jonathan. You're a lifesaver.

Thanks for the quick response. That works great! (Though I would have never figured that out on my own—my JavaScript is still very remedial.) If I had used unique ID's for each button, that would be a workaround. But I'd still have to add event listeners to each ID, which means more code, right? But this makes sense for when I want to apply the same two event handlers to, say, each of 10 buttons on one page, as long as they all belonged to the same class. Then this would be an efficient way to pass those to each element in the array defined by that class. (So much to learn.) Does jQuery have to be loaded in a page for me to use it as the selector engine, or can I just have GSAP loaded on its own?

I'm able to animate two SVGs, each with a class of 'widget', upon loading the page. But when I add event listeners for mouse events to animate them on rollover, nothing happens when I mouse over or out of the SVG objects. Do SVGs have to be treated differently than other images for the event listeners to work?

Thanks to all you guys at Greensock for making a rock-solid animation platform and making all our lives that much easier!

Mission accomplished. happyslappingmovie.com

Thanks, Carl. This is very informative and clearly demonstrated.

Oh, I do understand the concept of relative positioning. I originally wanted to position the container from the left as a percentage of the parent div since the layout is scaled to the full width of the browser window. But using "-100%" would only slide the container one slide to the left rather than sliding it to the -100% position, which is where the second slide is exposed (0% for the first slide, -200% for the third slide and so on). I would get errors trying to use -100% without the quotes, but I believed that was because it wasn't supported by the GSAP platform based on the articles I read. Someone found a way to convert percentages to pixels to overcome that limitation', even. But as you pointed out, the percentage has to be placed inside a string. I didn't want to use this forum to be a tutorial for JavaScript, though I am still a beginner-intermediate scripter. If quoted and unquoted values have different effects on an animation, how does that all jive with percentages if you can quote it for relative movement but an error gets thrown up unquoted for a fixed location. Anyway, I learned a lot and appreciate the help.

Here's the final online version you can see of what I was trying to accomplish.

Success! //establish current slide index at start var leftPosition; //animate slides in accordance with buttons pressed in navigation buttonBritney.addEventListener("click", function() { leftPosition = 0; TweenLite.to(slideContainer, 2, {left:leftPosition + "%"}); }, false); buttonKesha.addEventListener("click", function() { leftPosition = -100; TweenLite.to(slideContainer, 2, {left:leftPosition + "%"}); }, false); buttonAmy.addEventListener("click", function() { leftPosition = -200; TweenLite.to(slideContainer, 2, {left:leftPosition + "%"}); }, false); buttonYeller.addEventListener("click", function() { leftPosition = -300; TweenLite.to(slideContainer, 2, {left:leftPosition + "%"}); }, false); buttonOlivia.addEventListener("click", function() { leftPosition = -400; TweenLite.to(slideContainer, 2, {left:leftPosition + "%"}); }, false); buttonReclined.addEventListener("click", function() { leftPosition = -500; TweenLite.to(slideContainer, 2, {left:leftPosition + "%"}); }, false); As it turns out, putting the percentage value after the left: attribute creates an error. But passing the value into a variable and adding the "%" string is allowed. Many thanks for all your help. You all contributed to the final answer that dug me out of this hole.

Thanks, Jamie. But unfortunately, your examples don't work as expected. This works, kind of. TweenLite.to(slideContainer, 2, {left: leftPercentage + "%"}); But here's the weird part. It animates the container using percentage as an absolute value, not relative. So that when leftPercentage returns a value greater than 0, like 100% or 200%, the whole container slides to the right and off the screen. That's quite bizarre as I thought TweenLite doesn't accept absolute percentage values for left: or x: Knowing this, I might leverage this quirk to pass an absolute percentage value into the tween as a variable without doing any fancy calculations. Otherwise, the calculations work as expected. I'll be reporting back soon.

The viewport container for the slides is actually 100% the width of the browser window, so there is no specified pixel width. If it were in pixels, my problem would be solved! Each slide is 1/6 (or about 16.66667%) of the slide container, and that slide container is 600% of its parent container which acts like a viewport with a scrolling overflow and THAT viewport is the one that's 100% of the browser window. So everything has to resize inside a liquid layout. That's what the client has requested. Yes, the slides are moving only on the x-axis. Unfortunately, I've never set up a codepen or jsfiddle page, though the link in my last post is a codepen page. But I'm thinking the solution offered there is a much more elegant solution to making the proper conversion between percentages and pixels than my little disaster If it works, I'll post the solution adapted to my situation.

Thanks, Jonathan. Will that produce a value of left:-100% or left:"-100%"? If it's the former, it won't work. I should note that the leftPercentage should probably be multiplied by -100 and not 100. Also, I've been doing some searching around and found this alternate solution that I may be able to apply. I'll update after I try it out.

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!

Wow. Just tested it and it works like a charm now. Also I took out the JS call from the body tag as recommended by Rodrigo and instead put a window.onload command at the top of my external JS file to call the init( ) function to keep it separated from the HTML document. I learned a valuable lesson about variable scope. Thanks to everybody for your help, especially to Jamie and his hand-holding as I figure out this whole new universe of Javascript.

Thanks, Jamie. I had a feeling this was more related to a Javascript issue rather than to TweenLite per se, but I was getting a bit desperate. I am doing my best to get up to speed on my JS proficiency, but many of the online examples diverge so much that it's hard to know what are the best practices. Sorry if this post was ultimately out of scope with the GSAP, but I'm always impressed with the help I get here going back to my days working with the AS3 version. Much thanks!

Tried this. <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>GSAP Test 4</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> </head> <body> <img src="images/yeller.png" alt="Yeller" name="imgyeller" width="150" height="150" id="imgYeller" /> <p>Click the girl to make her disappear</p> <script> window.onload = function init() { var yeller = document.getElementById("imgYeller"); yeller.addEventListener("click", disappear, false); } function disappear() { TweenLite.to(yeller, 1, {width:20, height:20, opacity:0}); } </script> </body> </html> Doesn't work.

Thanks, Rodrigo. I'll give it a try. The doctype declaration is the default in Dreamweaver as I've left it, but I don't see how that affects the functionality of my script. Maybe just a little side observation? And isn't it better form to keep all Javascript external for easier maintenance and to separate content from behavior?

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.

The publishing path seemed fine, but I thought that maybe I ought to download a fresh com folder from the greensock site just in case. Now it works. I'm not sure what happened to the com folder I had on file. Well, mysteriously, problem solved. Thanks for your input.

For some reason, this file was working the first time I compiled. It's running fine on the site. But I need to make a change and make the music play automatically, but now it won't compile. Scene 1, Layer 'actions', Frame 1, Line 30 1046: Type was not found or was not a compile-time constant: TimelineMax. Scene 1, Layer 'actions', Frame 1, Line 30 1180: Call to a possibly undefined method TimelineMax. Scene 1, Layer 'actions', Frame 1, Line 31 1180: Call to a possibly undefined method TweenLite. But the com folder (version AS3) is in the same folder as the FLA file (Flash CS5). As far as I can see, there's no reason these compile errors should turn up. Here's the code. import com.greensock.*; import com.greensock.easing.*; import flash.events.MouseEvent; import flash.display.MovieClip; import flash.net.URLRequest; import flash.media.Sound; import flash.media.SoundChannel; //set up instances of the player controls var PauseButton1:MovieClip = new PauseButton; var PlayButton1:MovieClip = new PlayButton; //make clips act like buttons PauseButton1.buttonMode = true; PauseButton1.useHandCursor = true; PauseButton1.mouseChildren = false; PlayButton1.buttonMode = true; PlayButton1.useHandCursor = true; PlayButton1.mouseChildren = false; //place the play button inside the empty container ToggleButton1.addChild(PlayButton1); //add click listeners to player controls PauseButton1.addEventListener(MouseEvent.CLICK, pauseSound, false, 0, true); PlayButton1.addEventListener(MouseEvent.CLICK, playSound, false, 0, true); //set up timeline for rotating buffer symbol, but keep it from playing right away var myTL:TimelineMax = new TimelineMax({repeat:-1, paused:true}); myTL.append(new TweenLite(BufferSymbol1, 2, {rotation:-360, ease:Linear.easeNone})); //set up music clip location and variable and load into Flash var localURL:URLRequest = new URLRequest("music_web_evo.mp3"); var songURL:URLRequest = new URLRequest("http://qreativ.com/evolutionmontreal.com/files/music_web_evo.mp3"); var evoMusic:Sound = new Sound(); evoMusic.load(songURL);//clip on the web---> //clip on the hard drive--->evoMusic.load(localURL); var songChannel:SoundChannel = new SoundChannel(); var songPosition:int = 0; //functions function pauseSound(e:MouseEvent):void { songPosition = songChannel.position; songChannel.stop(); ToggleButton1.removeChild(PauseButton1); ToggleButton1.addChild(PlayButton1); myTL.pause(); trace("music paused"); } function playSound(e:MouseEvent):void { songChannel = evoMusic.play(songPosition); ToggleButton1.removeChild(PlayButton1); ToggleButton1.addChild(PauseButton1); myTL.play(); trace("music playing"); }

Oops. Spoke too soon. The error has reoccurred. Anyway, this post is veering way off topic. But thanks anyway.

Here's something odd. I decided to test out yet another SWF using the Greensock code in an external .as file just as you'd prescribed. I uploaded the animated SWF to an external server, imported it with the container FLA (with all that clickTag scripting) and tested it locally on my hard drive. As before, I received the security sandbox violation. On a lark, I thought I would try uploading the external .as file into the same directory as the animated SWF on the remote server. I didn't think it would work since a compiled SWF is a compiled SWF, right? The .as file shouldn't be imported at runtime. Guess what? The error went away. It's as if the SWF on the remote server was looking for the .as file on my hard drive at runtime. But put it in with the SWF, and it's no longer going outside its own domain. Am I missing something? Do SWFs with external .as files which link to tweening libraries import that data at runtime? For now, I'm glad it's worked out. But it runs against what I've so far learned about compiled SWFs. Ideas?

You're being an immense help, Zync. Thanks!