Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
kc@polygonrausch.de

Add tween to a timeline by progress not seconds

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

Hi,

 

 

Intro:

I'm currently producing a sitebar banner, wich will animate depending on scroll position (percentage)

of the website.

 

So the Banner should trigger animation depending on this percentage or scroll position.

So the idea was having a timeline fro, 0 to 1 (0 - 100%)

Adding tweens there, and when the scroll position reaches theses position trigger these animations.

 

i would like to add tweens to a timeline.

But instead of adding them at a certain time, i would like to add them at a certain progress of the timline.

 

var mytween = TweenMax.to(...)

 

e.g. tl.add(mytween, 25%)

 

Is this possible in any way?

 

Thank you

 

Best

 

Carsten

Link to comment
Share on other sites

Thinking out loud.

Of course i could make the timline have like a total of 10 Seconds. and then place the animations accordingly.

But maybe there is another direct was ?

Link to comment
Share on other sites

A timeline's duration is solely dependent on its child animations (it's like a wrapper). So yeah, you could just decide that your timeline is gonna be 100 (or 10 or whatever) seconds long and do the math to figure out where to place things percentage-wise. 

var totalDuration = 100;
tl.add(myTween, totalDuration * 0.25); //25%

 

But of course that assumes you'll make sure that it's populated in a way that actually makes it 100 seconds long. So, for example, if your last animation that you put in is 2 seconds long, you'd need to place it at 98 (because 98+2 = 100). 

 

Also keep in mind that every animation has a progress() method, so you can easily jump to 25%, for example, like:

tl.progress(0.25);

 

Does that help at all?

  • Like 1
Link to comment
Share on other sites

Hi Jack,

 

thank you for you answer, this sure helps.

So thats what i did know..adding a "fake" animation at the 10 second to span up the timeline an the placing the other timeline and tweens where i need them.

 

i'm using the progress to "scrolL" through with the mouse as the scroll position moves on.

 

Unfortanatly what i came about knwo is that its mor like a seek, you can go forward and backwards, i know have to finde a way instead of scrolling throug the "sub" timelines, to play them, an ignore the scrolling for that period ;-)

 

But Greensock is such a great tool, so there will sure be a solution for this.

 

Thanks again 

Link to comment
Share on other sites

Hm, I didn't quite understand that last response - did you still have a question we could help with? 

 

Have you looked into ScrollMagic? I think that's built to handle things like this. We didn't author that tool, but it uses GSAP under the hood for the animations, so it should be relatively easy for you to tap into :)

Link to comment
Share on other sites

Hi Jack,

 

no questions,

Thanks for your great help.

 

Scroll magic i also tried out already.

Nice tool. 

 

Maybe now that i know the different approaches i will retry scrollmagic again.

 

Cheers

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