Packo Posted February 2, 2022 Share Posted February 2, 2022 Here's an example: https://www.azzerad.com/ For a month I've been trying to learn how to do nice page transitions which look seamless like on the page above. I am using the SPA framework Nuxt.js which has a lot of stuff for this kind of transition. However, I was never successful in utilizing it perfectly. Either my content loads way too fast and the curtain effect is not there or the routing doesn't work the way I want. I tried vue's navigation guards, nuxt loader component but without a good result. Of course, for animations, I use GSAP which should help the transitioning between pages easier. Let's say I click on the link, transition in the curtain, load the content behind and then transition out. This should be doable with the timeline I believe. Does anybody know how to nail this kind of page transition? I took a look at barba.js but that is basically the same as vue's transition hooks but still, I can't use it properly for the curtain. Link to comment Share on other sites More sharing options...
OSUblake Posted February 2, 2022 Share Posted February 2, 2022 Hi Packo, I'm sure it's possible, but it's not something we can easily show you how to do. You will probably have to do some communication between the 2 pages. Once the next page is ready, then you trigger the outgoing animation and once that's done, then you trigger the incoming animation. Link to comment Share on other sites More sharing options...
Packo Posted February 2, 2022 Author Share Posted February 2, 2022 Yeah, what I'm interested in is the technical aspect. Like how do you prevent page changing route when you click on link, but first play the animation and then as the page is ready, finish the animation. I wonder where I could find some guidenance about it because I can't find a proper way to do it Link to comment Share on other sites More sharing options...
OSUblake Posted February 2, 2022 Share Posted February 2, 2022 Well, there's the <transition> component which has a bunch of callbacks you use with GSAP. https://vuejs.org/v2/guide/transitions.html#JavaScript-Hooks You can also have your animation trigger the route change, like an the onComplete callback. Also, here's an article on transitions. I you check it out the repo in there, it's using GSAP. https://css-tricks.com/native-like-animations-for-page-transitions-on-the-web/ Link to comment Share on other sites More sharing options...
Packo Posted February 2, 2022 Author Share Posted February 2, 2022 25 minutes ago, OSUblake said: Well, there's the <transition> component which has a bunch of callbacks you use with GSAP. https://vuejs.org/v2/guide/transitions.html#JavaScript-Hooks You can also have your animation trigger the route change, like an the onComplete callback. Also, here's an article on transitions. I you check it out the repo in there, it's using GSAP. https://css-tricks.com/native-like-animations-for-page-transitions-on-the-web/ Thanks blake! I believe the css-tricks article will come handy! 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