onRepeat not working right

[bethios 0 Likes (Newbie)]

I will master the onRepeat one day! 

 

I'm trying to make ingredients fall and then vanish when they do before they repeat again (so they aren't all just chilling at the bottom of my screen)

    function erase(){
        TweenLite.set(this, {
            scale: 0
        });
    }

 

    var food = ['.meat', '.pepper', '.nori', '.toppings']

    for(var i = 0; i < food.length; i++ ){
        ing.to(food, 1, {
            rotation: 360, 
            x: '+=30',
            y: yTo,
            scale: 1,
            repeat: -1, 
            repeatDelay: time * food.length,
            ease: Power1.easeIn,
            onRepeat: erase
        }, time * i ,'start');
    }

 

Is it that the onRepeat doesn't fire until after the repeatDelay? Would it be smarter to just use a staggerTo?  

[Sahil 2,655 Likes (Superhero)]

Ya onRepeat fires after repeat delay. I am not sure how staggerTo will fit into this scenario.

 

I think you can use timeline with set call at the end, or use onComplete callback of the tween inside timeline.

 

See the Pen gKarep?editors=1010 by Sahil89 (@Sahil89) on CodePen

 

[bethios 0 Likes (Newbie)]

Here's basically what I'm trying to achieve

1) First item in array falls. 

2) When it completes the fall it vanishes

3) It waits until all the other items have fallen in their turns to fall again

 

help?

[Sahil 2,655 Likes (Superhero)]

Ya same approach could work by using staggerTo tween instead.

 

See the Pen eKpBOW?editors=0010 by Sahil89 (@Sahil89) on CodePen

 

[bethios 0 Likes (Newbie)]

thank you!