-
Content Count
32 -
Joined
-
Last visited
Community Reputation
5 NewbieAbout Gary Horsman
-
Rank
Advanced Member
Contact Methods
- Personal Website
Profile Information
-
Location
Montreal, Canada
-
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
-
Adding JavaScript Event Listeners to SVG objects
Gary Horsman replied to Gary Horsman's topic in GSAP
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. -
Adding JavaScript Event Listeners to SVG objects
Gary Horsman replied to Gary Horsman's topic in GSAP
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.) -
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?
-
Concatenating a relative percentage value for tweening
Gary Horsman replied to Gary Horsman's topic in GSAP
Thanks to all you guys at Greensock for making a rock-solid animation platform and making all our lives that much easier!- 15 replies
-
- 1
-
-
Concatenating a relative percentage value for tweening
Gary Horsman replied to Gary Horsman's topic in GSAP
Mission accomplished. happyslappingmovie.com- 15 replies
-
Concatenating a relative percentage value for tweening
Gary Horsman replied to Gary Horsman's topic in GSAP
Thanks, Carl. This is very informative and clearly demonstrated.- 15 replies
-
Concatenating a relative percentage value for tweening
Gary Horsman replied to Gary Horsman's topic in GSAP
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- 15 replies
-
Concatenating a relative percentage value for tweening
Gary Horsman replied to Gary Horsman's topic in GSAP
Here's the final online version you can see of what I was trying to accomplish.- 15 replies
-
Concatenating a relative percentage value for tweening
Gary Horsman replied to Gary Horsman's topic in GSAP
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.addEventListe- 15 replies
-
Concatenating a relative percentage value for tweening
Gary Horsman replied to Gary Horsman's topic in GSAP
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- 15 replies
-
Concatenating a relative percentage value for tweening
Gary Horsman replied to Gary Horsman's topic in GSAP
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 cod- 15 replies
-
Concatenating a relative percentage value for tweening
Gary Horsman replied to Gary Horsman's topic in GSAP
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.- 15 replies
-
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.
- 15 replies