{"id":1272,"date":"2021-06-11T16:34:48","date_gmt":"2021-06-11T07:34:48","guid":{"rendered":"http:\/\/meeny.com\/?p=1272"},"modified":"2021-06-11T16:35:02","modified_gmt":"2021-06-11T07:35:02","slug":"easy-custom-page-transition-effect-with-barba-and-gsap","status":"publish","type":"post","link":"https:\/\/meeny.com\/?p=1272","title":{"rendered":"Easy custom Page Transition effect with Barba and GSAP"},"content":{"rendered":"\n<p>Easy custom Page Transition effect with Barba and GSAP<\/p>\n\n\n\n<figure class=\"wp-block-embed-youtube wp-block-embed is-type-video is-provider-youtube wp-embed-aspect-4-3 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"Easy custom Page Transition effect with Barba and GSAP\" width=\"800\" height=\"450\" src=\"https:\/\/www.youtube.com\/embed\/WOlMGmblaUc?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">JS<\/h2>\n\n\n\n<p>main.js<\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre>var WWidth = window.innerWidth;\nvar WHeight = window.innerHeight;\n\nwindow.addEventListener('resize', function(){\n    WWidth = window.innerWidth;\n    WHeight = window.innerHeight;\n},true)\n\n\n\nfunction Mpagein(){\n    gsap.to('#MWinL',{width: WWidth\/2-12, duration:.5, ease:&quot;power2.out&quot;})\n    gsap.to('#MWinR',{width: WWidth\/2, duration:.5, ease:&quot;power2.out&quot;})\n    gsap.to('#Mlogo',{top: WHeight\/2, duration:.5, ease:&quot;power2.out&quot;, delay: .5})\n}\n\nfunction Mpageout(){\n    gsap.to('#MWinL',{width: 0, duration:.5, ease:&quot;power2.out&quot;, delay: 1.2})\n    gsap.to('#MWinR',{width: 0, duration:.5, ease:&quot;power2.out&quot;, delay: 1.2})\n    gsap.to('#Mlogo',{top: -100, duration:.5, ease:&quot;power2.out&quot;, delay: 1})\n    gsap.from('li.nav-item',{translateY: -50, duration:.5, ease:&quot;power2.out&quot;, delay: 1.4, opacity:0, stagger:.1})\n}\n\n\nfunction Mdelay(num) {\n    return new Promise(function(resolve){\n        setTimeout(resolve,num)\n    })\n}\n\n\nbarba.init({\n    transitions: [{\n      name: 'Mtransition',\n      async leave(data) {\n        Mpagein();\n        await Mdelay(500);\n\n      },\n\n      enter(data) {\n        Mpageout();\n      },\n\n      async once(data) {\n        Mpagein();\n        await Mdelay(500);\n        Mpageout();\n      }\n\n    }]\n  });\n\n<\/pre><\/div>\n\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">HTML<\/h2>\n\n\n\n<p>index.html<\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre>&lt;!DOCTYPE html&gt;\n&lt;html lang=&quot;en&quot;&gt;\n&lt;head&gt;\n    &lt;meta charset=&quot;UTF-8&quot;&gt;\n    &lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;IE=edge&quot;&gt;\n    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;\n    &lt;title&gt;Document&lt;\/title&gt;\n    &lt;link rel=&quot;stylesheet&quot; href=&quot;main.css&quot;&gt;\n    \n&lt;\/head&gt;\n&lt;body data-barba=&quot;wrapper&quot;&gt;\n&lt;div&gt;\n  &lt;div id=&quot;Mlogo&quot;&gt;\n    &lt;img src=&quot;images\/symbol.svg&quot; alt=&quot;&quot; width=&quot;24&quot;&gt;&lt;span class=&quot;fw-bold&quot;&gt;Meeny&lt;\/span&gt;.com\n  &lt;\/div&gt;\n  &lt;div class=&quot;bg-primary&quot; id=&quot;MWinL&quot;&gt;&lt;\/div&gt;\n  &lt;div class=&quot;bg-secondary&quot; id=&quot;MWinR&quot;&gt;&lt;\/div&gt;\n&lt;\/div&gt;\n\n\n&lt;nav class=&quot;navbar navbar-expand-lg navbar-light bg-light&quot;&gt;\n  &lt;div class=&quot;container&quot;&gt;\n    &lt;a class=&quot;navbar-brand&quot; href=&quot;index.html&quot;&gt;\n      &lt;img src=&quot;images\/symbol.svg&quot; alt=&quot;&quot; width=&quot;24&quot;&gt;&lt;span class=&quot;fw-bold&quot;&gt;Meeny&lt;\/span&gt;.com\n    &lt;\/a&gt;\n    &lt;button class=&quot;navbar-toggler&quot; type=&quot;button&quot; data-bs-toggle=&quot;collapse&quot; data-bs-target=&quot;#navbarNav&quot; aria-controls=&quot;navbarNav&quot; aria-expanded=&quot;false&quot; aria-label=&quot;Toggle navigation&quot;&gt;\n      &lt;span class=&quot;navbar-toggler-icon&quot;&gt;&lt;\/span&gt;\n    &lt;\/button&gt;\n    &lt;div class=&quot;collapse navbar-collapse&quot; id=&quot;navbarNav&quot;&gt;\n      &lt;ul class=&quot;navbar-nav&quot;&gt;\n        &lt;li class=&quot;nav-item&quot;&gt;\n          &lt;a class=&quot;nav-link active&quot; aria-current=&quot;page&quot; href=&quot;index.html&quot;&gt;Home&lt;\/a&gt;\n        &lt;\/li&gt;\n        &lt;li class=&quot;nav-item&quot;&gt;\n          &lt;a class=&quot;nav-link&quot; href=&quot;page1.html&quot;&gt;Page 1&lt;\/a&gt;\n        &lt;\/li&gt;\n        &lt;li class=&quot;nav-item&quot;&gt;\n          &lt;a class=&quot;nav-link&quot; href=&quot;page2.html&quot;&gt;Page 2&lt;\/a&gt;\n        &lt;\/li&gt;\n      &lt;\/ul&gt;\n    &lt;\/div&gt;\n  &lt;\/div&gt;\n&lt;\/nav&gt;\n\n\n\n\n&lt;div class=&quot;contents overflow-hidden bg-success&quot; data-barba=&quot;container&quot; data-barba-namespace=&quot;Home&quot;&gt;\n  &lt;h3 class=&quot;fw-bolder text-center pt-5 text-light&quot;&gt;HOME&lt;\/h3&gt;\n  &lt;div class=&quot;container d-flex justify-content-center align-items-center h-100&quot;&gt;\n\n    &lt;div class=&quot;section&quot;&gt;\n      &lt;div class=&quot;row row-cols-md-2 row-cols-lg-4 row-cols-1 Mreflect&quot;&gt;\n          &lt;div class=&quot;p-1&quot;&gt;\n            &lt;div class=&quot;card Mscale overflow-hidden Ranimate&quot; style=&quot;width: 18rem;&quot;&gt;\n              &lt;div class=&quot;overflow-hidden&quot;&gt;\n                &lt;img src=&quot;images\/1.jpg&quot; class=&quot;card-img-top Mscale&quot; alt=&quot;...&quot;&gt;\n              &lt;\/div&gt;\n              &lt;div class=&quot;card-body&quot;&gt;\n                &lt;h5 class=&quot;card-title&quot;&gt;Card title&lt;\/h5&gt;\n                &lt;p class=&quot;card-text&quot;&gt;Some quick example text to build on the card title and make up the bulk of the card's content.&lt;\/p&gt;\n                &lt;a href=&quot;#&quot; class=&quot;btn btn-primary&quot;&gt;Go somewhere&lt;\/a&gt;\n              &lt;\/div&gt;\n            &lt;\/div&gt;\n          &lt;\/div&gt;\n      &lt;\/div&gt;\n\n    &lt;\/div&gt;\n\n  &lt;\/div&gt;\n\n&lt;\/div&gt;\n\n\n    &lt;script src=&quot;https:\/\/unpkg.com\/@barba\/core&quot;&gt;&lt;\/script&gt;\n    &lt;script src=&quot;https:\/\/cdn.jsdelivr.net\/npm\/@popperjs\/core@2.6.0\/dist\/umd\/popper.min.js&quot; integrity=&quot;sha384-KsvD1yqQ1\/1+IA7gi3P0tyJcT3vR+NdBTt13hSJ2lnve8agRGXTTyNaBYmCR\/Nwi&quot; crossorigin=&quot;anonymous&quot;&gt;&lt;\/script&gt;\n    &lt;script src=&quot;https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.0.0-beta2\/dist\/js\/bootstrap.min.js&quot; integrity=&quot;sha384-nsg8ua9HAw1y0W1btsyWgBklPnCUAFLuTMS2G72MMONqmOymq585AcH49TLBQObG&quot; crossorigin=&quot;anonymous&quot;&gt;&lt;\/script&gt;    \n    &lt;script src=&quot;https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/gsap\/3.6.1\/gsap.min.js&quot;&gt;&lt;\/script&gt;\n    &lt;script src=&quot;main.js&quot;&gt;&lt;\/script&gt;\n\n&lt;\/body&gt;\n&lt;\/html&gt;<\/pre><\/div>\n\n\n\n<p>page1.html<\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre>&lt;!DOCTYPE html&gt;\n&lt;html lang=&quot;en&quot;&gt;\n&lt;head&gt;\n    &lt;meta charset=&quot;UTF-8&quot;&gt;\n    &lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;IE=edge&quot;&gt;\n    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;\n    &lt;title&gt;Document&lt;\/title&gt;\n    &lt;link rel=&quot;stylesheet&quot; href=&quot;main.css&quot;&gt;\n    \n&lt;\/head&gt;\n&lt;body data-barba=&quot;wrapper&quot;&gt;\n&lt;div&gt;\n  &lt;div id=&quot;Mlogo&quot;&gt;\n    &lt;img src=&quot;images\/symbol.svg&quot; alt=&quot;&quot; width=&quot;24&quot;&gt;&lt;span class=&quot;fw-bold&quot;&gt;Meeny&lt;\/span&gt;.com\n  &lt;\/div&gt;\n  &lt;div class=&quot;bg-primary&quot; id=&quot;MWinL&quot;&gt;&lt;\/div&gt;\n  &lt;div class=&quot;bg-secondary&quot; id=&quot;MWinR&quot;&gt;&lt;\/div&gt;\n&lt;\/div&gt;\n\n\n&lt;nav class=&quot;navbar navbar-expand-lg navbar-light bg-light&quot;&gt;\n  &lt;div class=&quot;container&quot;&gt;\n    &lt;a class=&quot;navbar-brand&quot; href=&quot;index.html&quot;&gt;\n      &lt;img src=&quot;images\/symbol.svg&quot; alt=&quot;&quot; width=&quot;24&quot;&gt;&lt;span class=&quot;fw-bold&quot;&gt;Meeny&lt;\/span&gt;.com\n    &lt;\/a&gt;\n    &lt;button class=&quot;navbar-toggler&quot; type=&quot;button&quot; data-bs-toggle=&quot;collapse&quot; data-bs-target=&quot;#navbarNav&quot; aria-controls=&quot;navbarNav&quot; aria-expanded=&quot;false&quot; aria-label=&quot;Toggle navigation&quot;&gt;\n      &lt;span class=&quot;navbar-toggler-icon&quot;&gt;&lt;\/span&gt;\n    &lt;\/button&gt;\n    &lt;div class=&quot;collapse navbar-collapse&quot; id=&quot;navbarNav&quot;&gt;\n      &lt;ul class=&quot;navbar-nav&quot;&gt;\n        &lt;li class=&quot;nav-item&quot;&gt;\n          &lt;a class=&quot;nav-link active&quot; aria-current=&quot;page&quot; href=&quot;index.html&quot;&gt;Home&lt;\/a&gt;\n        &lt;\/li&gt;\n        &lt;li class=&quot;nav-item&quot;&gt;\n          &lt;a class=&quot;nav-link&quot; href=&quot;page1.html&quot;&gt;Page 1&lt;\/a&gt;\n        &lt;\/li&gt;\n        &lt;li class=&quot;nav-item&quot;&gt;\n          &lt;a class=&quot;nav-link&quot; href=&quot;page2.html&quot;&gt;Page 2&lt;\/a&gt;\n        &lt;\/li&gt;\n      &lt;\/ul&gt;\n    &lt;\/div&gt;\n  &lt;\/div&gt;\n&lt;\/nav&gt;\n\n\n\n\n&lt;div class=&quot;contents overflow-hidden bg-success&quot; data-barba=&quot;container&quot; data-barba-namespace=&quot;Home&quot;&gt;\n  &lt;h3 class=&quot;fw-bolder text-center pt-5 text-light&quot;&gt;Page 1&lt;\/h3&gt;\n  &lt;div class=&quot;container d-flex justify-content-center align-items-center h-100&quot;&gt;\n\n    &lt;div class=&quot;section&quot;&gt;\n      &lt;div class=&quot;row row-cols-md-2 row-cols-lg-4 row-cols-1 Mreflect&quot;&gt;\n          &lt;div class=&quot;p-1&quot;&gt;\n            &lt;div class=&quot;card Mscale overflow-hidden Ranimate&quot; style=&quot;width: 18rem;&quot;&gt;\n              &lt;div class=&quot;overflow-hidden&quot;&gt;\n                &lt;img src=&quot;images\/2.jpg&quot; class=&quot;card-img-top Mscale&quot; alt=&quot;...&quot;&gt;\n              &lt;\/div&gt;\n              &lt;div class=&quot;card-body&quot;&gt;\n                &lt;h5 class=&quot;card-title&quot;&gt;Card title&lt;\/h5&gt;\n                &lt;p class=&quot;card-text&quot;&gt;Some quick example text to build on the card title and make up the bulk of the card's content.&lt;\/p&gt;\n                &lt;a href=&quot;#&quot; class=&quot;btn btn-primary&quot;&gt;Go somewhere&lt;\/a&gt;\n              &lt;\/div&gt;\n            &lt;\/div&gt;\n          &lt;\/div&gt;\n      &lt;\/div&gt;\n\n    &lt;\/div&gt;\n\n  &lt;\/div&gt;\n\n&lt;\/div&gt;\n\n\n    &lt;script src=&quot;https:\/\/unpkg.com\/@barba\/core&quot;&gt;&lt;\/script&gt;\n    &lt;script src=&quot;https:\/\/cdn.jsdelivr.net\/npm\/@popperjs\/core@2.6.0\/dist\/umd\/popper.min.js&quot; integrity=&quot;sha384-KsvD1yqQ1\/1+IA7gi3P0tyJcT3vR+NdBTt13hSJ2lnve8agRGXTTyNaBYmCR\/Nwi&quot; crossorigin=&quot;anonymous&quot;&gt;&lt;\/script&gt;\n    &lt;script src=&quot;https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.0.0-beta2\/dist\/js\/bootstrap.min.js&quot; integrity=&quot;sha384-nsg8ua9HAw1y0W1btsyWgBklPnCUAFLuTMS2G72MMONqmOymq585AcH49TLBQObG&quot; crossorigin=&quot;anonymous&quot;&gt;&lt;\/script&gt;    \n    &lt;script src=&quot;https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/gsap\/3.6.1\/gsap.min.js&quot;&gt;&lt;\/script&gt;\n    &lt;script src=&quot;main.js&quot;&gt;&lt;\/script&gt;\n\n&lt;\/body&gt;\n&lt;\/html&gt;<\/pre><\/div>\n\n\n\n<p>page2.html<\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre>&lt;!DOCTYPE html&gt;\n&lt;html lang=&quot;en&quot;&gt;\n&lt;head&gt;\n    &lt;meta charset=&quot;UTF-8&quot;&gt;\n    &lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;IE=edge&quot;&gt;\n    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;\n    &lt;title&gt;Document&lt;\/title&gt;\n    &lt;link rel=&quot;stylesheet&quot; href=&quot;main.css&quot;&gt;\n    \n&lt;\/head&gt;\n&lt;body data-barba=&quot;wrapper&quot;&gt;\n&lt;div&gt;\n  &lt;div id=&quot;Mlogo&quot;&gt;\n    &lt;img src=&quot;images\/symbol.svg&quot; alt=&quot;&quot; width=&quot;24&quot;&gt;&lt;span class=&quot;fw-bold&quot;&gt;Meeny&lt;\/span&gt;.com\n  &lt;\/div&gt;\n  &lt;div class=&quot;bg-primary&quot; id=&quot;MWinL&quot;&gt;&lt;\/div&gt;\n  &lt;div class=&quot;bg-secondary&quot; id=&quot;MWinR&quot;&gt;&lt;\/div&gt;\n&lt;\/div&gt;\n\n\n&lt;nav class=&quot;navbar navbar-expand-lg navbar-light bg-light&quot;&gt;\n  &lt;div class=&quot;container&quot;&gt;\n    &lt;a class=&quot;navbar-brand&quot; href=&quot;index.html&quot;&gt;\n      &lt;img src=&quot;images\/symbol.svg&quot; alt=&quot;&quot; width=&quot;24&quot;&gt;&lt;span class=&quot;fw-bold&quot;&gt;Meeny&lt;\/span&gt;.com\n    &lt;\/a&gt;\n    &lt;button class=&quot;navbar-toggler&quot; type=&quot;button&quot; data-bs-toggle=&quot;collapse&quot; data-bs-target=&quot;#navbarNav&quot; aria-controls=&quot;navbarNav&quot; aria-expanded=&quot;false&quot; aria-label=&quot;Toggle navigation&quot;&gt;\n      &lt;span class=&quot;navbar-toggler-icon&quot;&gt;&lt;\/span&gt;\n    &lt;\/button&gt;\n    &lt;div class=&quot;collapse navbar-collapse&quot; id=&quot;navbarNav&quot;&gt;\n      &lt;ul class=&quot;navbar-nav&quot;&gt;\n        &lt;li class=&quot;nav-item&quot;&gt;\n          &lt;a class=&quot;nav-link active&quot; aria-current=&quot;page&quot; href=&quot;index.html&quot;&gt;Home&lt;\/a&gt;\n        &lt;\/li&gt;\n        &lt;li class=&quot;nav-item&quot;&gt;\n          &lt;a class=&quot;nav-link&quot; href=&quot;page1.html&quot;&gt;Page 1&lt;\/a&gt;\n        &lt;\/li&gt;\n        &lt;li class=&quot;nav-item&quot;&gt;\n          &lt;a class=&quot;nav-link&quot; href=&quot;page2.html&quot;&gt;Page 2&lt;\/a&gt;\n        &lt;\/li&gt;\n      &lt;\/ul&gt;\n    &lt;\/div&gt;\n  &lt;\/div&gt;\n&lt;\/nav&gt;\n\n\n\n\n&lt;div class=&quot;contents overflow-hidden bg-success&quot; data-barba=&quot;container&quot; data-barba-namespace=&quot;Home&quot;&gt;\n  &lt;h3 class=&quot;fw-bolder text-center pt-5 text-light&quot;&gt;Page 2&lt;\/h3&gt;\n  &lt;div class=&quot;container d-flex justify-content-center align-items-center h-100&quot;&gt;\n\n    &lt;div class=&quot;section&quot;&gt;\n      &lt;div class=&quot;row row-cols-md-2 row-cols-lg-4 row-cols-1 Mreflect&quot;&gt;\n          &lt;div class=&quot;p-1&quot;&gt;\n            &lt;div class=&quot;card Mscale overflow-hidden Ranimate&quot; style=&quot;width: 18rem;&quot;&gt;\n              &lt;div class=&quot;overflow-hidden&quot;&gt;\n                &lt;img src=&quot;images\/3.jpg&quot; class=&quot;card-img-top Mscale&quot; alt=&quot;...&quot;&gt;\n              &lt;\/div&gt;\n              &lt;div class=&quot;card-body&quot;&gt;\n                &lt;h5 class=&quot;card-title&quot;&gt;Card title&lt;\/h5&gt;\n                &lt;p class=&quot;card-text&quot;&gt;Some quick example text to build on the card title and make up the bulk of the card's content.&lt;\/p&gt;\n                &lt;a href=&quot;#&quot; class=&quot;btn btn-primary&quot;&gt;Go somewhere&lt;\/a&gt;\n              &lt;\/div&gt;\n            &lt;\/div&gt;\n          &lt;\/div&gt;\n      &lt;\/div&gt;\n\n    &lt;\/div&gt;\n\n  &lt;\/div&gt;\n\n&lt;\/div&gt;\n\n\n    &lt;script src=&quot;https:\/\/unpkg.com\/@barba\/core&quot;&gt;&lt;\/script&gt;\n    &lt;script src=&quot;https:\/\/cdn.jsdelivr.net\/npm\/@popperjs\/core@2.6.0\/dist\/umd\/popper.min.js&quot; integrity=&quot;sha384-KsvD1yqQ1\/1+IA7gi3P0tyJcT3vR+NdBTt13hSJ2lnve8agRGXTTyNaBYmCR\/Nwi&quot; crossorigin=&quot;anonymous&quot;&gt;&lt;\/script&gt;\n    &lt;script src=&quot;https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.0.0-beta2\/dist\/js\/bootstrap.min.js&quot; integrity=&quot;sha384-nsg8ua9HAw1y0W1btsyWgBklPnCUAFLuTMS2G72MMONqmOymq585AcH49TLBQObG&quot; crossorigin=&quot;anonymous&quot;&gt;&lt;\/script&gt;    \n    &lt;script src=&quot;https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/gsap\/3.6.1\/gsap.min.js&quot;&gt;&lt;\/script&gt;\n    &lt;script src=&quot;main.js&quot;&gt;&lt;\/script&gt;\n\n&lt;\/body&gt;\n&lt;\/html&gt;<\/pre><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">SCSS<\/h2>\n\n\n\n<p>main.scss<\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre>@import url('https:\/\/fonts.googleapis.com\/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&amp;display=swap');\n@import url(&quot;https:\/\/fonts.googleapis.com\/css?family=Roboto:100,100i,300,300i,400,400i,500,500i,700,700i,900,900i&amp;display=swap&quot;);\n\/\/$font-family-base: 'Montserrat',sans-serif;\n$font-family-base: 'roboto',sans-serif;\n\n\/\/ Pantone Color of the Year 2021\n\n$primary: #F5DF4D;\n$secondary: #939597;\n\/\/$success: #bdbdbd;\n\/\/$info:          #c5c5c5;\n\/\/ $warning:       $yellow;\n\/\/ $danger:        $red;\n\/\/ $light:         $gray-100;\n\/\/ $dark:          $gray-900;\n\n\n\n\n\n\n$btn-focus-width:             0;\n\/\/ $btn-focus-box-shadow:        $input-btn-focus-box-shadow !default;\n\n$card-border-width:                 0;\n\n@import &quot;.\/node_modules\/bootstrap\/scss\/bootstrap&quot;;\n\n#MWinL{\n    position: fixed;\n    top: 0;\n    left: 0;\n    width: 0;\n    height: 100vh;\n    overflow: hidden;\n    z-index: 1300;    \n}\n\n#MWinR{\n    position: fixed;\n    top: 0;\n    right: 0;\n    width: 0;\n    height: 100vh;\n    overflow: hidden;\n    z-index: 1300;        \n}\n\n#Mlogo{\n    position: fixed;\n    top:-100px;\n    width: 140px;\n    z-index: 1301;\n    left: 50vw;\n    transform: translateX(-65px);\n}\n\n#Mcursor {\n    position: absolute;\n    z-index: 999;\n    width: 8em;\n    height: 8em;\n    border-radius: 50%;\n    background: white;\n    mix-blend-mode: difference;\n    transform: translate(-50%, -50%);\n    pointer-events: none;\n    transition: .1s;\n}\n\n$rainbow : linear-gradient(\n    #ff0000 0,\n    #ff5100 14%,\n    #fbff00 28%,\n    #1eff00 42%,\n    #006eff 56%,\n    #1100ff 70%,\n    #9900ff 84%,\n    #ff0000 100%\n);\n\n$RBorder_Size : 4px;\n.contents{\n    height: 100vh;\n\n    .section{\n        .card{\n            border-radius: $RBorder_Size ;\n            padding: 20px;\n\n            &amp;::before{\n                content: '';\n                position: absolute;\n                z-index: -2;\n                left: -50%;\n                top: -50%;\n                width: 200%;\n                height:200%;\n                background: $rainbow;\n                background-size: 50% 50%;\n            }\n\n            &amp;::after{\n                content: '';\n                position: absolute;\n                z-index: -1;\n                left : $RBorder_Size;\n                top : $RBorder_Size;\n                width: calc(100% - #{$RBorder_Size}*2); \n                height: calc(100% - #{$RBorder_Size}*2); \n                background-color: white;\n                border-radius: $RBorder_Size;\n            }\n        }\n    }\n\n}\n\n\n.Mreflect{\n    -webkit-box-reflect: below -4px linear-gradient(transparent 70%, rgba(255,255,255,0.4));\n}\n\n.Mscale{\n    transition: .5s cubic-bezier(0.7, -0.7, 0.2, 1.8);\n    &amp;:hover {\n        transform: scale(1.2);\n        z-index: 300;\n        cursor: pointer;\n    }\n}\n\n.Ranimate{\n    &amp;::before {\n        transform: rotate(-45deg) scale(1.5);\n        animation: animate 6s linear infinite;\n    }\n}\n\n@keyframes animate {\n    from{\n        background-position: 0;\n    }\n    to {\n        background-position: 0 1000px;\n    }\n}\n\n.Rrotate{\n    &amp;::before{\n        animation: rotate 4s linear infinite;\n    }\n}\n\n@keyframes rotate {\n    100%{\n        transform: rotate(360deg);\n    }\n}<\/pre><\/div>\n\n\n\n<figure class=\"wp-block-embed-wordpress wp-block-embed is-type-wp-embed is-provider-meeny\"><div class=\"wp-block-embed__wrapper\">\n<blockquote class=\"wp-embedded-content\" data-secret=\"NZOTvc4rfR\"><a href=\"https:\/\/meeny.com\/2021\/01\/21\/bootstrap5-theming\/\">Bootstrap5 theming<\/a><\/blockquote><iframe title=\"&#8220;Bootstrap5 theming&#8221; &#8212; Meeny\" class=\"wp-embedded-content\" sandbox=\"allow-scripts\" security=\"restricted\" style=\"position: absolute; clip: rect(1px, 1px, 1px, 1px);\" src=\"https:\/\/meeny.com\/2021\/01\/21\/bootstrap5-theming\/embed\/#?secret=NZOTvc4rfR\" data-secret=\"NZOTvc4rfR\" width=\"600\" height=\"338\" frameborder=\"0\" marginwidth=\"0\" marginheight=\"0\" scrolling=\"no\"><\/iframe>\n<\/div><\/figure>\n","protected":false},"excerpt":{"rendered":"<p>Easy custom Page Transition effect with Barba and GSAP JS main.js HTML index.html page1.html page2.html SCSS main.scss<\/p>\n","protected":false},"author":1,"featured_media":1274,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"colormag_page_container_layout":"default_layout","colormag_page_sidebar_layout":"default_layout","footnotes":""},"categories":[62],"tags":[778,415,410,411,444,443,442,455,769,768,765,597,396,762,771,770,397,395,394,775,398,777,422,763,767,772,438,766,439,441,776,774],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v22.4 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Easy custom Page Transition effect with Barba and GSAP - Meeny<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/meeny.com\/?p=1272\" \/>\n<meta property=\"og:locale\" content=\"ko_KR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Easy custom Page Transition effect with Barba and GSAP - Meeny\" \/>\n<meta property=\"og:description\" content=\"Easy custom Page Transition effect with Barba and GSAP JS main.js HTML index.html page1.html page2.html SCSS main.scss\" \/>\n<meta property=\"og:url\" content=\"https:\/\/meeny.com\/?p=1272\" \/>\n<meta property=\"og:site_name\" content=\"Meeny\" \/>\n<meta property=\"article:published_time\" content=\"2021-06-11T07:34:48+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2021-06-11T07:35:02+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/meeny.com\/wp-content\/uploads\/2021\/06\/018barba.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1920\" \/>\n\t<meta property=\"og:image:height\" content=\"1080\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Meeny\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Meeny\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"12\ubd84\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/meeny.com\/?p=1272#article\",\"isPartOf\":{\"@id\":\"https:\/\/meeny.com\/?p=1272\"},\"author\":{\"name\":\"Meeny\",\"@id\":\"https:\/\/meeny.com\/?tag=ios-13-4-5\/#\/schema\/person\/4b6b745d39f90b39161c79fe08a6feb9\"},\"headline\":\"Easy custom Page Transition effect with Barba and GSAP\",\"datePublished\":\"2021-06-11T07:34:48+00:00\",\"dateModified\":\"2021-06-11T07:35:02+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/meeny.com\/?p=1272\"},\"wordCount\":40,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/meeny.com\/?tag=ios-13-4-5\/#organization\"},\"image\":{\"@id\":\"https:\/\/meeny.com\/?p=1272#primaryimage\"},\"thumbnailUrl\":\"https:\/\/meeny.com\/wp-content\/uploads\/2021\/06\/018barba.png\",\"keywords\":[\"Barba.js\",\"bootstrap\",\"bootstrap css\",\"bootstrap html\",\"bootstrap theme fonts\",\"Bootstrap4 primary color change\",\"Bootstrap4 theming\",\"bootstrap5\",\"Bootstrap5 change primary color font\",\"Bootstrap5 theming\",\"button hover effect\",\"card hover effect\",\"css\",\"Css Custom Properties\",\"GSAP\",\"horizontal scroll\",\"html\",\"html code\",\"html css\",\"invert mouse pointer\",\"javascript\",\"Page Transition\",\"responsive design\",\"Responsive Font Size\",\"scroll progress indicator\",\"Scrolltrigger\",\"sticky-top\",\"svg animation\",\"template\",\"theming\",\"Tracking mouse position\",\"Tracking mouse position with invert mouse pointer\"],\"articleSection\":[\"HTML &amp; CSS\"],\"inLanguage\":\"ko-KR\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/meeny.com\/?p=1272#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/meeny.com\/?p=1272\",\"url\":\"https:\/\/meeny.com\/?p=1272\",\"name\":\"Easy custom Page Transition effect with Barba and GSAP - Meeny\",\"isPartOf\":{\"@id\":\"https:\/\/meeny.com\/?tag=ios-13-4-5\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/meeny.com\/?p=1272#primaryimage\"},\"image\":{\"@id\":\"https:\/\/meeny.com\/?p=1272#primaryimage\"},\"thumbnailUrl\":\"https:\/\/meeny.com\/wp-content\/uploads\/2021\/06\/018barba.png\",\"datePublished\":\"2021-06-11T07:34:48+00:00\",\"dateModified\":\"2021-06-11T07:35:02+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/meeny.com\/?p=1272#breadcrumb\"},\"inLanguage\":\"ko-KR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/meeny.com\/?p=1272\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"ko-KR\",\"@id\":\"https:\/\/meeny.com\/?p=1272#primaryimage\",\"url\":\"https:\/\/meeny.com\/wp-content\/uploads\/2021\/06\/018barba.png\",\"contentUrl\":\"https:\/\/meeny.com\/wp-content\/uploads\/2021\/06\/018barba.png\",\"width\":1920,\"height\":1080},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/meeny.com\/?p=1272#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/meeny.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Easy custom Page Transition effect with Barba and GSAP\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/meeny.com\/?tag=ios-13-4-5\/#website\",\"url\":\"https:\/\/meeny.com\/?tag=ios-13-4-5\/\",\"name\":\"Meeny\",\"description\":\"Issues &amp; News\",\"publisher\":{\"@id\":\"https:\/\/meeny.com\/?tag=ios-13-4-5\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/meeny.com\/?tag=ios-13-4-5\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"ko-KR\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/meeny.com\/?tag=ios-13-4-5\/#organization\",\"name\":\"Meeny\",\"url\":\"https:\/\/meeny.com\/?tag=ios-13-4-5\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"ko-KR\",\"@id\":\"https:\/\/meeny.com\/?tag=ios-13-4-5\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/meeny.com\/wp-content\/uploads\/2020\/05\/LOGO_meeny_180.png\",\"contentUrl\":\"https:\/\/meeny.com\/wp-content\/uploads\/2020\/05\/LOGO_meeny_180.png\",\"width\":180,\"height\":41,\"caption\":\"Meeny\"},\"image\":{\"@id\":\"https:\/\/meeny.com\/?tag=ios-13-4-5\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\/\/meeny.com\/?tag=ios-13-4-5\/#\/schema\/person\/4b6b745d39f90b39161c79fe08a6feb9\",\"name\":\"Meeny\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"ko-KR\",\"@id\":\"https:\/\/meeny.com\/?tag=ios-13-4-5\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/c64cfa5c72bf22b037e8dce05c95e373?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/c64cfa5c72bf22b037e8dce05c95e373?s=96&d=mm&r=g\",\"caption\":\"Meeny\"},\"sameAs\":[\"http:\/\/blog.epart.kr\"],\"url\":\"https:\/\/meeny.com\/?author=1\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Easy custom Page Transition effect with Barba and GSAP - Meeny","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/meeny.com\/?p=1272","og_locale":"ko_KR","og_type":"article","og_title":"Easy custom Page Transition effect with Barba and GSAP - Meeny","og_description":"Easy custom Page Transition effect with Barba and GSAP JS main.js HTML index.html page1.html page2.html SCSS main.scss","og_url":"https:\/\/meeny.com\/?p=1272","og_site_name":"Meeny","article_published_time":"2021-06-11T07:34:48+00:00","article_modified_time":"2021-06-11T07:35:02+00:00","og_image":[{"width":1920,"height":1080,"url":"https:\/\/meeny.com\/wp-content\/uploads\/2021\/06\/018barba.png","type":"image\/png"}],"author":"Meeny","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Meeny","Est. reading time":"12\ubd84"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/meeny.com\/?p=1272#article","isPartOf":{"@id":"https:\/\/meeny.com\/?p=1272"},"author":{"name":"Meeny","@id":"https:\/\/meeny.com\/?tag=ios-13-4-5\/#\/schema\/person\/4b6b745d39f90b39161c79fe08a6feb9"},"headline":"Easy custom Page Transition effect with Barba and GSAP","datePublished":"2021-06-11T07:34:48+00:00","dateModified":"2021-06-11T07:35:02+00:00","mainEntityOfPage":{"@id":"https:\/\/meeny.com\/?p=1272"},"wordCount":40,"commentCount":0,"publisher":{"@id":"https:\/\/meeny.com\/?tag=ios-13-4-5\/#organization"},"image":{"@id":"https:\/\/meeny.com\/?p=1272#primaryimage"},"thumbnailUrl":"https:\/\/meeny.com\/wp-content\/uploads\/2021\/06\/018barba.png","keywords":["Barba.js","bootstrap","bootstrap css","bootstrap html","bootstrap theme fonts","Bootstrap4 primary color change","Bootstrap4 theming","bootstrap5","Bootstrap5 change primary color font","Bootstrap5 theming","button hover effect","card hover effect","css","Css Custom Properties","GSAP","horizontal scroll","html","html code","html css","invert mouse pointer","javascript","Page Transition","responsive design","Responsive Font Size","scroll progress indicator","Scrolltrigger","sticky-top","svg animation","template","theming","Tracking mouse position","Tracking mouse position with invert mouse pointer"],"articleSection":["HTML &amp; CSS"],"inLanguage":"ko-KR","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/meeny.com\/?p=1272#respond"]}]},{"@type":"WebPage","@id":"https:\/\/meeny.com\/?p=1272","url":"https:\/\/meeny.com\/?p=1272","name":"Easy custom Page Transition effect with Barba and GSAP - Meeny","isPartOf":{"@id":"https:\/\/meeny.com\/?tag=ios-13-4-5\/#website"},"primaryImageOfPage":{"@id":"https:\/\/meeny.com\/?p=1272#primaryimage"},"image":{"@id":"https:\/\/meeny.com\/?p=1272#primaryimage"},"thumbnailUrl":"https:\/\/meeny.com\/wp-content\/uploads\/2021\/06\/018barba.png","datePublished":"2021-06-11T07:34:48+00:00","dateModified":"2021-06-11T07:35:02+00:00","breadcrumb":{"@id":"https:\/\/meeny.com\/?p=1272#breadcrumb"},"inLanguage":"ko-KR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/meeny.com\/?p=1272"]}]},{"@type":"ImageObject","inLanguage":"ko-KR","@id":"https:\/\/meeny.com\/?p=1272#primaryimage","url":"https:\/\/meeny.com\/wp-content\/uploads\/2021\/06\/018barba.png","contentUrl":"https:\/\/meeny.com\/wp-content\/uploads\/2021\/06\/018barba.png","width":1920,"height":1080},{"@type":"BreadcrumbList","@id":"https:\/\/meeny.com\/?p=1272#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/meeny.com\/"},{"@type":"ListItem","position":2,"name":"Easy custom Page Transition effect with Barba and GSAP"}]},{"@type":"WebSite","@id":"https:\/\/meeny.com\/?tag=ios-13-4-5\/#website","url":"https:\/\/meeny.com\/?tag=ios-13-4-5\/","name":"Meeny","description":"Issues &amp; News","publisher":{"@id":"https:\/\/meeny.com\/?tag=ios-13-4-5\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/meeny.com\/?tag=ios-13-4-5\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"ko-KR"},{"@type":"Organization","@id":"https:\/\/meeny.com\/?tag=ios-13-4-5\/#organization","name":"Meeny","url":"https:\/\/meeny.com\/?tag=ios-13-4-5\/","logo":{"@type":"ImageObject","inLanguage":"ko-KR","@id":"https:\/\/meeny.com\/?tag=ios-13-4-5\/#\/schema\/logo\/image\/","url":"https:\/\/meeny.com\/wp-content\/uploads\/2020\/05\/LOGO_meeny_180.png","contentUrl":"https:\/\/meeny.com\/wp-content\/uploads\/2020\/05\/LOGO_meeny_180.png","width":180,"height":41,"caption":"Meeny"},"image":{"@id":"https:\/\/meeny.com\/?tag=ios-13-4-5\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/meeny.com\/?tag=ios-13-4-5\/#\/schema\/person\/4b6b745d39f90b39161c79fe08a6feb9","name":"Meeny","image":{"@type":"ImageObject","inLanguage":"ko-KR","@id":"https:\/\/meeny.com\/?tag=ios-13-4-5\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/c64cfa5c72bf22b037e8dce05c95e373?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/c64cfa5c72bf22b037e8dce05c95e373?s=96&d=mm&r=g","caption":"Meeny"},"sameAs":["http:\/\/blog.epart.kr"],"url":"https:\/\/meeny.com\/?author=1"}]}},"_links":{"self":[{"href":"https:\/\/meeny.com\/index.php?rest_route=\/wp\/v2\/posts\/1272"}],"collection":[{"href":"https:\/\/meeny.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/meeny.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/meeny.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/meeny.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1272"}],"version-history":[{"count":1,"href":"https:\/\/meeny.com\/index.php?rest_route=\/wp\/v2\/posts\/1272\/revisions"}],"predecessor-version":[{"id":1275,"href":"https:\/\/meeny.com\/index.php?rest_route=\/wp\/v2\/posts\/1272\/revisions\/1275"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/meeny.com\/index.php?rest_route=\/wp\/v2\/media\/1274"}],"wp:attachment":[{"href":"https:\/\/meeny.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1272"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/meeny.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=1272"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/meeny.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=1272"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}