Jump to content

Mr Pablo

Animations delayed by 1 second

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 bit of a complex set up, but I am using timelines to build up individual asset animations and then add them all to a master timeline.


The animations play really well, but I have just noticed that if I interrupt the timeline with the slider control, the animation will be behind by 1 second.


Here is my slider code:

        min: 0,
        max: duration,
        slide: function(event, ui) {
            masterTimeline.seek(ui.value / (duration / 1000));

In this example, "duration" is 10000ms (10 seconds)

Link to comment
Share on other sites

It would help to see an example. I doubt you need to create a complex timeline or anything to replicate the problem. From looking at your code its not enough to know if maybe your timeline has a duration other than 10s.


CodePen works great for this: http://forums.greensock.com/topic/9002-read-this-first-how-to-create-a-codepen-demo/


I think you should be doing seek(ui.value/1000) to seek to a valid time as it seems to work in this rough mock up: http://codepen.io/GreenSock/pen/a92d09249a596a84b4974f730d91e8ef/

Link to comment
Share on other sites

Hmm, even after following the CodePen and hard coding the max value to 10000 and using ui.value / 1000, my slider is still 1 second behind.


due to the sensitivity of the code, could I send you the file for you to look at?

Link to comment
Share on other sites

It would be much better if you provided a reduced test case via codepen


Most often that process alone reveals the issue and you have the benefit of multiple people helping.


If codepen isn't feasible then publicly posting a zipped version with sensitive assets and code removed is the next best option.


I'm confident the time you invest in providing such reduced samples will get quicker results than me trying to debug your complex code on my own (which unfortunatley I won't be able to do until much later in the day).

  • Like 1
Link to comment
Share on other sites

OK, so this is my CodePen, replicating the animation I have made.


See the Pen ugjnF by anon (@anon) on CodePen


The animation lasts 10 seconds, and if you let it play on it's won, you will see the image drops down and there will be some margin on the top and left sides.


BUT, if you grab the slider control and scrub to the end of the slider range, the animation is 1 second behind, with the image not fully dropping down into place by the time you reach the end of the slider.


Also, the text is set to animate over 5 seconds, with various console logging, you can see that when using the slider, the text ends after 6 seconds!


One last thing to add to this. Whilst letting the animation play on it's own is fine, it seems to take about 0.5-1 second for the animations to actually start. Is there a reason for this?


EDIT - Fixed link

Link to comment
Share on other sites

Hey Paul,


Thanks for providing tht codepen but there are some things I've noted.


You're not adding neither jQuery nor GSAP in the sample. The domain for the image appears as "localhost" which is no help at all because we can't see the image:

backgroundImage: "url('http://localhost/image)/"+ d.src +"')"

Finally there is no slider anywhere, so we can't replicate that neither.


Please solve those issues in order to get a look at something closer to the real app without bloating the code too much.



Link to comment
Share on other sites

Hmm odd, I definitely changed those!



See the Pen qDcGA by anon (@anon) on CodePen


EDIT - Rodrigo, could you kindly edit your post to remove the localhost reference? Just is includes a sensitive name :P

Link to comment
Share on other sites

Thanks for the codepen demo, it certainly helps.


It seems your timeline does not have the duration() you are assuming it has.


Your duration var has a value = 10000ms but the masterTimeline.duration() is 11 seconds.


Please view the logs here: http://codepen.io/anon/pen/FovxJ


If you use the actual masterTImeline.duration()*1000 as your max slider value it should work.


Does that fix it for you?

Link to comment
Share on other sites

Where is that extra 1 second coming from? I'm guessing that is also the culprit for the delay at the start?

Link to comment
Share on other sites

this tween has a position parameter of 1 second (last param) - it gets added at a time of 1


 timeline.to($('#asset_' + d.type + '_' + d.id), f.duration / 1000, { delay: f.wait / 1000, ease: f.easing, opacity: f.opacity, rotation: f.angle, scaleX: f.scaleX, scaleY: f.scaleY, x: x, y: y }, 1);

  • Like 1
Link to comment
Share on other sites

Oh wow, how did I not see that! No idea why that was in there :-/

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.