Jump to content
Search Community

tintahold

Members
  • Posts

    2
  • Joined

  • Last visited

tintahold's Achievements

0

Reputation

  1. Thank you for the quick reply! Using intervals on the position parameter is great, that would 've been my future question . What I'd like to achieve is a restlessness on multiple lines, and to keep this effect while other animations are active. For this I believe I have to update the random number in the animation, which I have trouble with. I also tried to set an interval to change the random number amongst other methods I found. I reduced my svg and code as you asked, commented out the irrelevant and some of the failed approaches code. http://codepen.io/tintahold/pen/XRRKxo
  2. 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() ; }
×
×
  • Create New...