Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...

Gary Horsman

Members

  • Content Count

    32

  • Joined

  • Last visited

Community Reputation

5 Newbie

About Gary Horsman

  • Rank
    Advanced Member

Contact Methods

Profile Information

  • Location
    Montreal, Canada
  1. Gary Horsman
    Doggone it. It figures it would be a typo of all things. Sorry for the hubbub. But thanks for answering quickly. Kudos!
  2. Gary Horsman
    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
  3. Gary Horsman
    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.
  4. Gary Horsman
    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.)
  5. Gary Horsman
    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?
  6. Gary Horsman
    Thanks to all you guys at Greensock for making a rock-solid animation platform and making all our lives that much easier!
  7. Gary Horsman
    Mission accomplished. happyslappingmovie.com
  8. Gary Horsman
    Thanks, Carl. This is very informative and clearly demonstrated.
  9. Gary Horsman
    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
  10. Gary Horsman
    Here's the final online version you can see of what I was trying to accomplish.
  11. Gary Horsman
    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
  12. Gary Horsman
    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
  13. Gary Horsman
    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
  14. Gary Horsman
    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. Gary Horsman
    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.
×
Login Create Account