Jump to content
Search Community

How to have two lines of timeline execute at same time?

kbeats test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

So this is a really simple question and I'll probably feel really dumb once finding out the answer - but how do I get two lines of the same timeline to execute at the same time? I built a really crude codepen as an example - 

See the Pen bxoYrG by kbeats (@kbeats) on CodePen

 

I have two objects that I want to tween to different values, but I want them to begin their timeline at the same time. Do I need to make two separate timelines instead of having them both on the same one? 

 

 

Thanks!

See the Pen bxoYrG by kbeats (@kbeats) on CodePen

Link to comment
Share on other sites

Thank you, that is awesome! I guess I should have built my codepen to match my exact problem, however. In my project I'm using appendMultiple to have several objects move on each line, I've tried adding this method above to my project and it doesn't seem to work? I'm not sure what I'm doing wrong. 

 

See the Pen bxoYrG by kbeats (@kbeats) on CodePen

 

Link to comment
Share on other sites

  • 4 years later...

Hello, this is an old topic and I am new to GSAP but, I just wanted to put it out there that this information is pretty hard to find in the documentation. I think the "Timeline Tip" blogpost(?) is the only place I could find this. And that was after a search engine query that pulled up this thread. I can not find any references to the positional paramater mentioned in the gsap.to() page of the docs.

 

I made an account to say this, but I look forward to being a part of the GSAP forum. Thanks Greensock team for all you do!

Link to comment
Share on other sites

Hi @twizzay. gsap.to() docs shouldn't have any mention of a position parameter because it can't accommodate one - it only creates a tween. The position parameter is only relevant for placing things into timelines. So the timeline .to() method does indeed have quite a lot of information about it: 

https://greensock.com/docs/v3/GSAP/Timeline/to()

 

There's also a whole blog post about it here: 

 

What phrases were you searching for? We definitely want to make sure important information is easily surfaced, so we welcome any specific advice you'd like to offer. 

Link to comment
Share on other sites

Oh snap! well that helps a lot! Thanks for clearing that up.

 

I had seen another forum post where an admin used it in an example and I was trying to determine what it was. I didn't know what to call it so I was just looking under the .to() section of gsap.

 

The search query I used to pull up this article was something a lot like the title. I think it was: "play two timelines at the same time with gsap"

 

Maybe since they are so similar there could be a "similar/related articles" div that holds links like that? Linking those together in your sitemap might also help SEO. Thats just my thought. Thanks for your help!

Link to comment
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.
×
×
  • Create New...