Skip to content

Instantly share code, notes, and snippets.

@mfrancois3k

mfrancois3k/01 setup

Last active May 31, 2023 16:39
Show Gist options
  • Save mfrancois3k/549cc80e3448f7d512839761fff85b7c to your computer and use it in GitHub Desktop.
Save mfrancois3k/549cc80e3448f7d512839761fff85b7c to your computer and use it in GitHub Desktop.
Download ZIP
Barba js Basics #CSS #transition #effects
Raw
01 setup
set up
put cdn for html ur using for all the html ur transitioning
<script src="https://unpkg.com/@barba/core"></script>
html structure
<body data-barba="wrapper">
<!-- put here content that will not change
between your pages, like <header> or <nav> -->
<main data-barba="container" data-barba-namespace="home">
<!-- put here the content you wish to change
between your pages, like your main content <h1> or <p> -->
</main>
<!-- put here content that will not change
between your pages, like <footer> -->
</body>
<script src="https://unpkg.com/@barba/css"></script>
<script src="https://unpkg.com/@barba/core"></script>
js
// Init Barba
barba.use(barbaCss);
barba.init({
})
css structure
Raw
02 Barba Css, once hook
02 Barba Css, once hook
barba-one (start) barba-once-active
barba-once-active barba-once-to (end)
> css transition >
opacity 0 all 1s linear opacity 1
beforeOnce once after once
u can customize the name of the triggers but adding object
use beforeOnce and afterOnce for debuging to see transinions
barba.init({
transitions: [
{
name: 'home',
beforeOnce() {
console.log("beforeOnce");
},
once() {
// with the css plugin, this not run
console.log("once");
},
afterOnce() {
console.log("afterOnce");
}
}
]
});
then using "home" change the css according
/*start the transition*/
.home-once {
opacity: 0;
}
/*does the transition*/
.home-once-active {
transition: opacity 3s linear 0.3s;
}
/*end of the transition*/
.home-once-to {
opacity: 1;
}
Raw
03 leave and end hooks
to use this use this
1. add object of the following
, {
name: "fade",
to: {
namespace: ['fade']
},
leave() {},
enter() {},
}
to
to is a key to specify the transiton, it has to be true for it
to work in side of the object
2. on the html fo both html pages that u using the "fade" u need to add the
the data attributes like so
index.html
<header ... data-barba-namespace="home" ...>
fade.html
<header ... data-barba-namespace="fade" ...>
3. u need to add the css for the class for the transition
always use before leave and afterLeave for the events
fade-leave (start) fade-leave-active
fade-leave-active fade-leave-to (end)
> css transition >
opacity 1 all 0.3s linear opacity 0
beforeLeave leave afterLeave
Raw
04. global hooks
using the global hook enter to change background color
grab body tage and data attributes
// this will run before any hook is animated
// get for grabing selsector before transitons
barba.hooks.before((data) =>{
const background = data.current.container.dataset.background;
body.style.setProperty('--page-background',background);
})
// targeting the html body
<body ...>
<header ... data-background="#5C85EE">
// and also ur targeting the css varable dynaically
body {
--page-background: #fff;
font-family: 'Work Sans', sans-serif;
font-weight: 300;
overflow: hidden;
background-color: var(--page-background);
}
this great for trainig to colorls of diffenet pages if u dont want to have flasing colors
Raw
05. sync and clip-path transition
1. put the data attributes for the html
clip.html
<header ... data-barba-namespace="clip" ...>
2nd go to js to add the flow new transition
{
name: 'clip',
sync: 'true',
to: {
namespace: ['clip']
},
leave() {},
enter() {},
beforeEnter() {
console.log('beforeEnter')
}
},
sync: true
the enter and leave will happan at the same time to see next an current contaier
beforeEnter() {
console.log('beforeEnter') // to pause the animation
remove it when ur finihs with the anaiton
}
3rd is the css animation transtion
/* clip out current container leaving */
.clip-leave {
opacity: 1; /* Initial opacity of the leaving container */
}
.clip-leave-active {
transition: all 0.75s linear; /* Transition properties for the leaving container */
}
.clip-leave-to {
opacity: 0; /* Final opacity of the leaving container */
}
/* clip in entering container */
.clip-enter {
clip-path: circle(0%); /* Initial clip-path value for the entering container (invisible) */
}
.clip-enter-active {
transition: all 0.75s linear; /* Transition properties for the entering container */
position: absolute; /* Positioned absolutely to overlay the leaving container */
top: 0;
z-index: 2;
}
.clip-enter-to {
clip-path: circle(75%); /* Final clip-path value for the entering container (gradually reveals content) */
}
under animation in google chrome slow it donw to 10% in google chrome press escape the the 3 dots
scroll up on top to see animation
Raw
06. CSS cover transition
ur animating outside of the container
so ur animating the children of the containers not the body
for leave-active and enter active u need to put it in the child containter for the
transition
the first 2 class keep it on the container for barba the transition classes is for
the cover so it seen for page
/* Tranistion cover in */
.with-cover-leave-active,
.with-cover-enter-active,
.with-cover-leave-active .transition,
.with-cover-enter-active .transition {
transition: transform 0.8s var(--easing); /* Transition property and duration for the cover effect */
}
/* Cover in */
.with-cover-leave .transition {
transform: translateY(-100%); /* Initial transform for the leaving container (cover up) */
}
.with-cover-leave .transition {
transform: translateY(0); /* Final transform for the leaving container (reveal content) */
}
/* Cover down */
.with-cover-leave .transition {
transform: translateY(0); /* Initial transform for the entering container (reveal content) */
}
.with-cover-leave .transition {
transform: translateY(100%); /* Final transform for the entering container (cover down) */
}
Raw
07. CSS slide transition
1.to slide the transiton u need to revert th home page for html
'home'
2. use js to sync the container so ir can transtion for one cantainer to ther next
{
name: 'home',
to: {
namespace: ['home']
},
sync: true,
once(){},
leave(){},
enter(){},
},
3rd is css enter an d leave
/*Slide to home.scss*/
.home-leave {
transform: translateX(0);
}
.home-leave-active {
transition: all 0.7s var(--easing);
}
.home-leave-to {
transform: translateX(100%);
}
/* home in entering container */
.home-enter {
transform: translateX(-100%);
}
.home-enter-active {
transition: all 0.7s var(--easing);
}
.home-enter-to {
transform: translateX(0);
position: absolute;
top: 0;
left: 0;
}
Raw
08 gsap an barbus timeline
import barba from '@barba/core'; // Import Barba.js library
import gsap from 'gsap'; // Import GSAP library for animations
// Animation for entering the page
const animationEnter = (container) => {
return gsap.from(container, {
autoAlpha: 0, // Fade in the container
duration: 2, // Animation duration
clearProps: 'all', // Clear animation properties after completion
ease: 'none', // Animation easing
});
};
// Animation for leaving the page
const animationLeave = (container) => {
return gsap.to(container, {
autoAlpha: 0, // Fade out the container
duration: 2, // Animation duration
clearProps: 'all', // Clear animation properties after completion
ease: 'none', // Animation easing
});
};
// Initialize Barba.js
barba.init({
transitions: [
{
once({ next }) {
// Animation when loading the page for the first time
animationEnter(next.container);
},
leave: ({ current }) => {
// Animation when leaving the page
animationLeave(current.container);
},
enter({ next }) {
console.log('entering');
// Animation when entering the page
animationEnter(next.container);
},
},
],
});
Raw
09. Separate files for animations
animations
> animationEnter.js
> animationLeave.js
> index.js
app.js
> animationEnter.js
const animationEnter = (container) => {
return gsap.from(container, {
autoAlpha: 0, // Fade in the container
duration: 2, // Animation duration
clearProps: 'all', // Clear animation properties after completion
ease: 'none', // Animation easing
});
};
export defualt animationEnter
> animationLeave.js
const animationLeave = (container) => {
return gsap. to (container, { autoAlpha: 0, duration: 0.7, clearProps: 'all', ease: 'none' }); }
export default animation Leave
> index.js
export { default as animation Enter} from './animation Enter'
export { default as animation Leave } from './animation Leave'
app.js
> JS app.js > ...
import barba from '@barba/core'; 28.8K (gzipped: 9.3K)
import { animation Enter, animationLeave } from './animations';
barba.init({
transitions: [ {
once({next}) { animationEnter (next. container);
leave: ({current}) => animationLeave (current.container),
enter({next}){ animationEnter(next.container); } ]
}})
----------------------------------------------------
Raw
10. gsap ainmationEnter
1.st uncomment visiblity hitting on the .hero
2nd. in app.js uend to reset the links to aninate
const resetActiveLink = () => gsap.set('a.is-active span', { xPercent: -100, transformOrigin: 'left' });
// Initialize Barba.js
barba.init({
transitions: [
{
// Animation when loading the page for the first time
once({ next }) {
resetActiveLink();
gsap.from('header a', {
duration: 0.6,
yPercent: 100,
stagger: 0.2,
ease: 'power1.out',
onComplete: () => animationEnter(next.container),
});
},
// Animation when leaving the page
leave: ({ current }) => {
animationLeave(current.container);
},
// Animation when entering the page
enter({ next }) {
animationEnter(next.container);
},
},
],
});
animationEnter.js
const animationEnter = (container) => {
// Select elements in the container to animate
const activeLink = container.querySelector('a.is-active span');
const projects = container.querySelectorAll('.project');
const images = container.querySelectorAll('.image');
const img = container.querySelectorAll('img');
// Create a timeline animation using GSAP
const tl = gsap.timeline({
defaults: {
duration: 0.9,
ease: 'power4.out',
},
});
tl
.set(projects, { autoAlpha: 1 }) // Show projects
.fromTo(activeLink, { xPercent: -101 }, { xPercent: 0, transformOrigin: 'left' }, 0) // Slide in active link
.from(images, { xPercent: -101, stagger: 0.1 }, 0) // Slide in images
.from(img, { xPercent: 101, stagger: 0.1 }, 0); // Slide in other elements
return tl;
};
Raw
11. animationLeave.js
const animationLeave = (container) => {
// Select elements in the container to animate
const activeLink = container.querySelector('a.is-active span');
const images = container.querySelectorAll('.image');
const img = container.querySelectorAll('img');
// Create a timeline animation using GSAP
const tl = gsap.timeline({
defaults: {
duration: 0.4,
ease: 'power1.in',
},
});
tl
.to(activeLink, { xPercent: 101 }, 0) // Slide out active link
.to(images, { xPercent: 101, stagger: 0.05 }, 0) // Slide out images
.to(img, { xPercent: -101, stagger: 0.05 }, 0); // Slide out other elements
return tl;
};
Raw
12. reavealproject
const revealProject = (container) => {
const headerLink = container.querySelector('header a');
const images = container.querySelectorAll('.image');
const content = container.querySelectorAll('.content');
const h1 = container.querySelectorAll('h1');
const img = container.querySelectorAll('img');
const hero = container.querySelector('.hero');
const tl = gsap.timeline({
defaults: {
duration: 1.2, ease: 'power4.out'
}
});
tl
.set(hero, { autoAlpha: 1 })
.from(images, { xPercent: -101, stagger: 0.1 }, 0)
.from(img, { xPercent: 101, stagger: 0.1 }, 0)
.from(h1, { xPercent: 70, autoAlpha: 0 }, 0)
.from(headerLink, { yPercent: 100 }, 0)
.from(content, { autoAlpha: 0, y: 20 }, 0.2);
return tl;
}
export default revealProject;
const leaveToProject = (container) => {
const navLinks = container.querySelectorAll('header a');
const projects = container.querySelectorAll('.image');
const images = container.querySelectorAll('img');
const tl = gsap.timeline({
defaults: {
duration: 0.4, ease: 'power1.in'
}
});
tl
.to(navLinks, { yPercent: 100, stagger: 0.05 }, 0)
.to(projects, { xPercent: 101, stagger: 0.05 }, 0)
.to(images, { xPercent: -101, stagger: 0.05, }, 0);
return tl;
}
export default leaveToProject
const leaveFromProject = (container) => {
const headerLink = container.querySelector('header a');
const projects = container.querySelectorAll('.image');
const images = container.querySelectorAll('img');
const content = container.querySelector('.content');
const tl = gsap.timeline({
defaults: {
duration: 0.4, ease: 'power1.in'
}
});
tl
.to(headerLink, { yPercent: 101 }, 0)
.to(projects, { xPercent: 100, stagger: 0.05 }, 0)
.to(content, { autoAlpha: 0, ease: 'none' }, 0)
.to(images, { xPercent: -100, stagger: 0.05 }, 0);
return tl;
}
export default leaveFromProject;
> animations > JS index.js
export { default as animation Enter} from './animation Enter'
export { default as animation Leave } from './animation Leave'
export { default as revealProject } from './revealProject';
export { default as leaveToProject } from './leaveToProject'
export { default as leaveFromProject} from './leaveFromProject'
animations
> animationEnter.js
> animationLeave.js
> index.js
> leaveFromProject.js
> leaveToProject.js
> revealProject.js
app.js
app.js
import barba from '@barba/core';
28.8 K(gzipped: 9.3 K) import gsap from 'gsap';
57.5 K(gzipped: 22.7 K) import {
revealProject,
leaveToProject,
leaveFromProject,
animation Enter,
animation Leave
} from './animations';
const resetActiveLink = () => gsap.set('a.is-active span', {
xPercent: -100,
transformOrigin: 'left'
});
barba.init({
transitions: [
{ {
name: 'detail',
to: {
namespace: ['detail']
},
once({next}) {
revealProject(next.container),
leave: {(current}) => leaveToProject(current.container),
enter({next}) {
revealProject(next.container);
}
name: 'general-transition',
once({next})
{
resetActiveLink() gsap.from('header a', {
duration: 0.6,
yPercent: 100,
stagger: 0.2,
ease: 'power1.out',
onComplete: () => animationEnter(next.container)
});
leave: {
{
current
}) => animation Leave(current.container),
enter({next}) {
animationEnter(next.container);
}
},
})
to keyword go directly to the page in the namespace so it has priority
and it wont be overiten by the general tranisiton i made
usin to use get to define the transition rules for the website
also i cause new functions to changee the timeline of the animation off the functions
Raw
loading Screen
examples
https://github.com/codegridweb/Page-Transition-Using-BarbaJS-And-GSAP/blob/master/main.js
-----------------------------------------------------------------------
html
<body data-barba="wrapper">
<div class="load-container">
<div class="loading-screen"></div>
</div>
<main data-barba="container" data-barba-namespace="about-section">
<div class="header">
<h1 class="title animate-this">
abou
t page
</h1>
<div class="animate-this button">
<a href="index.html">go back to home</a>
</div>
</div>
</main>
</body>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="https://unpkg.com/@barba/core"></script>
<script
type="text/javascript"
src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.2.4/gsap.min.js"
></script>
<script src="main.js"></script>
index.html
<link rel="stylesheet" href="main.css" />
</head>
<body data-barba="wrapper">
<div class="load-container">
<div class="loading-screen"></div>
</div>
<main data-barba="container" data-barba-namespace="home-section">
<div class="header">
<h1 class="title animate-this">
home page
</h1>
<div class="animate-this button">
<a href="about.html">go to about</a>
</div>
</div>
</main>
</body>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="https://unpkg.com/@barba/core"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.2.4/gsap.min.js"></script>
<script src="main.js"></script>
</html>
-----------------------------------------------------------------------
css
html,
body {
margin: 0;
padding: 0;
background: #161616;
color: white;
}
.loading-screen {
position: relative;
padding-left: 0;
padding-right: 0;
padding-top: 0;
background-color: #4bedc2;
width: 0%;
height: 100%;
}
.load-container {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100vh;
overflow: hidden;
z-index: 10;
pointer-events: none;
}
h1 {
position: absolute;
top: 38%;
left: 50%;
transform: translate(-50%, -50%);
font-family: "Cosi Azure";
font-size: 84px;
}
.button {
position: absolute;
top: 60%;
left: 50%;
transform: translate(-50%, -50%);
}
.button a {
font-family: Arial, Helvetica, sans-serif;
text-decoration: none;
color: white;
border: 1px solid white;
padding: 24px 40px;
text-transform: uppercase;
letter-spacing: 4px;
font-size: 10px;
transition: 0.3s;
}
.button:hover a {
background: white;
color: #161616;
transition: 0.3s;
}
-------------------------------
main.js
function delay(n) {
n = n || 2000;
return new Promise((done) => {
setTimeout(() => {
done();
}, n);
});
}
function pageTransition() {
var tl = gsap.timeline();
tl.to(".loading-screen", {
duration: 1.2,
width: "100%",
left: "0%",
ease: "Expo.easeInOut",
});
tl.to(".loading-screen", {
duration: 1,
width: "100%",
left: "100%",
ease: "Expo.easeInOut",
delay: 0.3,
});
tl.set(".loading-screen", { left: "-100%" });
}
function contentAnimation() {
var tl = gsap.timeline();
tl.from(".animate-this", { duration: 1, y: 30, opacity: 0, stagger: 0.4, delay: 0.2 });
}
$(function () {
barba.init({
sync: true,
transitions: [
{
async leave(data) {
const done = this.async();
pageTransition();
await delay(1000);
done();
},
async enter(data) {
contentAnimation();
},
async once(data) {
contentAnimation();
},
},
],
});
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment