Smooth Skew Scrolling in React

[@WrongAkram]

Need to mention: Keep using translate3d over translateY as it does provide better performance. Thanks to @TheDjTotzy & @lorem ipsum for the info.

[@venkateshy627]

quick question window size (height of the body) is not updating when i open different inner links? unless i resize it

[@venkateshy627]

when i use routes height is not refreshing, like how your website does.what you have done man... let me know..

[@venkateshy627]

@Izaiah Seth so you don't knw the answer

[@KIKOmanasijev]

This is f**king premium quality content!!! I've never seen any course on Udemy or any other educational platform built such amazing projects. You deserve a lot more attention.

[@WrongAkram]

Man you spittin straight fax 📠

[@weirdscintillatingvedios2122]

Saved me. I was developing my portfolio, and these GSAP people made the Smooth Scroll feature a paid service now. Because of you, I could implement, smooth scroll myself thank you.

[@kyryloren]

love the tutorials. you’ve gotten so much more comfortable on camera, can’t wait to see you fly high 👑

[@WrongAkram]

Thanks! Glad you noticed :) looking to keep improving

[@TheDjTotzy]

Hey Akram really cool videos, I just wanted to point out that using the translate3d is a good idea when you want to leverage the CPU since it's using GPU driven animation. Keep up the good work bro !

[@WrongAkram]

Thanks, you are absolutely right! Just checked it out :)

[@adarshgoldar]

Really waiting for this smooth scrolling tutorial, and finally, you made it 😍 . Thanks for this 🙌

[@WrongAkram]

My pleasure 😊

[@jafetl.ch.8961]

I love tour tutorials and projects. 🙌🏼

[@WrongAkram]

WOW Thank you!!!!

[@chokdeesam2365]

The best channel ! Thank you my friend !

[@WrongAkram]

Thank you so much!

[@RahulSharma-ox6se]

This was super helpful, Akram. Thanks for the video

[@vladimirlopez6005]

It's the best content I've ever seen, thanks!

[@MiserableDuck95]

Hey! Awesome tutorial as always. Question, does the app ref have a purpose? It looks like it's unused in the tutorial.

[@matthewao]

Holy subbed in a heartbeat. You’re on your way to 100k bro this is 👌🏼

[@florentinw]

Hi, thanks for all those great framer motion tutorials! which camera setup are you using for the moderation shots?

[@WrongAkram]

Thanks! The camera I am using is the Cannon m50 with the Sigma 16mm 1.4

[@OBnoxiousXBOX]

Hey man! Really appreciate the content . Have just got in to react and what you are creating is inspiring. Keep it up!

[@venkateshy627]

quick question window size(height of the body) is not updating when i open different inner links? unless i resize it

[@prateeksharma4327]

impressive tutorial bro ... keep up the good work

[@WrongAkram]

Glad you liked it

[@everflavor13]

Hi! Akram. I really appreciate all your lectures. I have some questions regarding performance optimization. I think we should use cancelAnimationFrame function when scroll movement stopped then call requestAnimationFrame when the scroll event triggers again. Isn't it? When we console data values inside skewScrolling function, seems there are unnecessary computing for setting data values. I just want to hear your opinion. Thanks, again.

[@КомпанияВиалент]

U're just great speaker, great content. I hope to see more videos like this from you, I wish you rise high with a subscribers number. Good luck.. you're cool!

[@WrongAkram]

I hope so too!

[@thabangcreates]

I died at "arg fxck this place ... I sound bitter huh" 🤣🤣🤣😭💀

[@WrongAkram]

lol

[@williamjunior5553]

Best tutorial available on KZbin. Thanks mate 👍

[@WrongAkram]

🤩 glad you think so!

[@rodrigogama1]

Great work! Your tutorials are really impressive!

[@WrongAkram]

Thanks, that really means a lot!

[@hugomeireles6020]

Nice work, One question. Why you don´t cancel animation on effect? is not necessary?

[@WrongAkram]

Are you referring to a clean up function in the useEffect?

[@hugomeireles6020]

@@WrongAkram yes, because when I don´t clean up the function sometimes the animation has an issue, but in general nice work, keeps going on the nice job.

[@Ihatetomatoes]

Great stuff Akram, keep it up👍

[@WrongAkram]

Thank you 🙌

[@navinjetha]

This is amazing! Just wondering how to change this into a horizontal scroll...do you have a tip on this?

[@da.b3102]

Great tutorial! thank you very much!

[@tehArgento]

Great video, how would i reset scroll position on reload because it's just taking me back to the last position i was in even though i use window.scrollto(0,0). Problem doesn't happen on Firefox but it does on chrome

[@joetaylor6117]

This is great but the function doesnt unmount when changing page

[@guillaumedumez5033]

did you find a solution ? :/

[@safsafaf2838]

yo thats clear af

[@shujaa]

Hey love this great content but the page brakes when you are transitioning to another page it gives an error that the scrollContainer is null

[@peymanta8923]

Awesome Tuts, Thank you sir.

[@mohamedboularas6480]

keep it going yuor tuto's ar amazing ❤️❤️❤️❤️

[@UncleNabs]

