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.