Jump to content


define greensock objects dynamically

Moderator Tag
Go to solution Solved by Dipscom,

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

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

Link to comment
Share on other sites

  • Solution

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

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

  // Push the div node into an array

  // Append the div into the body tag

 // 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
Link to comment
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.

Link to comment
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
Link to comment
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
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.