Dear Gsap community!
I'm still learning Gsap and Js, making experiments is the best way for me. In this one I'm trying to animate a set of lines (SVG) to rotate ,scale and move on mousemove, which I could manage with using this method under.
I'd like to add an infinite animation to randomly scale the lines up and down individually, but with the each function or otherwise the best I could do is scaling them one by one , or the whole set of lines, not all of them individually.
Secondly, I also had trials for cloning and appending lines into <defs> and <use>. I couldn't get it to work so I had to duplicate, but this is an other topic. I hid the duplicate in css. My try for the cloning is in the second code box.
var tl = new TimelineLite();
$("#linesid line").each(function (index, el) {
tl.to(el, 20, { x: (rndPosNeg() * 400),
y: (rndPosNeg() * 150),
rotation: exponent()*130,
scale: (exponent()*1.1),
ease: Power4.easeInOut,
force3D:false,
transformOrigin: "center center" }, '-=20');
});
$("#image_holder").mousemove(function (e) {
tl.time((e.pageX / 1600) * tl.duration());
tl.pause();
});
// clone lines
function clone(){
var useElement =
document.createElementNS('#linesid', 'use');
document.querySelector('svg').appendChild(useElement);
useElement.setAttributeNS(
'http://www.w3.org/1999/xlink' // xlink NS URI
'href', // attribute (no 'xlink:')
'#lines-group-id'); // value to set
useElement.setAttributeNS(
'id', // attribute
'line-clone'); // value to set
clone() ;
}