Jump to content
GreenSock

Kaos1337

Synchronous GSAP transition don't work

Recommended Posts

Hi guys,

 

I am trying to solve a simple transition with GSAP, but unfortunately it doesn't work and I don't know why...
Setup is two divs, both { width: 100%, height: 100% } and after clicking a button both should slide up synchronous.

Here is the Sandbox: https://codesandbox.io/s/festive-fast-0reqe

Thanks in Advance!

Link to comment
Share on other sites

Hey Kaos and welcome to the GreenSock forums!

 

Your methodology is interesting, but I can't say optimal. I would just move both the init container and the content upwards by 100vh in a single tween and then set the y of your content to 0 once you remove the init container.

 

I also used this.targets() to prevent the need of selecting the elements, but you don't have to do that: https://codesandbox.io/s/exciting-lichterman-udv5j

Link to comment
Share on other sites

Hey Zach,

 

Thank you!

 

Yes the way I do it in the example is not optimal, but its just a very small and downsized version of what I exactly want to do.
Maybe more information will help here.

I use BarbaJS to translate between page loads.
So the first container in the example is the "current.container" in Barba's "leave" function.
The Second is the container pulled by BarbaJS into the DOM to replace the first in Barba's "enter" function.
Both functions are sync'd.
Thats why I need to split the two animations.

 

My example doesn't work because both container are on their position in DOM and TranslateY works relative to the start position of the container.
GSAP uses always TranslateY as far as I see, when I use { y: 100% } ?

The result at the end should be look as follows:

The first container should slide up or at least the height of the container should go to 0.
The second Container should be at maybe 40% top and slide up to top 0 while the first container animates.

 

I hope thats kinda useful.. 😅

Thanks for your Feedback!

 

Link to comment
Share on other sites

5 minutes ago, Kaos1337 said:

The example doesn't work because both container are on their position in DOM and TranslateY works relative to the start position of the container.

I may be being dull here, but why doesn't it work? If you're just moving something off screen and then hiding it, it should work (like my demo shows). Or are you saying that -100vh won't work because the actual content is taller than 100vh?

 

5 minutes ago, Kaos1337 said:

GSAP uses always TranslateY as far as I see, when I use { y: 100% } ?

Yes, but you can use other properties like marginTop, top, height, etc. if you want to. They just don't perform as well as transforms do. 

Link to comment
Share on other sites

1 minute ago, ZachSaucier said:

I may be being dull here, but why doesn't it work? If you're just moving something off screen and then hiding it, it should work (like my demo shows). Or are you saying that -100vh won't work?

I mean in my Example 😅

 

Your example works, but not for the end result I want to achieve.

Link to comment
Share on other sites

I'm still not following with what you're trying to say. Moving two containers around is moving two containers around.

 

Maybe you can make a more realistic demo of your situation if this one is not appropriate?

Link to comment
Share on other sites

I already tried to make a codepen/codesandbox working with barbaJS, but it doesnt because of the prefetch of barba. This doesnt work with sandboxes.

 

But I can send you a private message with a link to what I want to achieve. 

Link to comment
Share on other sites

It doesn't have to necessarily be in a sandbox. But you shouldn't need Barba to recreate the realistic situation once the content has been loaded. 

 

I am still not understanding what is wrong with the approach I gave above :) 

Link to comment
Share on other sites

I used your example code in my Barba instance.

Thats what happens: 

 

const transition = {
  name: 'def from Zach',
  sync: true,
  enter: ({ current, next }) => {
    gsap.to(current.container, next.container, {
      duration: 3,
      y: "-100vh",
      onStart: function() {
        this.targets()[0].style.zIndex = "1";
        console.log("start leave");
      },
      onComplete: function() {
        document.body.removeChild(this.targets()[0]);
        gsap.set(this.targets()[1], { y: 0 });
        console.log("complete leave");
      }
    });
  }
}


 

Link to comment
Share on other sites

Sorry, that video alone is not enough for me to tell what's going on.

Link to comment
Share on other sites

Ok,

 

BarbaJS transition needs to have a leave  and an enter function.

Both functions can work synchronous or not.
In this Case they have to work synchronous.

 

Here my previous try:
 

const defaultTransition = {
  name: 'default',
  sync: true,
  leave: ({ current }) => {
    gsap.to(current.container, { duration: .5, y: '-100%' });
  },
  enter: ({ next }) => {
    initContainer = next.container;
    TimeLine.from(next.container, {
      duration: .5,
      y: "100%"
    });
  }
}

 

That means the animation of both container needs to be splitted up.
If not, nothing will happen, because when the enter function kicks in the first container isn't present anymore.

Means, your example doesn't work in this specific case like seen in the video.

Link to comment
Share on other sites

So why not do something like this?

const defaultTransition = {
  name: 'default',
  sync: true,
  leave: ({ current }) => {
    gsap.to(current.container, {
      duration: 3,
      y: "-100vh",
      onStart: function() {
        this.targets()[0].style.zIndex = "1";
        console.log("start leave");
      },
      onComplete: function() {
        document.body.removeChild(this.targets()[0]);
        console.log("complete leave");
      }
    });
  },
  enter: ({ next }) => {
    initContainer = next.container;
    gsap.to(next.container, {
      duration: 3,
      y: "-100vh",
      onComplete: function() {
        gsap.set(this.targets()[0], { y: 0 });
        console.log("complete leave");
      }
    });
  }
}

 

  • Like 1
Link to comment
Share on other sites

I changed it to the following:
 

const defaultTransition = {
  name: 'default',
  sync: true,
  leave({ current })  {
    const done = this.async()
    gsap.to(current.container, {
      duration: 1,
      height: 0,
      onStart: function() {
        this.targets()[0].style.zIndex = "1";
      },
      onComplete: function() {
        done();
      }
    });
  },
  enter({ next }) {
    const done = this.async()
    gsap.set(next.container, { y: "40%" })
    gsap.to(next.container, {
      duration: 1,
      y: 0,
      onComplete: function() {
        gsap.set(this.targets()[0], { y: 0 });
        done()
        console.log("complete leave");
      }
    });
  }
}

This works more or less like I need it.

 

Thank you very much!

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.
×