Creating Sick Page Transitions with Barba.js & GSAP

Рет қаралды 134,352

Күн бұрын

Visit linode.com/designcourse for a $20 credit on your new linode account.
-- Ever wonder how some of those amazing artsy sites pull off seemeless page transition animations? It could be with the help of Barba.js. So, today, I'll show you how to quickly and easily get up and running with Barba.js along with GSAP (GreenSock Animation Platform) to handle the actual animations.
barba.js.org
Github repo that this project is inspired on:
github.com/karanmhatre1/barba...
Swup.js tutorial referenced in this video:
• Creating Page Transiti...
Let's get started!
- - - - - - - - - - - - - - - - - - - - - -
Subscribe for NEW VIDEOS!
My site: designcourse.com
My personal FB account: logodesigner
Coursetro FB: coursetro
Coursetro's Twitter: / designcoursecom
Join my Discord! / discord
^-Chat with me and others
- - - - - - - - - - - - - - - - - - - - - -
Who is Gary Simon? Well, I'm a full stack developer with 2+ decades experience and I teach people how to design and code. I've created around 100+ courses for big brands like LinkedIn, Lynda.com, Pluralsight and Envato Network.
Now, I focus all of my time and energy on this channel and my website Coursetro.com.
Come to my discord server or add me on social media and say Hi!

Пікірлер: 124

@DesignCourse 4 жыл бұрын

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

@DesignCourse 4 жыл бұрын

@Auom 120 Swnasiqubulotosife What part?

@TheBlackManMythLegend 4 жыл бұрын

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

@Zero-oq1jk 4 жыл бұрын

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

@davidahwin7080 3 жыл бұрын

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 4 жыл бұрын

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!! 🙌🙌🙌

@jflo911b 4 жыл бұрын

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

@ritwikmath7937 4 жыл бұрын

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

@aqumus 4 жыл бұрын

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.

@Andrea-Giachetto 4 жыл бұрын

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

@riprap007 4 жыл бұрын

Just what I've been looking for, thanks

@abhishekjha1884 4 жыл бұрын

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!!

@Pavfixers 4 жыл бұрын

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

@ashenknight 3 жыл бұрын

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

@rajchhatrala5988 4 жыл бұрын

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

@DesignCourse 4 жыл бұрын

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

@TraversyMedia 4 жыл бұрын

We will have to coordinate better lol :)

@peterream6508 4 жыл бұрын

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

@maximumcockage6503 4 жыл бұрын

@@TraversyMedia top 10 anime crossovers

@trisomik_gaming69 4 жыл бұрын

mexican standoff

@kirillsander4607 4 жыл бұрын

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

@schemagroup1 3 жыл бұрын

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!!.

@jayalterego6560 4 жыл бұрын

I Love You For This Mr DesignCourse...

@edgarwanjala7788 3 жыл бұрын

Of-course we enjoyed dude!

@slimhamdi 3 жыл бұрын

Thank you so much for this great tutorial

@ZiafatAli 4 жыл бұрын

Excellent tutorial 😍

@hakimramzani9174 4 жыл бұрын

cool, keep it up with great content 👍

@arkasaha2156 3 жыл бұрын

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

@mkm1015 4 жыл бұрын

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?

@niteshkrsah2222 3 жыл бұрын

Your contents are lovely

@yasirjafar6794 4 жыл бұрын

finally Barba.js !!

@Horoe 4 жыл бұрын

this tut fried my brain, if I had any

@socialkruption 2 жыл бұрын

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

@felipetoro7878 4 жыл бұрын

Amazing, tks for share!!!

@sultonbekovs9269 4 жыл бұрын

Amazing!

@Pavfixers 4 жыл бұрын

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

@dhruvmishra8396 3 жыл бұрын

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

@FernandoParmezaniOficial 4 жыл бұрын

Tks for share!

@sooryakriz2396 3 жыл бұрын

Thanks Buddy ❤️❤️❤️

@barzinlotfabadi4230 4 жыл бұрын

Love it 😯

@christostsangaris4785 4 жыл бұрын

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

@ismaeelyaghoubi1212 4 жыл бұрын

Can I use this page transition on wordpress?

@elijahpinxit 4 жыл бұрын

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

@TomHermans 3 жыл бұрын

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.

@manuelh7625 4 жыл бұрын

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

