define greensock objects dynamically

[one2gov 7 Likes (Newbie)]

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

[Dipscom 3,094 Likes (Superhero)]

Anything that's repeatable, you can always create a function to do the grunt work for you. Your burden is to create a pattern that will make that easier.

 

As an example:

function divBuilder(name, totalElements) {

 // Create an empty array
 var array = [];

 for(var i = 0; i < totalElements; i++) {
  // Create an image node
  var img = document.createElement("img");
  img.setAttribute("src", name + i + ".jpg");

  // Create a div node
  var div = document.createElement("div");
  div.setAttribute("id", name + i);
  div.appendChild(img);

  // Always better to use autoAlpha over opacity
  TweenMax.set(div, {autoAlpha:0});

  // Push the div node into an array
  array.push(div);

  // Append the div into the body tag
  document.body.appendChild(div);
 }

 // By returning the array, you will have access to all elements in one single variable. This is sugar really, not neded
 return array;
};


// Voila, 30 divs with id and images inside it
var thisArray = divBuilder("img", 30);

------

Edited to correct the typo.

Edited November 25, 2016 by Dipscom

[one2gov 7 Likes (Newbie)]

 

 

I feel like monkey which showed how to use a stick, and she is trying used it as paddle instead.

This is js builder right? Where is takes "src" attribute from? I tried to alert anything but no luck.

It can create 30 divs with the same image? I would try to use it for different when i am understand how to use it.

[Dipscom 3,094 Likes (Superhero)]

This line:

img.setAttribute("src", name + i + ".jpg");

Creates the image node and sets its src to be the "name" you give the function concatenated with the index number of the loop "i" and the extension ".jpg". The resulting HTML tag would be the following for the first element of the array:

<img src="img0.jpg" />

As is, it's already creating 30 different images. You will have to remove the "i" from the bit that builds the src name if you want them all to be the same.

 

Bear in mind that this example assumes all your images are on the same level as the document. If you wanted to put them on a different folder, you will have to amend the JS to:

img.setAttribute("src", "folderName/" + name + i + ".jpg");

[one2gov 7 Likes (Newbie)]

found the problem!

(var i = 0, i < totalElements; i++) -> (var i = 0; i < totalElements; i++) 

Again thank you, Dipscom! Works like magic.