Creating Sick Page Transitions with Barba.js & GSAP

Подписаться 1,1 млн

Просмотров 134 тыс.

50% 1

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!

Хобби

Опубликовано:

19 июн 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 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

@riprap007 4 года назад

Just what I've been looking for, thanks

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

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

@Andrea-Giachetto 4 года назад

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

@Pavfixers 4 года назад

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

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

@kirillsander4607 4 года назад

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

@ashenknight 3 года назад

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

@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

@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 RU-vid.

@maximumcockage6503 4 года назад

@@TraversyMedia top 10 anime crossovers

@trisomik_gaming69 4 года назад

mexican standoff

@ZiafatAli 4 года назад

Excellent tutorial 😍

@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?

@hakimramzani9174 4 года назад

cool, keep it up with great content 👍

@niteshkrsah2222 3 года назад

Your contents are lovely

@FernandoParmezaniOficial 4 года назад

Tks for share!

@yasirjafar6794 4 года назад

finally Barba.js !!

@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

@barzinlotfabadi4230 4 года назад

Love it 😯

@socialkruption 2 года назад

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

@sooryakriz2396 3 года назад

Thanks Buddy ❤️❤️❤️

@Horoe 4 года назад

this tut fried my brain, if I had any

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

@christostsangaris4785 4 года назад

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

@davidahwin7080 3 года назад

@manuelh7625 4 года назад

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

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

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

@HarpreetSingh-cz2zh 4 года назад

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

@imbamk9394 Год назад

@Magistrado1914 4 года назад

Excellent tutorial 29/05/2020

@codehack3536 4 года назад

Awesome ...!!!

@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?

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

@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?

@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?

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

@JuanMunoz-th3vn 4 года назад

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

@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

@harrinsonA 4 года назад

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

@angingrigoryan1637 4 года назад

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

@arnoldsupriyadi8672 Год назад

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

@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?

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

@leebernardo498 4 года назад

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

@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

@alexlytle089 4 года назад

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

@PabloPicaso Год назад

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

@juvie1 3 года назад

is this possible in wordpress?

@Nightizm 4 года назад

Is this easy to implement with Vue/Nuxt?

@gauravboob8737 Год назад

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

@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

@sergiojunior972 3 года назад

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

@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

@mariospittas9331 4 года назад

Can you make a tutorial on "Smooth Scrollbar"?

@emmanuelcampos9247 2 года назад

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

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

@dariahiguchi5890 3 года назад

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

@theburstgamer962 7 месяцев назад

Can i do this with react?

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

@strugglingElds 2 года назад

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

@bijanmondal4639 Год назад

Yess

@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?

@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

@user-gf5do5jk4m 3 года назад

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

@Alessandro-nq3tm 4 года назад

Barba means beard in Italian ! :)

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

@glenn4140 3 года назад

How does this affect SEO?

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

@arneilbarba293 3 года назад

i want to learn these library

@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

@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

@code.design 5 дней назад

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

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

@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

@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?

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

@seldonhary 2 месяца назад

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

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