t.marty Posted November 22, 2019 Share Posted November 22, 2019 Hi Everyone I am testing GSAP 3 and don't understand how promises work. The Pen in attached shows my implemention but as you can see both animations run on the same time. Maybe it has something to do with how I chain the timelines using add()? See the Pen pooBEKg by Dollique (@Dollique) on CodePen Link to comment Share on other sites More sharing options...
OSUblake Posted November 22, 2019 Share Posted November 22, 2019 First, there have been updates to how promises work with gsap, so you should this file until the next version is released. https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/gsap-latest-beta.min.js Is there a reason you are trying to use promises? If you don't have a good reason for using promises, I would recommend staying away from them. It's much easier to use callbacks, add(), or call(). One thing to keep in mind when using a promise is that it can only run once. You can't run a promise again. The reason your functions run at the same time is because your baseAnimation function doesn't return anything, so the timeline is empty, and you are calling your repeat function immediately. It would need to be like this. See the Pen 119c690411532f8831631ede2c54c4d7 by osublake (@osublake) on CodePen 4 Link to comment Share on other sites More sharing options...
t.marty Posted November 22, 2019 Author Share Posted November 22, 2019 Thank you @OSUblake I am just trying out different possibilities to work with timelines and promises sounded 'promising' For now I will try to use add(), call() and also onComplete to achieve what I need. The reason I tried out promises was that it looked easier to use than onComplete. One last question: You said it will only run once, does this mean it also doesn't run on 'repeat'? Link to comment Share on other sites More sharing options...
OSUblake Posted November 22, 2019 Share Posted November 22, 2019 3 minutes ago, t.marty said: I am just trying out different possibilities to work with timelines and promises sounded 'promising' Haha. Don't get me wrong, promises are useful in certain situations, but you usually don't need to worry about them for most gsap related tasks. 6 minutes ago, t.marty said: You said it will only run once, does this mean it also doesn't run on 'repeat'? In this situation, the promise will only run after the timeline repeats 10 times. It won't run on every repeat. var master = gsap.timeline({ repeat: 10 }) .add(baseAnimation()) .then(() => repeat()); In this situation, if you try to restart the timeline, it will cause an error because master is actually a promise object, and not a timeline object. var master = gsap.timeline({ onComplete: restartAnimation }) .add(baseAnimation()) .then(() => repeat()); function restartAnimation() { master.restart(); // error } 2 Link to comment Share on other sites More sharing options...
t.marty Posted November 22, 2019 Author Share Posted November 22, 2019 Okay thanks a lot for the explanation. Now you talked about using add() or call() instead, but I see onComplete as the only other option to call a function when another function is finished. I tested using add() and it always starts the animation immediatly. Is this the correct behavior or am I just doing it wrong? EDIT: I am just re-reading the article you sent and it seems like there is a solution. I will try https://css-tricks.com/writing-smarter-animation-code/ Link to comment Share on other sites More sharing options...
OSUblake Posted November 22, 2019 Share Posted November 22, 2019 30 minutes ago, t.marty said: I tested using add() and it always starts the animation immediatly. Is this the correct behavior or am I just doing it wrong? Remember to return the animation. It will run immediately if you don't. 2 Link to comment Share on other sites More sharing options...
Robbert89 Posted January 28, 2020 Share Posted January 28, 2020 (edited) Off-topic: by reading this i realized i could this: - constructor.js file const animations = { caseOut: function(content, background){ let tl = new TimelineMax(); tl.to(content, 0.4, {y: -20, autoAlpha: 0, stagger: 0.05}) tl.to(background, 0.4, {width: '100%', height: '100vh'}) return tl; }, // Other animation functions here... }; module.exports = animations; - elsewhere.js file let done = this.async(); let tlControl = animations.caseOut(); tlControl.play().call(done); or if you want: tlControl.play().call(this.async()); I tried to async() with .then(), but that didn't work. Thanks @OSUblake i saw you posted an article somewhere about Promises, will find and read it Edited January 28, 2020 by Robbert89 edit: add let to call timeline once, then use let to control playhead Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now