how to add delay in gsap timeline animation, to start after completion of barba js page transition.

[Vijay Seetaram Raju]

hi,

my plan is to play barba.js page layers transition first  - and - then animation for a svg logo.

but both are start at a time, have tried delay options, but it's not working.

 

or another option i am trying too.. first logo animation plays - and - then the page layer transition. 

See the Pen vYJWRvr by weavertext (@weavertext) on CodePen

Edited November 2, 2021 by Vijay Seetaram Raju

[Cassie]

Hi there Vijay,

You'll need to pause your SVG timeline and they play it when the page transition ends. We have onComplete callbacks , and timeline methods for that purpose.

Check it out!
 

  var tl = gsap.timeline({
    onComplete: () => {
      console.log("complete");
      animateOne.play()
    }
  });

let animateOne = gsap.timeline({paused:true});

You also have a lot of console errors, so make sure you have your paths named correctly.

Happy tweening!

[Vijay Seetaram Raju]

hi Cassie,

Thank you so much, have cleared console errors, and tried your lines too,,

and try many more options too.

 

var animateOne = gsap.timeline();
animateOne.startTime(4);
animateOne
.from ("#blab", {x: 100, opacity: 0, duration: 1})

and added a start time too, Can I write like this?

have updated in same example of codepen,,

and before - page transition, am try to hide the logo completely ,, for that have added an opacity to "ID".

but still initially the logo is appearing!!

can you please suggest me some thing to hide complete svg for couple of seconds,,   

[Cassie]

Oh sorry mate, I should have made that more clear.

The callback would go in the timeline for your page transition, like this. 

See the Pen rNzYbbd?editors=0110 by GreenSock (@GreenSock) on CodePen

You can also add delays to timelines. I added one for you in the pen. In terms of the opacity issue, I would probably just hide the element with CSS and then fade it in. Nice and simple.

I haven't actually heard of startTime before but it looks like it's to control the time for animations which are nested inside timelines. So I don't think it's the right choice here.

Gets or sets the time at which the animation begins on its parent timeline

 

[Vijay Seetaram Raju]

have missed simple logic,, thank you so much cassie,