Jump to content
GreenSock

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

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

Recommended Posts

 

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

Link to post
Share on other sites

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.

:)

  • Like 1
Link to post
Share on other sites

@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

Link to post
Share on other sites

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

Link to post
Share on other sites

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

Link to post
Share on other sites

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 :20170920_103301.thumb.jpg.891a971b5bc77321f0c21c0ad3165ec9.jpg

Link to post
Share on other sites

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

Link to post
Share on other sites

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

 

 

 

 

  • Like 1
Link to post
Share on other sites

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.

:)

  • Like 1
Link to post
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.

×