Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Vijay Seetaram Raju

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

Recommended Posts

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 by Vijay Seetaram Raju
Link to comment
Share on other sites

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!

  • Like 2
  • Thanks 1
Link to comment
Share on other sites

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,,   

Link to comment
Share on other sites

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

 

  • Like 2
Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×