using multiple labels and .from/.to in a timeline

[timdt]

 

Codepen doesnt work btw dont know why..

 

Hey guys what i want to do: animate them out of the screen then animate them all 3 at once back.

How do i do this? i commented out the .from because it will do that first and then the rest of the code.

Why is this?
 

Ty guys

See the Pen rGxbOZ by timdt (@timdt) on CodePen.

[PointC]

Your CodePen doesn't work because jQuery wasn't loaded.

 

I'm not sure I understand your question. Are you talking about bringing all the boxes back to x:0 and autoAlpha:1 at the end? If that's the case, you can target all three with a .to() tween at the end like this:

 

.to([blokkie1, blokkie2, blokkie3], 2, {x:0, autoAlpha:1, ease:Power1.easeIn});

 

Is that what you meant?

 

Happy tweening.

[timdt]

@PointC What i am trying to achieve is that the 3 blocks all go out of the border ( out of vieuw ) to opacity 0. and return to their starting position all at the same time. I will try your code and see what happens   Also will do a quick google search on how to include jquery on codepen.

 

thanks for helping me out once again <3

[Sahil]

@timdt can you instead post drawings of what you are doing? I looked at your question yesterday it sounded very simple but when I looked at your pen you are using too many tweens for something that sounds very simple. I think you will get answer a lot quicker if you post mockups at different time frame.

[timdt]

@Sahil Yeah sure!  If u just have a couple of minutes. will draw it out for you and i will post a codepen of what i have currently.

[timdt]

See the Pen mBPKOB by timdt (@timdt) on CodePen.

 

Above is the version i do not want. For some reason it puts the .from first.

 

This is the second version without the second.add that does work. In this pen i added a new element. I want this to happen not the the new element but to the blocks. i want them to come back from out of vieuw back to their starting positions. @Sahil

See the Pen wrGXdx by timdt (@timdt) on CodePen.

 

 

Sketch :

[Sahil]

Sorry but why does your blocks creepily crawl in middle like bugs? Is that intended behavior?

[timdt]

@Sahil ahha yeah was just practicing some sequencing. It is intentional. 

[Sahil]

Have you checked tutorial about GSAP timeline, I think it will help you.

 

 

 

 

[PointC]

Add this tween to the end of your timeline and all three blocks will go back to their starting positions.

 

.to([blokkie1, blokkie2, blokkie3], 2, {x: 0, y:0, autoAlpha: 1, ease:Power1.easeOut})

 

Happy tweening.