The Killer GSAP ScrollTrigger Animation That Will Wow Any User

Подписаться 117 тыс.

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

50% 1

Elevate your website with an awe-inspiring scrolling experience! Learn to code a sick GSAP/ScrollTrigger animation using HTML, CSS & JavaScript!
Source Code: codegrid.gumroad.com/l/codegr...
Inspiration ▸ Element from Gabriel Contassot
Website: gabrielcontassot.com/
Timestamps:
00:00 Demo
01:05 HTML
02:23 CSS
05:00 JavaScript
Instagram: / codegridweb
Twitter: / codegridweb
Public Discord: / discord
Music from Artlist.
Thanks for watching!

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

10 июн 2024

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист

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

Комментарии : 38

@user-hr1db4mo8f 2 месяца назад

When ever you add your voiceover on your videos its really getting easy to understand your code 🔥🔥 keep itup bro 👐👐

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

Thanks brother

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

Amazing tutorial ideas 🙌🔥🔥

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

Thanks!

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

Amazing Bro. Thanks 🔥

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

Thanks 🙏🏽

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

Excellent 🔥💯🔥

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

Thanks

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

Hi! aesthetically correct, but you should maintain a semantic consistency of content by placing the title and image in the same container.

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

Okay sir!

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

so niceee

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

Thanks

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

Super easy to follow along, I have one question tho and that is how you get that smooth scroll effect? When I scroll it stops instantly when I stop scrolling with my mouse wheel

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

Try adding locomotive scroll

@adeniranjoshua1608 Месяц назад

Hello Codegrid, please I'm getting an error in the console that "GSAP target null not found." and I have check everywhere everything seem fine according to how I followed the way you wrote the code any Idea where else I can look? Thank you

@be3turas 3 дня назад

Did you figure it out?

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

goated content man!🔥

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

Thanks a lot 🙌🏼

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

this code is not working I had copied you end to end and Im having error in this 2 line let section = document.querySelector(sectionId); let preview = document.querySelector(previewId); console is keep saying that this 2 (sectionId and previewId ) are not defined

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

Works on my end. You need to pass those into the function parameters in the later part of the code brother.

@tunasteven 17 дней назад

startClipPath didn't use ???

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

Bro do you work in any comapany or are you self-employed?

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

Yes, 9-5

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

Is it responsive ?

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

Haha why not! I mean can adjust the width and height of the images based on your need, not any rocket science! There’s nothing else to expect on the page to expect “responsiveness” from. Thanks

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

why you use position fixed in every video, it is ok for single page or single container... but when we add this section in a website in center or in bottom it create so much issues, because for that time if we use any other property, animation don't work and create so much issues, a request if you use any property that instead of position fixed, that its more helpful for everyone, thanks😍😍😍😍

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

I don’t use fixed position out of my choice but it stays the requirement in order to achieve similar results of a particular website. I get your point but you can also remove that copy container as IT HAS NOTHING TO DO WITH THE ANIMATION. If you’re animation doesn’t work, there has to be some other issue with your code. The JS code is not touching that element at all! Thanks

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

@@codegrid okkkkk thanks

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

background-attachment: fixed; ?

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

Lol. Give it a try and see if it gives you the same results 😂

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

Please do more of nextjs + tailwindcss!

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

Okay sir!

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

omg so creative why don't you use tailwind css for unnecessary part??

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

I personally don’t like it

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

Yeah vanilla css/scss is better

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

@@Way_Of_The_Light No it isn't lol. Original site uses tailwind, it's everywhere. The best css library to use at the moment.

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

@@creaky2436 it just makes the html ugly and makes incorporating advanced CSS animations like animations from codepen difficult. Majority of the developers still prefer to use vanilla CSS/SCSS to keep things organized. There’s no reason to waste time learning tailwind anyway if you’re already pretty good with CSS.

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

@@Way_Of_The_Light In that case, you would use custom css in your globals.css file and use @components directive. Tailiwind standardizes css and makes things consistent across the board, easily readable once you understand the classes, and highly customizable for theming. You can develop an mvp so much faster with tw. I don't mind bloated classnames.