Search the Community
Showing results for 'barbajs'.
Found 55 results
-
Here is basic demo of how you can do that effect. You need a fixed element that will cover all the page content. As for explanation, everything is pretty well documented there. http://barbajs.org/how-it-works.html
-
Thanks again for the feedback! I'm going to try out both Animsition and BarbaJS and see where I end up. The initial idea was just to have an out transition, then a white screen with loader and an in transition which I managed to do with Animsation. Barba.js does look interesting indeed if I can make it work with WP. I'm not keen on the one-page idea as the website contains alot of different pages and projects. I'll keep you posted on the progress though if I come up with a solution! Thanks!
-
Wow those are some interesting solutions. With animsition as it looks yu'll be loading the entire page, so how smooth the transitions will be could be severely effected by the time it takes to load the page, and you'll need to be sure it works with wordpress, which builds the page from php files at runtime and could be problematic. I'm really interested in barbajs. It looks much more robust and actually doesn't reload the whole page it injects new content using what they call PJAX which is actually an AJAX loading technique. This is great because it doesn't have to reload other css or javascript. Since gsap is already instantiated it might be possible to inject animations during barabjs events. I would be very interested to see if this could be made to work with wordpress, looks like it could with tinkering. Again you could still consider an all on one page solution allowing total control with GSAP, with worpress it would work well with the plugin Advanced Custom Fields which allows you make highly customized builds of wordpress pages.
-
Hey @mdelp, Firstly well done on getting something working with your setup. I am sorry to rain on your parade but I very much doubt you will be able to easily trigger js based animation using Animsition because it is designed to trigger CSS animations. You'll have all sorts of conflicts with both approaches trying to wrestle control of the element you try to animate. Also, to rain even more, you will have to deal with AJAX or the whole page will reload every time you navigate to a different section. You could, hijack the click, run a transition-out before triggering the navigation, load the new page, have the loading animation kick in then run a transition-out to reveal the new content. But as you can see, it's a fiddly process of several steps... And you'll be reloading the whole page rather than just swapping sections of it. I have heard of a JavaScript library specifically for page transitions - I have never used myself so, not vouching for it but it was a colleague who, like yourself builds all his sites off WordPress so, I know they would work together. http://barbajs.org
-
Hi Kreativzirkel, very cool: http://barbajs.org/examples.html Kind regards Mikel
