Title disappearing when running gsap.from twice

[iankco]

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

[iDad5]

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.   

[iankco]

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?

[Cassie]

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. 

 

 

[Cassie]

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

 

[iankco]

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!

[Cassie]

Brilliant! Happy to help. 🥳