Creating Sick Page Transitions with Barba.js & GSAP

[@DesignCourse]

If you watched this and thought, "My oh my. I actually don't want to kill this guy" -- Click that subscribe button!

[@DesignCourse]

@Auom 120 Swnasiqubulotosife What part?

[@itscooldawgdonteventrip]

@Auom 120 Swnasiqubulotosife subscribe and don't kill the guy :)

[@Zero-oq1jk]

I consider eye 4 an eye, since you've killed it.

[@davidahwin7080]

please can u explain if there is a way to use the page transitions when the css on each page is different, when i move from one page to another in my project the css is different so the transition doesn't work , please can u help?

[@fragileglass9622]

Ahhhhhh! I am so happy you’re covering this. I’ve been wanting to use BarbaJS for awhile. They changed the API for version 2 and I couldn’t figure it out!! 🙌🙌🙌

[@ritwikmath7937]

Finally a video that shows how its done... Thanks a lot... You amd Brad are helping poor people like me a lot.. God bless you

[@jflo911b]

You're among the best,Gary! Big Thanks from Paris, France !

[@schemagroup1]

No way perfect timing, was just think of writing a library for this, because current frameworks are cumbersome for this type of medium, but Barbara.js is where its at!!.

[@kirillsander4607]

Nobody dont create animations on barba.js 2.0 version on YT. THANK YOU MUCH FOR THIS VIDEO!

[@rajchhatrala5988]

You and Brad Traversy should not upload at same time, I get confused which one to watch first :(

[@DesignCourse]

I KNEW it'd be a problem! 😂 Damn Brad was 2 minutes before me.

[@TraversyMedia]

We will have to coordinate better lol :)

[@peterream6508]

And thanks to this comment, I now have someone ELSE to follow on KZbin.

[@maximumcockage6503]

@@TraversyMedia top 10 anime crossovers

[@trisomik_gaming69]

mexican standoff

[@Andrea-Giachetto]

I love your tutorials, I think this is one of the best tech KZbin channel I've ever subscribed. Keep pushing Brad.

[@arkasaha2156]

Omg 🔥🔥🔥 sir .. that is really sick.. 😎🔥🔥🔥🔥🔥

[@riprap007]

Just what I've been looking for, thanks

[@Pavfixers]

Wow, amazing! you are an amazing teacher and person for sharing your knowledge !!!! only watching yours and Brad Traversy channel!!!

[@edgarwanjala7788]

Of-course we enjoyed dude!

[@abhishekjha1884]

I don't know how to thank you enough!! You are an amazing person, You always seem the have the solution. I really needed this video, Thank you so much!!

[@ashenknight]

yess i really enjoy your tutorial man... Keep it up!!

[@foriwill7384]

You can see at 19:42 on the right side there is a line in the middle of the picture. Any one knows how to solve this bug?

[@socialkruption]

anyone else struggling to get this to work? Animations work for me but the page doesn't refresh the content.

[@Pavfixers]

can we get your code for this tutorial i try to follow on video but seems like i mess up

[@aqumus]

This is good stuff, keep it going, I have learned so much from your videos, design related video and new libraries related videos. Would like some more live streaming design related session where you rated others website from 1 to 10, your feedbacks were so constructive.

[@ismaeelyaghoubi1212]

Can I use this page transition on wordpress?

[@jayalterego6560]

I Love You For This Mr DesignCourse...

[@joseaugustogutierrez6705]

It is possible to make this transitions when I roll my mouse wheel?? I do not know If I expalain myself well but I have seen some websites that change content and make transitions in texts and images when you turn the mouse wheel It would be great to have a tutorial about it, or if anyone knows how to do this please tell me I'd appreciate it 😭

[@aleciavogel]

ScrollMagic might be what you're looking for. It's a javascript library that listens to scroll events

[@PabloPicaso]

what if we are on about page and click on about page in navigation again, it reloads the page. how to prevent that ?

[@ZiafatAli]

Excellent tutorial 😍

[@shanemur]

If you create a link for another page below the viewport (half way down the page) the animation li elements get animated at that point & NOT at the bottom of the page, why? Anybody experience this issue with barba js?

[@johanstam3602]

My GSAP code is not working due to the barba.js. Have to reload the page to get the GSAP working. What should I do?

[@hakimramzani9174]

cool, keep it up with great content 👍

[@tinotaylor]

Are there any issues with the cdn for JS? I'm getting DevTools failed to load SourceMap: Could not load content for barba

[@taywoo8216]

Same.. Did you manage to find a solution?

[@slimhamdi]

Thank you so much for this great tutorial

[@yasirjafar6794]

finally Barba.js !!

[@HarpreetSingh-cz2zh]

Question, Can't we just use GSAP animations to work on transitions or is it better to incorporate Barba.js?

[@imbamk9394]

up

[@niteshkrsah2222]

Your contents are lovely

