Jump to content
one2gov

define greensock objects dynamically

Recommended Posts

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

Share this post


Link to post
Share on other sites

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 by Dipscom
  • Like 3

Share this post


Link to post
Share on other sites

 

 

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.

Share this post


Link to post
Share on other sites

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");
  • Like 3

Share this post


Link to post
Share on other sites

found the problem!

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

Again thank you, Dipscom! Works like magic.

  • Like 2

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.