Multiple animation with one element

[sheep0989]

I'm trying to create two separate animations on the same element. 

What I'd like it to do:

 

Fall in from the top of the screen...Then after that animation is completed, I want the same element to play another animation, but loop it and never repeat the first animation. Here is what I thought I could do.

 

TweenMax.from(".section1-circle1", 1.0, { ease: Bounce.easeOut, y: -822}, "+=0.5", {repeat: -1, yoyo:true, y: 15});

 

Any help would be nice. 

[PointC]

Hi sheep0989 

 

Welcome to the GreenSock forum.

 

You could do that with two tweens and delay the second one until the first one is finished (or longer):

TweenMax.from(".section1-circle1", 1.0, { y: -822, ease: Bounce.easeOut });
TweenMax.to(".section1-circle1", 1.0, { y: 15, repeat:-1, delay:1, yoyo:true });

But I'd recommend a timeline:

var tl = new TimelineMax();

tl.from(".section1-circle1", 1.0, { y: -822, ease: Bounce.easeOut });
tl.to(".section1-circle1", 1.0, { y: 15, repeat:-1, yoyo:true });

If you have other questions, please make a CodePen so we may better assist you.

 

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

 

Happy tweening.