[@davidahwin7080]

please can u explain if there is a way to use the page transitions when the css on each page is different, when i move from one page to another in my project the css is different so the transition doesn't work , please can u help?

[@Zim_88]

in 12.07 what is this function? from where it was copied?: "function delay(n) { n = n ||2000; return new Promise(done => { setTimeout(() => { done(); }, n); }); }" in index.js

[@arnoldsupriyadi]

my mine not running well, may i knowing your respository? thank you

[@林柏宏-t5p]

Hi, here's a problem I found and would like to know how to fix it. The transition does work but the page does not load properly. If the button is somewhere down below and click it will take me to where the link is but it'll maintain the exact same position, which does not trigger the load function correctly. Anyone know what i'm saying and could help out? thanks

[@Horoe]

this tut fried my brain, if I had any

[@juvie1]

is this possible in wordpress?

[@mzosama]

Is there any tutorial available, how to integrate Babra and GSAP into WordPress, especially, if you are using Divi as the default theme? Thanks.

[@xman3666]

What about if I have 3 differents JS script on each page? 😭😭😭😭😭 ex.: index.html script.js about.html about.js projects.html projects.js

[@Kabarza]

Is there an easier way to create this? For example create the pages in webflow and use barba.js to animate the page transition?

[@peternicholson26]

Does anyone know of any good documentation about using this with WordPress? As it's a pain with the dynamic header and footer and plugins calling JS.

[@FilthySnob]

I think i'm missing something, i don't understand how is using barbajs any better than simply using raw JS fetch api to fetch the needed html and append it with animations, or jquery .ajax() ?

[@dhruvmishra8396]

Thanks for the awesome video, just wanted to know that can we import it in the angular project? i am not able find anything like that. Thanks

[@alitopedits]

this works with liveserver only. but when i open the index.html file alone without liveserver, it doesn't work. none of the gsap works.

[@harrinsonA]

Hello, I have a question! Where is the base code? Thanks!

[@alexlytle089]

one small bug is if you refresh the services page the website crashes. How could I fix that??

[@emmanuelcampos9247]

can i integrate barba js with next js or react js?

[@strugglingElds]

is Barba is for SPA ONLY? what if I want to use in dynamic menu like wordpress it will work??

[@bijan1432]

Yess

[@sergiojunior972]

one question, why it works only with live server and not with Chrome?

[@dariahiguchi5890]

Barba doesn't load when I use parcel... is there a source code for this video?

[@sooryakriz2396]

Thanks Buddy ❤️❤️❤️

[@UjjwalMishra_68]

Can i do this with react?

[@manuelh7625]

What VS-Code Plugin do you use for compiling SASS-Files?

[@StDarkPha]

how can i use my own transition without using gsap??

[@christostsangaris4785]

Nice!! Is there a drawback using such techniques on a Laravel project? I mean i terms of SEO and performance. Thanks

[@I_hu85ghjo]

Good day people of the internet, i've got a problem. I cant open my live server in visual studio code. I received the following error: ""Extension host terminated unexpectedly." And my extensions for html,css and javascript dont work as well. I've tried installing and reinstalling my visual studio code, but i had no luck. How can i fix this Thank you for your help

[@vaibhavmanni5900]

For me, my antivirus deleted files of extensions in the visual studio code's installation directory. So, I just excluded my extensions folder from the virus protection and it solved the problem.

[@naufalaulia2894]

i just uninstalled it and install it again, for me it works

[@leebernardo498]