@mzosama 3 жыл бұрын

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

@mazdaknazemi8207 4 жыл бұрын

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 4 жыл бұрын

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 4 жыл бұрын

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 4 жыл бұрын

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

@Kabarza 3 жыл бұрын

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

@Magistrado1914 4 жыл бұрын

Excellent tutorial 29/05/2020

@HarpreetSingh-cz2zh 4 жыл бұрын

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

@imbamk9394 Жыл бұрын

@harrinsonA 4 жыл бұрын

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

@codehack3536 4 жыл бұрын

Awesome ...!!!

@davidahwin7080 3 жыл бұрын

@tinotaylor 3 жыл бұрын

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

@taywoo8216 3 жыл бұрын

Same.. Did you manage to find a solution?

@angingrigoryan1637 4 жыл бұрын

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

@johanstam3602 2 жыл бұрын

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?

@mariospittas9331 4 жыл бұрын

Can you make a tutorial on "Smooth Scrollbar"?

@user-hj4zo2bd5w 2 жыл бұрын

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

@juvie1 3 жыл бұрын

is this possible in wordpress?

@sfsf285 2 жыл бұрын

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() ?

@shanemur 3 жыл бұрын

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?

@Zim_88 3 жыл бұрын

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

@gauravboob8737 Жыл бұрын

Can we use barba with react?? If yes we need your help

@code.design 2 күн бұрын

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

@PabloPicaso Жыл бұрын

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

@arnoldsupriyadi8672 Жыл бұрын

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

@alexlytle089 4 жыл бұрын

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

@Nightizm 4 жыл бұрын

Is this easy to implement with Vue/Nuxt?

@shankarsaurabh 4 жыл бұрын

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.

@peternicholson26 3 жыл бұрын

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.

@sergiojunior972 3 жыл бұрын

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

@leebernardo498 4 жыл бұрын

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

@dariahiguchi5890 3 жыл бұрын

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

@Alessandro-nq3tm 4 жыл бұрын

Barba means beard in Italian ! :)

@user-gf5do5jk4m 3 жыл бұрын

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

@emmanuelcampos9247 2 жыл бұрын

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

@peternicholson26 4 жыл бұрын

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

@arneilbarba293 3 жыл бұрын

i want to learn these library

@joseaugustogutierrez6705 3 жыл бұрын

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 3 жыл бұрын

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

@strugglingElds 2 жыл бұрын

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

@bijanmondal4639 Жыл бұрын

Yess

@StDarkPha 3 жыл бұрын

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

@shahzadmujtaba1725 3 жыл бұрын

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

@theburstgamer962 7 ай бұрын

Can i do this with react?

@alitopedits 2 жыл бұрын

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.

@foriwill7384 9 ай бұрын

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?

@scooble 3 жыл бұрын

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

@tonsofcode2478 3 жыл бұрын

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

@WTHBrou 4 жыл бұрын

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 3 жыл бұрын

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%)" },)

@glenn4140 3 жыл бұрын

How does this affect SEO?

@xman3666 3 жыл бұрын

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

@abcdefg91111 4 жыл бұрын

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 4 жыл бұрын

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 3 жыл бұрын

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

@edisvelicanin8854 4 жыл бұрын

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 :)

@emiliabella9017 2 жыл бұрын

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

@djeudy 2 жыл бұрын

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 2 жыл бұрын

@@djeudy thanks

@haroldpepete 3 жыл бұрын

Tutorial or copyorial maybe

@Hyeronymus23 3 жыл бұрын

Cool! can we use Barba with Elementor?

@seldonhary 2 ай бұрын

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

@dai180293 3 жыл бұрын

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 3 жыл бұрын

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 3 жыл бұрын

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

@785_barneetpanda5 2 жыл бұрын

@@adrianljh didnt work for me

@rennesinternet3872 4 жыл бұрын

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

@musthavechannel5262 4 жыл бұрын

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.

@me-05-souvikduttachowdhury93 4 жыл бұрын

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

@Artificial_Intelligence_AI 4 жыл бұрын

🧔.js

@jervx829 4 жыл бұрын

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

@DesignCourse 4 жыл бұрын

It's my reference monitor ;)

@Pavfixers 4 жыл бұрын

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

@jasonoda 3 жыл бұрын

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.