Jump to content
Search Community

Animating Dynamicly generated objects (and also, some best practices etc)

Gardi test
Moderator Tag

Go to solution Solved by Carl,

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

Hi everyone

First, shout out to Diaco and rest of the Greensocks heroes. Thank you. I've enjoyed working with your script and all the answers you've provided here have been most useful.

My WIP http://goo.gl/RWzDCK


the js in the site is not yet optimized. I'm optimizing it on my local server.

And here are the questions.

1) I'm  animating a timeline of objects. Since there are other instances of these objects being used later on, I'm defining them before using them in my timeline.

The problem is, there are some objects that are being generated based on conditions (for example, ".pencils") . Meaning some objects are only implemented in to the page in some cases. But when they do, they are animated within these timelines.

So, when I define them before hand and call them in timeline later on, I receive "Uncaught Cannot tween a null target" if they are not present in the page.

Is there a way to  if(pencil) in timelinemax ? IF not, should I leave them as ".pencil" instead of pencil

2) Im currently animating several timelines and all time lines are animating sprites. In some cases, some timelines are either fired simultaneously or within few frames from eachother. In pcs and laptops onviously animations runs smootly but I start to see some lags (not cutout lags but like stutters ) in tablets and phones. I'm now trying to optimize the script but if there are any general tip on animating for mobile devices would be welcome.


3) I'm creating cookies and checking them in document.ready. This way, I would like to fire animations once every few day (since they are basicly small animation movies).

Based on whether the cookie exist or not, I'm loading one of the two style sheets. They both have same elements but different images.  StylesheetA has sprite images where else StylesheetB has static (and waay smaller), one frame images.

So if cookies exist. No animation is fired, and only the static image is loaded. However, this approach causes more than half of the images to fail loading with errors stating the images are corrupt. After 2 week of trying to solve (changing ftp client since I'm thinking, the ftp client is corrupting images while uploading them) this problem, I've found out that the error is not due to images being corrupt but browsers are over encumbered loading styles and trying to get all the images.at the same time.Since, I dont receive the same problem when I leave stylesheets intact in the head. Is there a better way to overcome this problem? Any suggestion on the matter is welcome.

Thank you

Link to comment
Share on other sites

  • Solution



I looked at your site. the animation is very good.


I think though that you are going to have trouble on mobile hardware just due to how much stuff is loading and needs to be displayed.

I tracked about 7MB of images! I almost feel like you would do better with a streaming video. 


Unfortunately, I am having a tough time understanding the questions you asked. It really helps if you can:


  1. provide a simplified CodePen demo of the issue you are facing: http://greensock.com/forums/topic/9002-read-this-first-how-to-create-a-codepen-demo/
  2. keep your questions focused on the GSAP API
  3. ask 1 question per post

As for question 1:


you can't apply null targets to tweens. you need to make sure the objects exist before you try to animate them. you can do

if(pencils) {
  timeline.to(pencils, 1, {x:200});

Question 2:

see above. I think you are asking a lot of mobile / under-powered hardware.


Question 3:

This really isn't related to GSAP at all and I'm not sure what to advise. Seems like there are a lot of variables to consider: cookies, corrupt images etc.


I really wish I could be of more help, but there is very little we can do without seeing actual code and we can't effectively troubleshoot your live site.

  • Like 1
Link to comment
Share on other sites

Oh hey. Thank you. Im glad you liked the animation and thank you for your suggestions.

I've actually thought long on the matter.There are several issues if I made a intro movie instead of sprite animations.


This aproach helps me keep control over every thing in the screen. I can change the phase of the animation of objects, where they animate and how fast they animate. I can change or add things to the general flow of the animations with this aproach but where else in intro movie, we got one result and one result only. 

Another problem is transitioning from intro movie to the actual site. It would be really a deal breaker if I make a intro movie play and overlay objects where I assume they were in animation. Even a slight disposition would shatter the feel that I'm trying to give to the users. And IT would be impossible to position objects for every screen size.

Also, due to current modular type of animation (as in, instead of a whole screen, I animate objects individually) I'm able to give a wide screen animation feel by placing the objects based on screen size. If I take the same animation render as a whole (lets say) 1920x1080 , even the best codec wont make it lighter than 10 mb for few second of animation (I'm assuming we want crisp qualtiy like the currenty displayed). And Im not even adding the later on looping animations in the site.

The only argument (beside what I've written above) is that we are in the age of social media where people watch several 50mb+ videos a day on their accounts. This would have been unacceptable few years back but now, I dont think it would be a much of a issue of bandwith/speed. It would however be an issue if animations stutter like I've mentioned. But I guess I need to tweak further more the code and the Images.


I could make a codepen page but most of my questions are not problems I'm stuck per se. But rather informations I would rather know so I can plan my way. Currently the site runs smoothly and my client is happy. I just would like to sandpaper the possible problems by fixing them before hand.

So. null targets are a problem I see. My thought was to add if(pencil) in to the timeline itself but I guess instead, I would add onComplete: pencil(); to the previous step and call the function which checks and plays the pencil if it exist. Thanks alot for the suggestion.


I'll try to find a solution to the cookie related problem and share with you guys.

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.
  • Create New...