Movatterモバイル変換


[0]ホーム

URL:


Skip to content
DEV Community
Log in Create account

DEV Community

Cover image for Barbajs with GSAP Animation
IntegridSolutions profile image⚡ Nirazan Basnet ⚡
⚡ Nirazan Basnet ⚡ forIntegridSolutions

Posted on • Edited on

     

Barbajs with GSAP Animation

I always wanted my simple web application to have a badass fluid and smooth transitions between the pages and act like a Single Page Application (SPA). So, I encountered Barbajs which is a progressive enhancement library to create fluid and smooth transitions between your website’s pages.

Barba js also helps to reduce the delay between the pages, minimize browser HTTP requests and enhance users’ web experience.

So, I had built a simple landing page where there is a usage of Barba js and for page transition animation, I had used GSAP animation. Today I will explain how we can create this slick animation through barbajs and GSAP animation.

Barbajs Animation

So, what isGSAP? - In a simple language think of GSAP as the Swiss Army Knife of javascript animation.. .but better. It animates anything JavaScript can touch (CSS properties, canvas library objects, SVG, React, Vue, generic objects, whatever) and it solves countless browser inconsistencies, all with blazing speed (up to 20x faster than jQuery), including automatic GPU-acceleration of transforms.


So, Let’s get started,

Install Barbajs,

Using npm:

npm install @barba/core
Enter fullscreen modeExit fullscreen mode

Or, using yarn

yarn add @barba/core
Enter fullscreen modeExit fullscreen mode

or using a CDN:

<scriptsrc="https://unpkg.com/@barba/core"></script>
Enter fullscreen modeExit fullscreen mode

Create index.html

<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>BarbaJs Demo | Home</title><linkrel="stylesheet"href="./style.css"></head><bodydata-barba="wrapper"><divclass="wrapper"><header><nav><ul>                        ...</ul></nav></header><maindata-barba="container"data-barba-namespace="home">                ...</main></div><scriptsrc="https://unpkg.com/@barba/core"></script></body></html>
Enter fullscreen modeExit fullscreen mode

We need to import the Barba js core file and structure the layout according to Barba js documentation, You can see, there is awrapper which is the main section that contains all your page structure and theBarba container.

<bodydata-barba="wrapper">...</body
Enter fullscreen modeExit fullscreen mode

The container defines a section in which content is updated automatically when you navigate between pages. And thenamespace which allows you to define aunique name for each page. Mainly used for transition rules and views.

<maindata-barba="container"data-barba-namespace="home">...</main>
Enter fullscreen modeExit fullscreen mode

That’s all for the initialization of thebarbajs. Now, we can add the transition part through GSAP. Let’s first initialize the transition div. I have created the.transition div where we implement the animation effect as the page layout changes fromindex.html toabout.html

<ulclass="transition"><li></li><li></li><li></li><li></li><li></li></ul>
Enter fullscreen modeExit fullscreen mode

CSS

.transition{position:absolute;z-index:99;display:-webkit-box;display:-ms-flexbox;display:flex;width:100%;height:100vh;top:0;left:0;margin:0;padding:0;pointer-events:none;}.transitionli{width:20%;-webkit-transform:scaleY(0);transform:scaleY(0);background:#fffffe;}
Enter fullscreen modeExit fullscreen mode

Now, animating through GSAP inindex.js

For page transition,

functionpageTransition(){vartl=gsap.timeline();tl.to(".transition li",{duration:0.5,scaleY:1,transformOrigin:"bottom left",stagger:0.2,});tl.to(".transition li",{duration:0.5,scaleY:0,transformOrigin:"bottom left",stagger:0.1,delay:0.1,});}
Enter fullscreen modeExit fullscreen mode

For content like heading tag, image tag, let’s create another function,

functioncontentAnimation(){vartl=gsap.timeline();tl.from(".headline",{duration:1.5,translateY:50,opacity:0,});tl.to("img",{clipPath:"polygon(0 0, 100% 0, 100% 100%, 0% 100%)",},"-=.1");}
Enter fullscreen modeExit fullscreen mode

Now, let’s add the GSAP animation on the Barba js lifecycle.

barba.init({sync:true,transitions:[{asyncleave(data){constdone=this.async();pageTransition();awaitdelay(1500);done();},asyncenter(data){contentAnimation();},asynconce(data){contentAnimation();},},],});
Enter fullscreen modeExit fullscreen mode

Here, delay function is the helper

functiondelay(n){n=n||2000;returnnewPromise((done)=>{setTimeout(()=>{done();},n);});}
Enter fullscreen modeExit fullscreen mode

Hooks for Barbajs

leave, enter, once are the hooks and are the methods. Hooks can be run either synchronously or asynchronously using the commonthis.async() or returning a promise.

If you usesync: true, as leave and enter will be concurrent, the order will differ: all before, then enter/leave, then all after.

Note that you can define global hooks usingbarba.hooks and apply it to all your transitions.


Code

Now, after mixing all the code you can get the final code in the GitHubhere and play around the animation. I hope you will create an awesome animation.


Conclusion

By coming this far I hope you get a basic understanding of the Barba js and it’s advantages So, I suggest you give it a try on your project and enjoy it!

Till then,
Keep on Hacking, Cheers

Top comments(1)

Subscribe
pic
Create template

Templates let you quickly answer FAQs or store snippets for re-use.

Dismiss
CollapseExpand
 
rajeshgrgdesign profile image
rajeshgrgdesign
  • Location
    Camberley, Surrey
  • Work
    Senior Developer
  • Joined

Nice one! I am currently working on a project using Barba.js, GSAP ScrollTrigger and Locomotive Scroll (locomotivemtl.github.io/locomotive...). Going well so far and might get delay function from above.

Are you sure you want to hide this comment? It will become hidden in your post, but will still be visible via the comment'spermalink.

For further actions, you may consider blocking this person and/orreporting abuse

Grow your business with us

More fromIntegridSolutions

DEV Community

We're a place where coders share, stay up-to-date and grow their careers.

Log in Create account

[8]ページ先頭

©2009-2025 Movatter.jp