Basically, I have a loop here in this codepen that cycles through a spritesheet in order to animate it. That spritesheet is the flying bird you see. Once the spritesheet runs through fully once, I was attempting to use "seek" in order to loop it so that only the flapping wings loop, rather than the entire animation. The function "loop" is called upon at the end of this animation to do this.
This worked properly before this timeline "bird_sprite" was nested inside of the timeline called "animation". Once it was nested, while the loop function is still called, it doesn't actually affect the "bird_sprite" animation in any noticeable way, so you'll see that the wings simply stop, mid-flight. I'm guessing this is some sort of scope issue, but I really don't know
Any help would be appreciated, and try to talk in laymans terms -- I'm a designer with some coding chops so I'm not as well-versed as most on here. Thanks in advance.
(I'm using array variables here, because the live site actually has multiple bird animations running simultaneously)
function bird_sprite() { // this is just the white bird, so this is nested in the next timeline "animation"
bird_takeoff_sprite[bird_number] = new TimelineMax({ repeat: 0, onComplete:loop }); for (var i = 0; i < spritecount; i++) { bird_takeoff_sprite[bird_number].set(image[bird_number], { left: "-" + (i*spritesize) + "%" }, i*duration); } <!--this loops the flapping wings but not the whole animation--> function loop() { bird_takeoff_sprite[bird_number].seek(.8); console.log('loop'); // this proves the loop function runs } return bird_takeoff_sprite[bird_number]; } // this is the full animation animation[bird_number] = new TimelineMax({ repeat: 0, paused: true }); bird_container = $(this); animation[bird_number] .add( bird_sprite()) // nesting the sprite animation of the bird .to(bird_container, 3, { left: "-300%", width: "+=180%", height: "+=200%", bottom: "+=10%", ease:Sine.easeIn}, .8); }); }; }(jQuery));
