Jump to content


  • Posts

  • Joined

  • Last visited

Profile Information

  • Gender
    Not Telling
  • Location

Pauls's Achievements



  1. Thanks Diaco, always nice to get things referenced. I was testing getElementsByTagName and childNodes earlier. contentDocument is the way to go. I see a getSvgPath(id, svg, path) function forming, some try catch svg loading with fallback actions might be needed later. Learning gsap on the side here so Im not fantastic with some of the dom/js stuff (php, c# here) thanks for the help.
  2. Pauls

    Animated Image Maps

    Just scaling and rotating Carl, reading thru the docs this week some more. Dynamically moving the map shape coordinate points isn't necessary for what I had in mind, might be a cool demo to try later. My case is I have a jpg thumbnail with a gsap animated svg sitting on top of it providing a spinning animated border frame I posted over here. I'll be testing out a spinning image map to rotate along with the same polygon shapes timeline for precision clicks and mouse over effects inside the frame. Just getting the hang of codepen, couldnt post a live sample as the svg is loaded by local reference, probably another week before I get back to this task, thanks for looking.
  3. Pauls

    Animated Image Maps

    Hi everybody, Im just starting gsap, has anyone tried animating an object that uses traditional html Image Maps? I assume gsap grabs the whole div or container the map resides in and translates the image map coordinates for you. Could the area shapes be animated individually by tweenmax? (it might cause accessibility issues, I think translating the whole container might be better for compatability).
  4. Does @Raynor's technique work on multiple objects with the same id? I just started with gsap myself here. I had a div thumbnail that I wanted to place an animated svg frame on top of as a spinning border, I started with @Diaco's approach and looped with the getElementsByClassName div to count the ids up +1. My question would be, is this ok to loop like this? I'm not sure if I should re-use a timeline or calling new TweenMaxes via svg loading has much impact on performance etc. I only need about 8-12 thumbnails per page. .thumb { width:180px; height:180px; border:none; } #t0 { background: url("thumb_0.jpg") #eee no-repeat; } #t1 { background: url("thumb_1.jpg") #eee no-repeat; } <div id="t0" class="thumb"> <object id="nonagon0" data="nonagon.svg" type="image/svg+xml"></object> </div> <div id="t1" class="thumb"> <object id="nonagon1" data="nonagon.svg" type="image/svg+xml"></object> </div> var t = document.getElementsByClassName("thumb"); var i; for (i = 0; i < t.length; i++) { document.getElementById("nonagon"+i).addEventListener("load", function() { var doc = this.getSVGDocument(); var path = doc.getElementById("path"); TweenMax.to(path, 33, { rotation:360, repeat:-1, transformOrigin:"50% 50%", ease:Linear.easeNone }); }); } I love the fact with this technique you can animate each path within the svg with greensock, I only have one path named 'path', but I did test it out copying multiple paths with different tween speeds / opacity for special effects. Its great you can just select the inner path to animate and not cause the whole rectangular frame to spin. My nonagon.svg is pasted below with the resulting thumbnail. <?xml version="1.0"?> <svg version="1.1" class="svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="180px" height="180px" viewBox="0 0 180 180"> <g class="nonagon" opacity="1"> <path id="path" d="M-86,90 C-86,-7 -7,-86 90,-86 C187,-86 266,-7 266,90 C266,187 187,266 90,266 C-7,266 -86,187 -86,90 M89,161 L44,144 L19,102 L28,54 L66,23 L115,23 L152,55 L161,103 L135,145 L89,161 Z" style=" stroke:none; fill-rule:evenodd; fill:#ffffff; fill-opacity:1; "/> </g> </svg> I'm planning on animating each thumbnails svg frame on mouse over, so I guess there might have to be an array holding each tween/timeline triggering play/pause on mouseover.