Jump to content
Search Community

Timeline: Skipping one of the .to() from a timeline and play it.

venn test
Moderator Tag

Go to solution Solved by Carl,

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

I have a timelime and I would like to remove one of the .to() from the timeline.

Are these 2 the same? When I tested out the code, it looks the same but I am wondering whether it is true?

 

Or if there is any better ways to remove a .to() / .from() or whatever from a timeline.

 

What I am trying to achieve is that I would like to play my timeline from element2 onwards

 

 

Option 1:

timeline
.to(element1, 1, {y: 640}, 0) <-- Skip this
.to(element2, 1, {scale: 5}, "here")
.to(element3, 1, {scale: 4, 0)
.to(element4, 1, {scale: 3, 0)


timeline.play("here");
 
Option 2:
timeline
.to(element1, 1, {y: 640}, "here") <-- Skip this
.to(element2, 1, {scale: 5})
.to(element3, 1, {scale: 4, 0)
.to(element4, 1, {scale: 3, 0)


timeline.remove("here").play();

 

And I guess this approach works for .reverse() as well? You play a timeline and then in reverse you want to skip one of the .to()

Link to comment
Share on other sites

  • Solution

I would go with option1 in this case as it is the easiest way to skip over the first tween.

 

I'm not sure what option2 is really doing (without seeing a demo) but what you are doing should only remove the "here" label. It doesn't actually remove a tween, nor do I believe it would change the playhead position.

 

I also have an option 3 for you which would support playing forwards and backwards without removing anything. If your timeline is a TimelineMax you can use tweenFromTo() for some pretty cool results

var timeline = new TimelineMax();

timeline
.to(element1, 1, {y: 640}, 0) 
.to(element2, 1, {scale: 5}, "here")
.to(element3, 1, {scale: 4, 0)
.to(element4, 1, {scale: 3, 0)
.add("end")


//tween through entire timeline
timeline.tweenFromTo(0, "end");
//skip over part before "here"
timeline.tweenFromTo("here", "end");
//backwards from "end" to "here"
timeline.tweenFromTo("end", "here");

TimelineMax.tweenFromTo() docs: http://greensock.com/docs/#/HTML5/GSAP/TimelineMax/tweenFromTo/

 

If you need more help or really need to remove the tween from the timeline, please provide a simple demo. Thanks!

  • Like 3
Link to comment
Share on other sites

Whoa! Such pro tip for option 3!

Will definitely keep that in mind.

 

Yes, silly me. Option 2 doesn't work. It just removes the label.

 

I have also tried another approach which is creating a variable to contain the tween and then .add it to the timeline. If we need to skip that tween, we .remove it.

However with .add, .remove it seems that the timeline is altered. 

 

See the Pen xORYjv by vennsoh (@vennsoh) on CodePen

var TL = new TimelineMax();
var tween = TweenMax.to("#test", 1, {y: 50});

TL
.to("#test", 1, {x: 50})
.add(tween, "here");

function myFunction() {
TL.remove(tween).reverse(); <-- Different result
// TL.reverse("here"); <-- Than this
}
  • Like 1
Link to comment
Share on other sites

Thanks for the demo.

 

It appears to be working correctly. Let me explain.

When you remove the tween that handles the y (vertical movement) and then try to reverse there is nothing in place to move the box back up. That tween is gone, so the box just moves horizontally.

 

This can be solved with the proper order of operations.

 

move the playhead back to where the vertical tween begins (resetting the y position), remove the tween, then reverse

TL.pause("here").remove(tween).reverse();

http://codepen.io/GreenSock/pen/gMLBpP?editors=1010

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