Kaos1337 Posted January 30, 2020 Share Posted January 30, 2020 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 More sharing options...
ZachSaucier Posted January 30, 2020 Share Posted January 30, 2020 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 More sharing options...
Kaos1337 Posted January 30, 2020 Author Share Posted January 30, 2020 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 More sharing options...
ZachSaucier Posted January 30, 2020 Share Posted January 30, 2020 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 More sharing options...
Kaos1337 Posted January 30, 2020 Author Share Posted January 30, 2020 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 More sharing options...
ZachSaucier Posted January 30, 2020 Share Posted January 30, 2020 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 More sharing options...
Kaos1337 Posted January 30, 2020 Author Share Posted January 30, 2020 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 More sharing options...
ZachSaucier Posted January 30, 2020 Share Posted January 30, 2020 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 More sharing options...
Kaos1337 Posted January 30, 2020 Author Share Posted January 30, 2020 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 More sharing options...
ZachSaucier Posted January 30, 2020 Share Posted January 30, 2020 Sorry, that video alone is not enough for me to tell what's going on. Link to comment Share on other sites More sharing options...
Kaos1337 Posted January 30, 2020 Author Share Posted January 30, 2020 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 More sharing options...
ZachSaucier Posted January 30, 2020 Share Posted January 30, 2020 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"); } }); } } 1 Link to comment Share on other sites More sharing options...
Kaos1337 Posted January 30, 2020 Author Share Posted January 30, 2020 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 More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now