Jump to content
Search Community

TimelineMax tweenTo and tweenFromTo duration

summer 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

Hello,

 

First of all, thanks for a great product. I've been using TweenMax for many years with AS3 and have now switched back to Javascript. So glad to see I still have TweenMax with me!

 

Now to the question:

I'm creating a "scroller" that uses either mouse or touch input to scrub through a set of timelines. This works well, but I would like to create the inertia scroll effect on touch devices as well. I can calculate the ending frame on touch release but when using tweenTo it always goes to the frame within the same duration.

 

Is it posible to set a duration / speed on tweenTo / tweenFromTo? I checked to docs and couldn't find any info on that.

 

Also, is it posible to create a main timeline for all my timelines to run in parallel?

 

//Summer

Link to comment
Share on other sites

Hi and Welcome to the GreenSock Forums.

 

For your inertia tweens of your timeline there are a number of ways you can approach this.

 

First its important that you understand that a TimelineMax can have its time() and progress() values tweened. Using TweenLite.fromTo() you will be able to tween from any point in your animation to any point in your animation using the duration and easing you want.

 

For a quick demo of tweening the timeScale and progress of a timeline in as3 look at the demos here: http://www.snorkl.tv...d-flexibillity/

 

I didn't know exactly what you meant by the ending frame of your animation. I thought perhaps you may have meant label. Below is a little demo that illustrate tweening from one label to another by figuring out the time of each label and creating a tween that tweens the time() of the timeline.

 

check this out:

http://jsfiddle.net/...bassador/e9Vay/

 

The timeline will first play through at normal speed and once it completes a segment of the timeline will play much faster with easing.

 

Even if you are not using labels, this should show you how to tween between time1 and time2 and set your own duration and ease.

 

 

Also note, that when using someTimelineMax.tweenFromTo() you can apply easing. This alone may give you a closely simulated inertia effect, but as you have found, the duration will not be changed.

 

tl.tweenFromTo(4, 10, {ease:Power4.easeOut})

 

If you really want the velocity of the flick to translate to the duration of the tween through your timeline, you may have to wait for the ThrowProps plugin to get ported to JavaScript. Its in the works.

 

Hopefully some of these ideas get you closer to a solution.

 

--

 

As far as having multiple timelines play in parallel. Sure, you can nest as many timelines as you want inside any timeline

 

masterTimeline.insert(timeline1);
masterTimeline.insert(timeline2);

 

both timeline1 and timeline2 will have a start time of 0 in masterTimeline.

Link to comment
Share on other sites

  • 2 weeks later...

Hello again and thank you for that detailed description. I managed to make it all work quite well thanks to your input. I couldn't work with a master timeline but had to add all timelines to an array and then animate them when scrubbing back and forth.

 

I don't know if it's a bug, but if a sub timeline is added to a master timeline with a delay, then once I scrub past it's start frame and back (before the sub timeline's first frame) again, position, scale, and rotation is overwritten with a transform translate resetting my initial values. I fixed by adding a "key frame" on frame 0 setting all my start values. I don't know if that makes any sense (and if it's by design?).

 

In any case it works now and that's great :-)

 

Thanx again.

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