Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
sger

killChildTweensOf not working

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

Hello,

 

I'm generating dynamic divs inside a container every time the animations stops i'm generating new divs at some point i want to clear all the divs inside container i'm using 

 

$('#container').empty();

 

but the animation is still running even i call 

 

TweenMax.killChildTweensOf( '#container' );

 

the animation is still running some of the code i'm using

 

function generate(item) {
 
TweenMax.to(item, duration, { delay, scale:range(end, "scale"), autoAlpha:range(end, "opacity"), rotation:getRandomInt(0, 180), ease:Linear.easeNone, generate, onCompleteParams:[items]});
}
 
for (var i = 0; i < 20; i++) {
generate( $("<div />", {id:"item" + i}).addClass("item").appendTo($('#container', this.el)));

 

any help on this?

Link to comment
Share on other sites

Hello and Welcome to the GreenSock Forums!

 

Happy Thanksgiving!

  • Is there a way you can setup a limited

    See the Pen by pen (@pen) on CodePen

    or jsfiddle example so we can see your html, js, and css in context of your issue?
  • Where are you calling the killChildTweensOf() method in your code?
Also have you tried using the document.getDocumentById() to reference the ID on the element to kill the Tween.
TweenMax.killChildTweensOf( document.getElementById('container') );
Once you post your example code we can see where you are calling the killChildTweensOf() method, to track down why its not killing your animations.

 

:)

Link to comment
Share on other sites

what about using killTweensOf() and then run it in a for loop:

 

http://api.greensock.com/js/com/greensock/TweenMax.html#killTweensOf()

 

try this example:

 

See the Pen ukJmE by jonathan (@jonathan) on CodePen

var box = $('#box');
box.click(function(){
    var container = $("#container"),
        i, particle;
    for (i = 0; i < density; i++) {      
            TweenMax.killTweensOf( document.getElementById("particle" + i) );      
    }
});

or you can target the .particle class

 

See the Pen wnrok by jonathan (@jonathan) on CodePen

var box = $('#box');
box.click(function(){      
      TweenMax.killTweensOf( $('.particle') );
});

see if this helps ! :)

  • Like 1
Link to comment
Share on other sites

Thanks for providing the fiddle. You made a little mistake:

 

BAD - do not put # in getElementById()

TweenMax.killChildTweensOf( document.getElementById('#container') );

GOOD

TweenMax.killChildTweensOf( document.getElementById('container') );

See the working version here

http://jsfiddle.net/P5QRP/10/

  • Like 2
Link to comment
Share on other sites

Thank you Carl !

 

I fixed the typo, hash in the getElementById(). Thanks for pointing that out, I guess my brain was still asleep when I posted my answer. I should have waited before I had my Thanksgiving dinner :D

 

Happy Thanksgiving!

 

:)

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.
×