Append to DOM element within onComplete()

[musemega]

Hi all,

 

I'm a noob here and have really been enjoying creating awesome experiences with GreenSock! 

 

However, I'm trying to get past an issue that you might be able to help me with.  After a tween of a container width, I'm trying to add an inline div to the newly created space.

 

The new div does not immediately get added to the space.  On the next add action (that creates additional container width), the previously created div appears.

 

Am I hooking the wrong method?

 

Thanks! 

TweenLite.to($('.list-item-container'), 1, {
  width: $('.list-item-container').width() + 253,
  delay: 0.25,
  onComplete: function () {
     var _item = document.createElement('div');
     $(_item).addClass('list-item');
     $('.list-item-container').append(_item);
  }
});

[Jonathan]

Hello musemega, and Welcome to the GreenSock Forums!

 

Its hard to imagine what the behavior your seeing.

 

Could you also post the HTML markup your JS is referencing?

 

Or ... Better yet... Here is a link to a video tut by GreenSock describing how to set up a codepen demo example:

 

http://forums.greensock.com/topic/9002-read-this-first-how-to-create-a-codepen-demo/

 

It would be helpful to see your code in context so we can see the behavior you describe.

 

Thanks:)

[musemega]

That was a useful exercise jonathan.  Thanks!

 

Here's a jsfiddle (jsfiddle.net/cPxqL/) that works!  (btw - codepen.io does not handle this simple code)

 

However, this doesn't work within the visual studio asp.net mvc environment.  In that environment, using a lISExpress server, the page loads, the first element shows up fine, but subsequent added elements require two clicks of the "add" button to display. 

 

Strange, but at least I have another lead to explore.  I'll report back when I find out.  Or, if you have seen this please let me know what's up!

 

Thanks again. 

[Jonathan]

I got your jsfiddle working..

 

Working example: http://jsfiddle.net/cPxqL/7/

 

Look like you were binding the form submit event.. but you need to just bind a click event to the input submit button, not the form submit event handler:

$('form input[type="submit"]').click(function (e) {
        e.preventDefault();

        TweenLite.to($('.list-item-container'), 1, {
            width: $('.list-item-container').width() + 253,
            delay: 0.25,
            onComplete: function () {
                var _item = document.createElement('div');
                $(_item).addClass('list-item');
                $('.list-item-container').append(_item);
            }
        });
});

You wont need the form tag around the input submit if all your using the input submit is for triggering the event to append an element. In that case you can use any element to bind a click event to.

 

Also you can write your onComplete append like this: http://jsfiddle.net/cPxqL/6/

// Instead of these 3 lines of code
// var _item = document.createElement('div');
// $(_item).addClass('list-item');
// $('.list-item-container').append(_item);

// You can just have one line using the jQuery appendTo() method
$('<div class="list-item" />').appendTo('.list-item-container');

And a side note.. its best practice when writing CSS properties within GSAP, to use camelCase .. so "font-size" would become "fontSize" or fontSize without the quotes. This is so you can prevent parsing errors.

 

Hope this helps!