Jump to content
GreenSock

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

Tweening from one label to another with a duration?

Recommended Posts

Hello

 

I have a simple timeline set up with 6 steps, no nested timeline or anything, and each step has a label.

 

At the moment I can tween to and from labels (while watching the animation play out in either direction) by using tweenFromTo. The problem with that is some steps are quite long, and I'd like to go from one step to another in a defined duration.

 

Is this possible? For example, can I tweenFromTo label1 to label3 within X amount of seconds?

 

The closest thing I have come across is setting a timescale to a high number, but that's not really a solution and it'll be inconsistent as the time between each step varies quite a bit.

 

Thanks for any help

Link to comment
Share on other sites

This seems to work. Is it really this simple?

	$("li.anim-step-one").on("tap", function (e) {
		e.preventDefault();
		tl.tweenTo("label1").duration(.5);
	});
	$("li.anim-step-two").on("tap", function (e) {
		e.preventDefault();
		tl.tweenTo("label2").duration(.5);
	});
	
  • Like 2
Link to comment
Share on other sites

Exactamundo!

Link to comment
Share on other sites

Any idea of why when I nest a timeline with timelinelite, nested timelines play when they're called, but with timelinemax, they play right away?

 

It all relates to this code as tweento doesn't work with timelinelite, only timelinemax, so I'm not sure how to proceed :/

	//Animation
	var tl1 = new TimelineMax();
	tl1.to(animContainer, 0, {autoAlpha: 1}).call(pauseLine).addLabel("label1");
	tl1.to(dottedLines, .5, {autoAlpha: 1}, .3).call(pauseLine).addLabel("label2");

	var tl2 = new TimelineMax({repeat: -1});
	tl2.to(dottedLines, 1, {rotation: "+=360", ease: easeNone})

	var masterTimeline = new TimelineMax();
	masterTimeline.add(tl1, 0)
	.add(tl2, 0.2);

	//Animation pause
	function pauseLine() {
		tl1.pause();
	}
	
	//Jump to sections
	$("li.anim-step-one").on("tap", function (e) {
		e.preventDefault();
		tl1.tweenTo("label1").duration(1);
	});
	$("li.anim-step-two").on("tap", function (e) {
		e.preventDefault();
		tl1.tweenTo("label2").duration(1);
	});
Link to comment
Share on other sites

hmm, I can't think of why TimelineMax would behave differently than TimelineLite.

It's just a bit hard to look at a block of code and imagine what isn't behaving the way it should.

Nothing jumps out at as troublesome in the code you posted.

 

It would be super helpful if you could reduce that as much as possible and create a very simple CodePen demo that we can edit and test.

Here is an example you can fork: http://codepen.io/GreenSock/pen/hbCir

 

If you aren't familiar with CodePen read /watch this: http://greensock.com/forums/topic/9002-read-this-first-how-to-create-a-codepen-demo/

 

Any tweens or function calls that aren't necessary to illustrate the problem please remove. And also please explain the desired behavior as clearly as you can. 

The quicker we can decipher what's going on the quicker we can provide a solution.

 

Thanks.

 

ps. I noticed you are using call() to call a function that paused your timelines. It's best just to use the addPause() method.

http://greensock.com/docs/#/HTML5/GSAP/TimelineLite/addPause/

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