Hi! Where can I get a link for gsap cdn? most links i find are 404 :(

[@mkm1015]

Gary, you are an awesome dude. So much knowledge & tips on your channel. Thank you for everything, seriously. A quick question- I want to get into graphic design but don't know should I focus just on one thing (logo deisgn or web design for example) or be a ninja master like you?? :) I mean you know EVERYTHING ( logo design, web/UI deisgn, front-end dev) Specialize or generalize? What is in demand?

[@angingrigoryan1637]

This is very cool, but I just want to know if I can use Barba.js in react

[@elijahpinxit]

First, thank you for this tutorial. does barbajs affect the seo page?

[@TomHermans]

No, since it takes effect on the contents of the page which is basic HTML, which is just spiderable by searchrobots. Content is not injected or anything.

[@scooble]

what is "main.css.map"? Whats it used for? How do I make one? Is it necessary for this project?

[@tonsofcode2478]

Your project can run perfectly without css.map, you get that file when you watch the sass file.

[@АзимАлиев-т7н]

tell me,what is better - barba or highway.js?

[@glenn4140]

How does this affect SEO?

[@WTHBrou]

Question, on my code it isn't properly working. Once I load the page the img is already up, the transition comes from the bottom and shuts down the image. It dissapears. I tried getting rid of the initial clip-path in the css and the image shows, but then it's width gets reduced as the animation goes and dissapears again. Anything but that works. All code > controlc.com/4d5dd322

[@younesmeskafe4092]

tl.to('img', { clipPath: "polygon(0 0, 100% 0, 100% 100%, 0% 100%)" },) not tl.from('img', { clipPath: "polygon(0 0, 100% 0, 100% 100%, 0% 100%)" },)

[@shahzadmujtaba1725]

Please use dogstudio highway lib and do animations by usinn node js and expresss

[@peternicholson26]

I have this working great until I am trying to use in on pages with any kind of JS dependancy, eg. when using a slider like slick or when there is a plugin on the page pulling through social media feeds. Fairly sure I need to call any of those types of things in 'views' but haven't quite figured it out

[@emiliabella9017]

I copyed you code but the transition not work? please help

[@djeudy]

Try to take the first clip path he puts in the CSS... just use the one he used in the javascript file good luck..

[@emiliabella9017]

@@djeudy thanks

[@arneilbarba293]

i want to learn these library

[@felipetoro7878]

Amazing, tks for share!!!

[@mazdaknazemi8207]

first thank you for all your clear content , can you provide animate tutorial for react-router and how make animation hoc for re-use. thank you. waiting for your response.

[@manhattan2612]

I'm watching your amazing videos and I noticed you often look on your right... do you have another monitor with the work already done?

[@DesignCourse]

Yes. A reference monitor. I could wing it without doing that, but chances are, it'd be more messy with pauses / screw ups.

[@JuanMunoz-th3vn]

Hi Gary, when you show us you guitars?, 500k subs

[@barzinlotfabadi4230]

Love it 😯

[@dai180293]

Awesome Tutorial, I have one issue though, I am getting an error Uncaught ReferenceError: barba is not defined this is indicated at line 26 which is barba.init() anyone have a solution? It would be much appreciated!

[@adrianljh]

hope im not late, you can try to put ur index.js file link below barba.js link so that the page can "read" the barba file before going through ur js codes. atb n cheers!

[@dai180293]

@@adrianljh Not at all, thank you for the reply, I will get back to you if it works or not 🙂

[@785_barneetpanda5]

@@adrianljh didnt work for me

[@Nightizm]

Is this easy to implement with Vue/Nuxt?

[@Magistrado1914]

Excellent tutorial 29/05/2020

[@edisvelicanin8854]

came across a bug. I recreated this tutorial, step by step. When all was done, and i got the same result as you did, i wanted to see what happens when you click a bit faster. So, when you are HOME (index.html) and you click the link to take you to the services page, while the services page is loading, and the animations are running, click the services link in the navigation again. Everything still works, but you will find that our container has lost all of its padding. And if you repeat this process again, you will get the padding back. Weird. Anyways, thanks for the tutorial, learned a lot :)

[@mariospittas9331]

Can you make a tutorial on "Smooth Scrollbar"?

[@FernandoParmezaniOficial]

Tks for share!

[@sultonbekovs9269]

Amazing!

[@seldonhary]

I have written the code and I have reviewed it a thousand times and it does not work

[@shankarsaurabh]

Loved all of your work.. but the only problem we face as designer is that, usually all these third party open source libraries get prohibited by clients we work for, for obvious reasons that they are not from a trusted source. However, this for sure would give a lot of idea while implementing transition and animations.

[@Hyeronymus23]

Cool! can we use Barba with Elementor?

[@code.design]

Tutorial summarized: huh, ah, huuuuum, oh, aaa, ha, eeuuuu, uh-oh, ugh, ah, euh, ehhh

[@rennesinternet3872]

you could do whole of that with only Gsap, no ?

[@musthavechannel5262]

Like loading the next page, stripping off the "static" content, injecting the dynamic content in a separate container and then injecting the new container in the dynamic part of the page skeleton and then removing the original content of the now previous page? Yes? of course you can do it without barbajs and astonishingly all with plain javascript... proof? the barbajs guys did just that and put their code in a, barba.js so that you don't have to do it.

[@haroldpepete]

Tutorial or copyorial maybe

[@Alessandro-nq3tm]

Barba means beard in Italian ! :)

[@codehack3536]

Awesome ...!!!

[@me-05-souvikduttachowdhury93]

Don't press enter and vs won't do that.

[@Artificial_Intelligence_AI]

🧔.js

[@jervx829]

i noticed in his tutorials he kept looking at his right. what

[@DesignCourse]

It's my reference monitor ;)

[@Pavfixers]

@@DesignCourse it doesn't matter you looking as a reference it's all about what you put on the table !!

[@jasonoda]

I love your tutorials, but this one is way more confusing than it needs to be. All this flashy stuff that has nothing to do with barba.js. You lost me. Had to train elsewhere on this one.

[@dantegajdos5391]

shocking tutorial....bloody awful

[@Dropsen1]

+DesignCourse lol, you are bad, man. you are just copying your code from third monitor.. you call it coding? 2/10.