Handling delays in opacity

[wojmirek]

Hello,

is there better way to handling delays than setTimeout ?

The smooth fading doesn't work for me, if I move the .fromTo to the timeline.

 

  gsap.fromTo("#Group", {opacity: 1}, {duration: 1, delay:1.4, opacity: 0})
    setTimeout(()=> {
      gsap.timeline()
      .set("#Group", {opacity: 1})
      .from("#Path_1", {duration: 1, x: -200, opacity: 0},)
      .from("#Path_2", {duration: 1, x: -150, opacity: 0}, "-=0.8")
      .from("#Path_3", {duration: 1, y: 50, opacity: 0}, "-=0.5")
      .from("#Path_4", {duration: 1, scaleX: 0, scaleY: 0, transformOrigin: '50% 50%'}, "-=0.5")
      .from("#Path_5", {duration: 1, y: 50, opacity: 0}, "-=1")
      .from("#Path_6", {duration: 0.5, x: -30, opacity: 0}, "-=0.5") 
    },2500)

SVG looks like this:
 

<svg .....>
  <g id="Group">
    <path id="Path_1"></path>
	...
   </g>
</svg>

 

Thank you.

[Cassie]

Oh my gosh yes. Many many ways.

The whole purpose of GSAP is to be able to precisely time animations. If you ever need to use a setTimeout that's a sign that there's something wrong!

 

// add delays to timelines or tweens
gsap.timeline({delay: 2.5})

 

You can also add that tween to the timeline and use the position parameter - like you're using it in tweens in your timeline already.

I'm not quite certain what you're doing here though. It looks like you're smoothly fading the group out, then immediately setting it to opacity 1 in the timeline? Is that what you're intending to do? Maybe that's what is causing unexpected behaviour?

A minimal demo would help for us to be able to give you the best advice.
 

[wojmirek]

Thank you for your answer.

 

The problem is mainly that first I want the animation to fade out after some delay. Then I want the elements to appear gradually. 

I solved this by creating two timelines, and when one completes, the other starts. You can see an example:

See the Pen LYdXWBB by wojmirek (@wojmirek) on CodePen

 

Unfortunately, it sometimes happens that the animation fades and no more elements appear. I don't understand why this happens. I haven't found any logic in when it happens, but it happens sometimes. Any idea why this might be happening? Could it possibly be solved even better?

 

EDIT:

I'm just wondering: The first animation takes 1.4s + 1s = 2.4s and the second animation starts after 2.5s ... Could it be that there is some unexpected delay and the animation remains hidden because of that?

 

EDIT2:

If I use the ">" positioning call, the second animation does not wait for the end of first animation, but starts immediately.

masterTL.call(fadingTL, null, this )
masterTL.call(animTL, null, ">" )

 

[Cassie]

Ah ok, yep. So you're using 'from' tweens which are immediately rendered at their starting values.

 

So you're fading the 'group' element at the beginning - but all the elements inside have already been set at opacity 0 so you don't see the fade happen

 

 

[wojmirek]

Thank you for the explanation.

 

But I can't think of a way to do it using immediateRender: false. I need to hide it first and then show it again, so I would imagine in one timeline something like this, but it doesn't work the way I would like:

gsap.timeline()
      .to("#Path_1", {opacity: 0, duration: 1})
      .to("#Path_2", {opacity: 0, duration: 1}, "<")
      .to("#Path_3", {opacity: 0, duration: 1}, "<")
      .to("#Path_4", {opacity: 0, duration: 1}, "<")
      .to("#Path_5", {opacity: 0, duration: 1}, "<")
      .to("#Path_6", {opacity: 0, duration: 1}, "<")
      .set("#Path_1", {opacity: 1})
      .set("#Path_2", {opacity: 1})
      .set("#Path_3", {opacity: 1})
      .set("#Path_4", {opacity: 1})
      .set("#Path_5", {opacity: 1})
      .set("#Path_6", {opacity: 1})
      .from("#Path_1", {duration: 1, x: -200, opacity: 0, immediateRender: false},)
      .from("#Path_2", {duration: 1, x: -150, opacity: 0, immediateRender: false}, "-=0.8")
      .from("#Path_3", {duration: 1, y: 50, opacity: 0, immediateRender: false}, "-=0.5")
      .from("#Path_4", {duration: 1, scaleX: 0, scaleY: 0, transformOrigin: '50% 50%', immediateRender: false}, "-=0.5")
      .from("#Path_5", {duration: 1, y: 50, opacity: 0, immediateRender: false}, "-=1")
      .from("#Path_6", {duration: 0.5, x: -30, opacity: 0, immediateRender: false}, "-=0.5") 

 

My solution on CodePen works, but sometimes it happens to someone that the animation disappears for the reason you described.

Do you think it helps to just increase the delay between the first and second animation from 2.5 to 3 seconds?

[GreenSock]

I'm not entirely clear on what you're asking, @wojmirek, but if you still need help please provide a minimal demo along with a very clear question about it and we'd be happy to help. 

 

By the way, you could significantly reduce the amount of code you wrote. For example: 

// BEFORE
.to("#Path_1", {opacity: 0, duration: 1})
.to("#Path_2", {opacity: 0, duration: 1}, "<")
.to("#Path_3", {opacity: 0, duration: 1}, "<")
.to("#Path_4", {opacity: 0, duration: 1}, "<")
.to("#Path_5", {opacity: 0, duration: 1}, "<")
.to("#Path_6", {opacity: 0, duration: 1}, "<")

// AFTER
.to("#Path_1, #Path_2, #Path_3, #Path_4, #Path_5, #Path_6", {opacity: 0, duration: 1});

Or just put a class on those elements so you can do this: 

.to(".your-class", {opacity: 0, duration: 1});

Again, if you still need help just post a CodePen with a clear question. 👍