iankco Posted December 4, 2021 Share Posted December 4, 2021 Hi, this is probably a simple thing that I'm not grasping about gsap. I have a tween where I'm animating a title sliding in from the right side of the viewport. Here's the problem: When everything starts, the title is in the middle of the screen. The title element is then animated from the right side of the viewport at x: screen.width using gsap.from('#title', { duration: 2, x: screen.width, ease: 'back.out(1.2)' }). I try to run the same gsap.from tween again but delayed 4 seconds using gsap.from('#title', { duration: 2, x: screen.width, delay: 4 }), but when the second gsap.from tween runs, the title element completely disappears! The question is why does it disappear? My understanding is it should revert back to the center after the first tween runs, and then be ready for the second tween to do the same thing again. Is this a timing issue, or maybe the element winds up outside the viewport again for some reason? I've tried using fromTo and couldn't seem to get that to work either. I know this is something simple but I've been beating my head against the wall trying to figure it out. Can someone explain what's happening here? Thanks in adv. See the Pen abLvYbX by iankco (@iankco) on CodePen Link to comment Share on other sites More sharing options...
iDad5 Posted December 4, 2021 Share Posted December 4, 2021 some hints: You call your script without making sure that the dom is ready, that is always potentially troublesome, works sometime in CodePen, but it isn't a good idea; What you are doing is calling two tween at the same time, the delay is 'inside' the tween initial values might not be calculated again after the delay... For what you want it seems to me calling the same tween with window.setTimeout would be more prudent. Link to comment Share on other sites More sharing options...
iankco Posted December 4, 2021 Author Share Posted December 4, 2021 Ok I tried this: function gsapFrom () { gsap.from('#title', { duration: 2, x: screen.width, ease: 'back.out(1.2)' }) } setTimeout(gsapFrom, 2000) setTimeout(gsapFrom, 6000) So it seems maybe it is a timing thing. So then I tried this: let tl = gsap.timeline() tl .from('#title', { duration: 1, x:screen.width, ease: 'back.out(1.2)' }, '<3') .from('#title', { duration: 1, x:screen.width, ease: 'back.out(1.2)' }) And running 2 from methods on the same timeline, the first from works, but the second still makes it disappear. Is this the same kind of timing issue? Link to comment Share on other sites More sharing options...
Solution Cassie Posted December 4, 2021 Solution Share Posted December 4, 2021 Hey pal! Taking a look at immediateRender will 100% help clear this behaviour up for you. Quote The immediateRender property of from() and fromTo() tweens is one of those things you only find out about when it gives you unexpected results. from() and fromTo() tweens are special as they set immediateRender to true as soon as they are created. This helps especially when creating staggered builds where you don't want elements to appear until scheduled. The one case where it is important to change the default behavior is when you have multiple from()/fromTo() tweens on the same property of the same object. 2 1 Link to comment Share on other sites More sharing options...
Cassie Posted December 4, 2021 Share Posted December 4, 2021 Give that article a read, or watch the video - if you still have questions I'm happy to answer them. (but Carl does a great job explaining so I reckon you're all set!) Here's a demo just in case it also helps. See the Pen NWaGMaJ?editors=0010 by GreenSock (@GreenSock) on CodePen 1 1 Link to comment Share on other sites More sharing options...
iankco Posted December 4, 2021 Author Share Posted December 4, 2021 Yes that's it! I read that article, this is exactly what I was looking for. Completely solves my problem and explains why its working that way. Thank you Cassie! 1 Link to comment Share on other sites More sharing options...
Cassie Posted December 5, 2021 Share Posted December 5, 2021 Brilliant! Happy to help. 🥳 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