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!