OSUblake Posted July 29, 2021 Share Posted July 29, 2021 4 hours ago, Yakov said: Yes, about him. It's just that if codesandbox couldn't work with barba, then the usual opacity wouldn't work, right? It's really not working all the way. If you change the duration, it won't complete. It should wait 10 seconds before showing the next page. Locally it will work fine. It's just something with codesandbox's environment. 🤷♂️ barba.init({ transitions: [ { name: "opacity-transition", leave(data) { return gsap.to(data.current.container, { opacity: 0.2, duration: 10 }); }, enter(data) { return gsap.from(data.next.container, { opacity: 0.8, duration: 10 }); } } ] }); 1 Link to comment Share on other sites More sharing options...
OSUblake Posted July 29, 2021 Share Posted July 29, 2021 41 minutes ago, Yakov said: Very interesting, I realized that js barba periodically falls off when it is connected like this: https://unpkg.com/@barba/core It might have something to do with the fact that it has redirect to get the latest version, so it will return this. https://unpkg.com/@barba/core@2.9.7/dist/barba.umd.js It might be swapping the instance out in the middle of the transition. 1 Link to comment Share on other sites More sharing options...
Yakov Posted August 3, 2021 Author Share Posted August 3, 2021 On 7/29/2021 at 7:04 PM, OSUblake said: It might have something to do with the fact that it has redirect to get the latest version, so it will return this. https://unpkg.com/@barba/core@2.9.7/dist/barba.umd.js It might be swapping the instance out in the middle of the transition. Good afternoon. I managed to make a transition animation when clicking on "Back", but when clicking on a link with index.html it is not possible to implement flip. In Slack Barba, only one person answered me, but he says that barba is not very good... But it turns out to make an animation in the cover__div block... P.S.: codesandbox why doesn't it work out the transition here... https://codesandbox.io/s/withered-river-i8cqs?file=/index.html Maybe there is really some option with another plugin for the transition? 😒 Link to comment Share on other sites More sharing options...
OSUblake Posted August 3, 2021 Share Posted August 3, 2021 I would recommend a SPA framework like Vue... https://css-tricks.com/native-like-animations-for-page-transitions-on-the-web/ Link to comment Share on other sites More sharing options...
Yakov Posted August 4, 2021 Author Share Posted August 4, 2021 18 hours ago, OSUblake said: I would recommend a SPA framework like Vue... https://css-tricks.com/native-like-animations-for-page-transitions-on-the-web/ Hmm... I can't find it, can I connect it with files without npm? How does it work with xslt queries? Link to comment Share on other sites More sharing options...
OSUblake Posted August 4, 2021 Share Posted August 4, 2021 Sorry, I'm not familiar with xslt or how that would work. You don't need to use npm with Vue, but it's better as it will create a smaller build. I posted a demo on the previous page with Vue. See the Pen eYdXZJZ by GreenSock (@GreenSock) on CodePen Link to comment Share on other sites More sharing options...
Yakov Posted August 4, 2021 Author Share Posted August 4, 2021 Is it possible to do this in codesandbox? Just a question, how to combine this with the transition? Let's say I don't understand the principle itself, how these two functions are combined. I have never worked with either Vue or travelapp 1 hour ago, OSUblake said: Sorry, I'm not familiar with xslt or how that would work. You don't need to use npm with Vue, but it's better as it will create a smaller build. I posted a demo on the previous page with Vue. Link to comment Share on other sites More sharing options...
OSUblake Posted August 4, 2021 Share Posted August 4, 2021 Yes, you can do it on CodeSandbox. The best way to learn is by checking out their docs. https://vuejs.org/ Link to comment Share on other sites More sharing options...
Yakov Posted August 6, 2021 Author Share Posted August 6, 2021 On 8/4/2021 at 5:42 PM, OSUblake said: Yes, you can do it on CodeSandbox. The best way to learn is by checking out their docs. https://vuejs.org/ I tried to make your example from codepen to begin with, just transferring it to the site, I connected all the js, and inserted the codes, but nothing worked for me. Although banal https://vuejs.org/v2/guide/#Declarative-Rendering it works. So vue connected correctly 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