[define greensock objects dynamically]

I just finished creating 2 minutes animation with ~80 objects. I spend more time then i would we spend in after effects or photoshop, but i can make edits 10 times faster, then in Adobe programs. I already asked about UI and got an answer that Greensock using tweenui.com behind the scene (or vise versa). (I can't use this tool, because it's same "Adobe layers timeline system" that i am trying to get rid of using greensock.)

One of the most time consuming thing was in the end - adding new object to my scene.

1. I create div element with a path to image source and id

2. I create var shortcut image_name = $("#image_name") (just realized this is not necessarry)

3. I set object to opacity:0 and showing it when it's time

 

My question is - what technologies i can use to make this step easier?

I think i should create json array and parser for it. And add image to json dynamicly. And create new array for this image that will have greensock .set function ... okay, my brain just pooped at that point. Can you give me a hint of what should i use? Thank you forum.

See the Pen ENXgdq by one2gov (@one2gov) on CodePen

[pause video after several seconds ad resume timeline]

How to pause video after 2 seconds and continue timeline? 

// start the video and pauses the timeline
timeline.addPause("+=0", video.play, null, video);

// resume animation after video ends
timeline.to(video, 3, { opacity: 0, scale: 1.2 });


// just to see that video.play is actually triggering a real play event on the video
video.addEventListener("play", function() {
  output.innerHTML = "video start";
});

// resumes the animation when the video is paused
video.addEventListener("pause", function() {
  // resume the animation
  timeline.resume();
  
  output.innerHTML += "<br/>video stop";
});

See the Pen ZBLQYd by one2gov (@one2gov) on CodePen

[onResizeStart:function()]

Ok, i got it _gsTransform.scaleX is not width of the div but it's a scale ratio of the div.

[onResizeStart:function()]

Is it possible to update values of html on resize? Like this?

 

onResizeStart:function() {
xSize.innerHTML = this.target._gsTransform.scaleX;
ySize.innerHTML = this.target._gsTransform.scaleY; 
}

In the codepen i can't get values of _gsTransform.scaleX for some reason.

See the Pen RooKpG by one2gov (@one2gov) on CodePen

[execute js on label]

I am using https://github.com/scottschiller/SoundManager2/ to play sounds in timeline.

I am trying to launch "empty" animation with sounds execution using labels.

So i would be able to define sound once, and then just repeat it with other animation in the future.

 

Sound in codepen shoud play 3 times but it plays only once. What's wrong?

See the Pen vyXjqP by one2gov (@one2gov) on CodePen

[transform in timeline relative to previous position]

If i repeat timeline comand

tl.from(head, 0.5, {left:100});

it will repeat objects movement stating from position defined in css.

 

Is it possible to move same object several times from previous position?

 

So instead of 

tl.from(head, 0.5, {left:100}); - 100px

tl.from(head, 0.5, {left:200}); - 100px

tl.from(head, 0.5, {left:300}); - 100px

 

it would be 

tl.from(head, 0.5, {left:100}); - 100px

tl.from(head, 0.5, {left:100}); - 100px

tl.from(head, 0.5, {left:100}); - 100px

See the Pen WoGdLQ by one2gov (@one2gov) on CodePen

[_gsTransform of div Class]

I am trying to count how many pixels (."box") shifted, but gsTransform can only give me information about div id's. I tried to rename div id through onmouseover, but it doesn't work.

 

 

If you look at codepen, it works only for one box, and my intention is to make it work for all divs, no matter what div id it will have.

See the Pen mOrJKP by one2gov (@one2gov) on CodePen

[capture x y position]

I am looking for capturing objects position from canvas. Here is an example http://cssanimate.com/

Is it possible to update object position from canvas to code?

[ui for greensock]

Is there any posibility or plugins to make animation with user interface and not coding? For example on this page http://greensock.com/position-parameter i would like to move green  timelineUI-tween on the timelines, to replace tweens among themselves. Is it possible? 

My goal is to replace After effects, because my task is to create easy animation for children, and in after effects even easy things takes hours.