Love the tutorials as always! Went over to his site. Would there ever be tutorials on web gl masks

[@ABDULMANAN-el8gr]

Hey Akram. Hope you are doing great May you please do a video over the Fundamental Architecture Of React 🙃

[@ks-op8pe]

Awesome! Thanks!

[@sarthakdandotiya]

Keep these lit tutorials coming...

[@WrongAkram]

Will do!!

[@ayanluap]

can u plz.. make a tutorial of how to use full-calender library in react and customize it in our own way... Btw i already learned a lot of cool animation stuffs from ur videos... I m so glad that i found ur channel❤❤

[@pebbles7227]

it works well but whenever I click on any anchor tag on the page and if it linked to any element in the page the page breaks

[@Tyler-zb6ec]

Im getting: "ReferenceError: window is not defined" in the useWindowSize hook any thoughts on why? Using Nextjs btw

[@alldesigncode]

This is very good!

[@kerovinvillegas6402]

Thanks for this but I wanna know the reason behind the values on computing the skewConfig like why 100? Thanks again

[@bernardopapini]

Amazing tutorial! But using this solution, I can't positioned fixed any element (like a navbar or a "back to top" button, for example). How can I use in this case?

[@abhayrohit]

Either have the Element outside the scroll container or just add Scroll Event Listener and set the item's left and top coordinates as offsetX and offsetY

[@TheSldsnake]

Men u are my hero !

[@WrongAkram]

;)

[@mdyousufgazi4030]

epic! loved it

[@junaidtariq4547]

Ihatetomatoes mention you in recent video and he advice you to remove the wrong akram and just put akram by the way your all tutorial are awesome and thanx buddy 😍

[@Ihatetomatoes]

Haha, yes you are right I would rename it 😂

[@junaidtariq4547]

@@Ihatetomatoes 😂😂

[@Ihatetomatoes]

@Sentinel haha, is this a contest for the worst channel name? Maybe we would be the finalists :)

[@srdesigns7258]

Hi, Is still that applicable on Webflow ? If yes, how ?

[@sakshamkapoor5905]

Thanks man, this is lit ❤

[@WrongAkram]

Glad you like it!

[@sakshamkapoor5905]

@@WrongAkram hey man, just 1 question, why is it lagging(in my browser atleast)? is it because it calls skewScrolling() recursively or something?

[@RedVelocityTV]

You are THE best

[@francomm2662]

World best Akram

[@WrongAkram]

Thank you!

[@dimtodim]

whitch video is about timeout getBoundingClientRect???

[@mohammedfaris5326]

react intersection observer not working with skew scrolling

[@thomsjel]

is this possible in next js? because of ssr

[@koko0808008]

Thank you again for this great tutorial again. Is it me or scroll to with link anchors doesnt work with this solution ?

[@davetodream]

Don't suppose you managed to fix this?

[@koko0808008]

@@davetodream i prefer to use locomotivScroll

[@davetodream]

@@koko0808008 Thanks I'll check it out.

[@godwinebikwo6544]

how does one handle accessibility with this?

[@roobs456]

This keeps running even when the page isn't being scrolled. Not sure if there's a way around this..

[@naufalfarras1802]

Hi Akram, appreciate your videos! These are seriously premium, but do you mind to create similiar content like this for non react project?

[@WrongAkram]

For sure!

[@typescripter]

18:35 thank you ! but using translate3D is more good in performance cuz it use GPU ! not CPU ! so , apple use as well when just move one direction

[@spencershrek1491]

Is there an easy way to make these image elements clickable? Was thinking of having a set of carousels with a similar effect, but the elements don't seem clickable once this is implemented :thinking

[@dinosantic8671]

remove ''pointer-events: none;'' from css file

[@spitechinthanathatset649]

Epic!

[@WrongAkram]

kzbin.info/www/bejne/oKOrcmmAodeCfqc

[@LbzeyroX]

how can i do this on click ?

[@grandpaK420]

can someone link me the project for the debounce function he talked about at 11:25 thanks :) awesome video btw!

[@StarCourtesan]

Hey which video has the debounce thingy?

[@WrongAkram]

Awwwards Rebuilt Episode 2

[@StarCourtesan]

@@WrongAkram Thank you so much

[@darkristy]

I just added this to my nextjs site but whenever you change routes it keeps the previous height that was set from previous page. Anyway to fix that?

[@WrongAkram]

I would reset the state or in our case the configs current back to 0 so it restarts from the top.

[@darkristy]

@@WrongAkram so how would that look exactly because im thinking of on routechangecomplete set current back to zero, i did that but no difference. I must be missing something here.

[@venkateshy627]

hey did you find any reason for that, because i got the same issue.. please help me out?

[@darkristy]

@@venkateshy627 I gave up and ditch the hook he created and used resize-observer, here's a good example utilizing react-spring someone made, codesandbox.io/s/react-spring-smooth-scrolling-tfwv0

[@davetodream]

Has anyone worked out how to make links clickable using this?

[@dinosantic8671]

remove ''pointer-events: none;'' from css file

[@timeticks4625]

Does somebody has also a problem with the viewHeight ? - it´s scrolling far over my content above, I don´t get it why...