animating multiple objects simultaneously

[tintahold]

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() ;

} 

 

 

See the Pen YVZjWK by tintahold (@tintahold) on CodePen

[Carl]

Hi and welcome to the GreenSock forums. 

 

Thanks for the demo. When seeking support it really helps if you can simplify things as much as possible. It looks like you have a massive SVG with over 300 line elements that you are trying to animate.

It would be great if we could work with a simple demo that had 10 lines and just the code necessary to replicate the problem. Whatever you are doing seems to be very stressful for the browser and I had difficulty trying to edit the code or log some values. 

 

I'm not exactly sure what effect you want but it seems like you are adding a lot of new tweens to a timeline, all 20 seconds before the end of the timeline. If you want those animations to run at different times you can try randomizing the position parameter or incrementing it by using something like index * 0.1 (start each tween at 0.1 second intervals)

 $("#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" }, index * 0.1);
                     
        });

If you need more help please drastically reduce your SVG. I'd also suggest removing the mouse move effects so that we can focus the code needed for the animation. 

[tintahold]

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.

 

See the Pen XRRKxo by tintahold (@tintahold) on CodePen

[Carl]

Thanks for the reduced demo.

 

If you want some properties to be randomized you can create recursive function calls that create new tweens with new values.

Notice how in this demo that rotation tweens are in your timeline but the scale is being randomized: http://codepen.io/GreenSock/pen/JNNeoB?editors=0010

 

http://codepen.io/GreenSock/pen/JNNeoB?editors=0010