Create Scrolling Text Animation | Complete GSAP Course - Project 4

Re-Imagine: reimagine.sher...
Check Out Our Amazing Course: sheryians.com/...
Instructor in this video: Sarthak Sharma
🌐 Website: sheryians.com/
Socials:
📷 Instagram: / sheryians_coding_school
📘 Facebook: / sheryians.community
💼 LinkedIn: / the-sheryians-coding-s...
🎮 Discord: / discord
Peace ✌️
#webanimation #javascripttutorial #htmlcss #css #cssanimationtutorial #advancedjavascript #webdevelopment #programmingtutorials #javascriptmastery #codingtips #techeducation #frontenddevelopment #codelearning #javascripttips #webdevtips #codingjourney #learntocode #codenewbie #javascripttricks #programmingskills #codingcommunity #javascriptprojects #webdesign #codingtutorials

[@Editiumofficial]

thanks for this gsap series this series is really helping me for my latest and one of my biggest project really greatfull for this thanks

[@thecodecrafted]

Are bhiya react m sikhado to or mja aa jaiga q ki wahi issue aata h

[@jatinchaudhary7615]

Same, unme usage ka way alag h tarah tarah ke errors bhi aate h, react / next me sikhao

[@thecodecrafted]

@@jatinchaudhary7615 dimag k dahi ho gya svg animate hi ho rha

[@jatinchaudhary7615]

@@thecodecrafted mere saath bhi yahi sab ho rha tha phir isiliye framer motion pe aana pada 😂wo kaafi compatible h

[@thecodecrafted]

@@jatinchaudhary7615 Bhai work ho gya thoda AI use lena pda AI ko smjhana pda wrna wo bhi same code rply m deta h

[@CodingHub21728]

You are the best❤

[@hafizakbar19]

❤❤

[@anshpethe]

6:57 We need a tutorial on Fonts, How to Download them and use ....
in this project I used " Handjet " From google fonts using embedded code and link tag

[@Prakash24-kw9kv]

❤❤❤

[@rockyrathod2043]

I am truly amazed by the premium quality content Sheryians Coding School consistently delivers! Your video series has been an invaluable resource for my placement preparation. The clarity and depth of your tutorials, especially on JavaScript, CSS animations, and modern UI/UX design, have significantly boosted my coding skills and confidence. Each session is not only informative but also engaging and well-structured. Your dedication to providing top-notch education shines through in every video. Thank you for making learning so accessible and enjoyable! Keep up the fantastic work-I'm excited to continue following your channel and grow alongside your incredible content!

[@_tobecontinued]

Maal aa gaiya maal aa gaiya :)

[@yash__golu03]

Gsap with React
vote karo bhai log❤❤

[@KUNALPRAJAPATI-fi3jy]

bhaiya mai apka course buy krunga semester ke exam ke baad

[@starindiangamer1322]

sir the social media accounts are not working ?

[@rcgamerboy3698]

Bhaiya api pe video bnado please with project

[@RB_MAFIA]

React mein karvado please

[@MohammadAli-bj7xc]

We want this series keep going with more projects everyday we want 10 gsap projects

[@Halallife360.]

Love from pakistan❤

[@ansaryShohan]

How will this work for anyone who is not using the mouse?? Just using the laptop.

[@karankumarthakkar7265]

Need to use "scroll" event instead of "wheel", scroll event does not provide "deltaY" property, so you have to manually calculate the direction of scroll, think about it otherwise ask GPT to write the code to calculate the direction!!

[@aftabhaider8556]

its not perfect
as the duratuion ends it gets back to the original position which is (-100%) and all that movement of geeting back to (-100%) makes it awful.

[@starindiangamer1322]

#part7Project4Complete
// script.js file
// from RUclips
function wheelEvent() {
window.addEventListener("wheel", (e) => {
if (e.deltaY > 0) {
gsap.to(".marque", {
transform: "translateX(-200%)",
duration: 4,
repeat: -1,
ease: "none",
});
gsap.to(".marque i", {
rotate: 180,
});
} else {
gsap.to(".marque", {
transform: "translateX(0%)",
duration: 4,
repeat: -1,
ease: "none",
});
gsap.to(".marque i", {
rotate: 0,
});
}
});
}
// my self if my mouse wheel is not working
function keyevents(event) {
let i = 0;
if (event === "ArrowDown") {
i++;
return i;
} else if (event === "ArrowUp") {
i--;
return i;
}
}
function keyEvent() {
window.addEventListener("keydown", (e) => {
let event = keyevents(e.key);
if (event > 0) {
gsap.to(".marque", {
transform: "translateX(-200%)",
duration: 4,
repeat: -1,
ease: "none",
});
gsap.to(".marque i", {
rotate: 180,
});
} else {
gsap.to(".marque", {
transform: "translateX(0%)",
duration: 4,
repeat: -1,
ease: "none",
});
gsap.to(".marque i", {
rotate: 0,
});
}
});
}
keyEvent();

[@Umer-zn5hh]

❤

[@KazHachiOreki]

This is my first time watching any series on your channel, and while your content is good, it's unnecessarily long. Just my opinion-I'm not trying to insult you, it's just some constructive criticism. I think it would be better if you didn't crack those lame jokes. Maybe kids like that, but your audience is mostly either in college or already graduated, so it might not resonate with them. Also, there's no need to repeat the same points unless you're explaining them from a different perspective. If people don't understand something, they can always go back and rewatch.

[@DeepakSharma-cf5cz]

maa kasam bol raha hu intro alag hi vibe deti hai🔥🔥🔥🔥🔥🔥🔥🔥

[@Ayisha-fu2pu]

Bhaiyya! Meri ek request hai
Mujhe commercial & e-commerce wali unique website chahiye
Ap jabbi free ho tab ek video banado plzz

[@saiots8651]

Brother Framer motion pr complete course bnaa den basic to advance level animations aik comprehensive course bna den please

[@monukumargautam2060]

Facing text overlapping issues can anyone tell me why this is happening..

[@abdulkadermolla947]

gsap ki website mein jo fundamentals or method section hai ow yahan par cover karoge kya

[@kartiksharma9978]

thanks for contributing in our lives

[@UsmanHaider-w6c]

Bhai agar agle project me pori website bna kr dikha do
To PTA chal gai ga iss knowledge ko kaha kaha use kr sakte hai

[@abdullahfarooq2414]

Eventlistener wheel laptop pr kaam ni krta mouse chahiye us k liye😢

[@niteshkrsah2222]

Excellent playlist agar code bhi mil jata github par upload karke uska link to aur maja ajata

[@shadowslayer2248]

Bhaiyya saare projects bana liye. Isi effect ka abhi soch rha tha lo uska bhi aa gaya. Ab toh bas banane baith jayenge! 🔥🔥 Thank you for all this awesome content🩷

[@abhilasharani5272]

mujhe font-family install krke use krni nhi aati😢

[@nibirSharma]

code chaap diya but it is lagging because its not syncing with the initial position of the h1s

[@Huzaifakhan-ik8xz]

Ye to abhi bhi atak atak ke chal raha hai torha torha bhai ki video me bhi aur me ne same to same copy kiya us me bhi atak raha hay. Is ko fully smooth kaise chalana hai wo koi bata sakhta hai...

[@chindankushwaha2968]

Can anyone tell that how to avoid the jitter when the animation loops everytime. 👀

[@sumantabhattacharya9694]

❤

[@abdulroufshaik123]

❤❤❤

[@AdityaArya2207]

Laptop wale wheel event kaise dekhe without mouse 🤔🤔

[@DoUSuggon]

I am getting value of "100" when scrolling down and "-100" when scrolling up. But you've got different values in decimal. How's that possible mate?

[@anshpethe]

Same for me bro i get 44 for down and -44 for up but its totally normal just ignore it.

[@SachinChandra2006]

🎉🎉completed 4th prohect

[@MdTauhid-241]

Bhaiya main daily aapka class attend karta hoon
mera comment pin kar dijiye na 😒

[@rajaasim4474]

There is a small glitch in the animation as if starts again it shows a small lack

[@spsujoypaul]

Sedha scroll and ulta scroll ka topic accha laga 😁😁😁😁

[@hannanprog]

Sir make brandium website in next project

[@gurughantal59]

Sir how to make it responsive for all device using gsap

[@swagatamukherjee4686]

Please locomotive js ke sath scrolltrigger kayse use karte hai ye ek video me explain kijia...!!! I will be gratfull to u...👍👍👍👍

[@Hardik-code-with.web_developer]

❤❤Th@nk you ❤❤
❤❤ Sheryi@ns Coding School ❤❤

[@Arifalamldn]

bhaiya ek dikkat hai jab sare name same hai to shi hai per name change kerne pe dikkat aari hai

[@md_ejaz_ansari]

Font download karne ka video daal dijiye

[@vinaynain3966]

Inspect -> network -> font-> download the font

[@thetechsolutions4420]

Bhaiyya ye SB to already bna hua is channel pr Kuch Naya aur advance lao

[@HonourPC-c4q]

Bhaiya China Dedo , I mean China Wala Font

[@SdOffice-rt2ye]

china supporter sarthak sharma

[@jackleader6823]

bhaiya ji mujhe transform: translate samajh nhi aata hai ye kis kaam aata hai

[@UsmanHaider-w6c]

Mza Aya sir

[@fokla9149]

🖤 heartColor:#111; //nahi to akhe karab ho jay gi ......

[@ahmedhassan-vq2wc]

yar amazing ho kasam ap ka level alag ha
bas 1 bat kaho ga
i ove u 😍

[@rahulgurjar9340]

Sheryians Coding School🤘🤘✔✔

[@ItzDarknez]

Guys Comment!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

[@harshmehrotra1214]

thank you sheryians. awesome work

[@mohiuddinmonzil5177]

thank you sheryians. awesome work

[@-aarohi]

can anybody tell me how to inlude that url

[@sayandotcom]

Vaiya react ke sath ek adh animation bana dijiye na

[@ansarifaheel]

yaar meri imagination badal di

[@ZohaibAli-mr5nh]

love from Pakistan bro ❤

[@VishalKumar-te6ch]

sheryians is not a channel it is our emotion❤

[@prashant7785]

DAY3 Project 4 completed

[@gurughantal59]

Sir please create responsive website using gsap

[@jackleader6823]

bhaiya font family bta dena kase kiya tha aapne

[@its_nandlal]

Nice ❤

[@abdulkadermolla947]

agar nehi karoge to adhura reh jayega ah course

[@ShubhamKain]

Thanks for GSAP series

[@Dheeraj-xw9xg]

Full frontend product batao

[@teach21c31]

Bhaiya china Wala family font kaise lagaye

[@Neerajsingh-on6vu]

saare projects bana liye bro

[@Gamingwithmyco]

Ye lo bhai "💖" chamakta hua gulabi dil

[@mdashiq7218]

Itna to marquee tag se ho jaga 🙂

[@zaheerrhman]

❤ nice video 👍

[@ibnbattuta6883]

English subtitles please😢

[@debiprasadSatpathy-nu6fs]

Mast hai Bhai keep this series up 🫡

[@ranajaved4489]

Sheryians School,
es ke baad full stack projects ki playlist me laoo plz help hu jaye gi hm students ki ke real projects kisse banate hai...

[@karankumarthakkar7265]

Just in case anyone have a wild thought like me, that how animations are working continuously, going from "initial" position to "final" without going "final" to "initial" back again?
I've figured out answer, the answer is the time between two cycles of going from "initial" to "final" is almost 0, its almost immediate, hence we feel like we're not going back to initial position at all, but we're going
Don't know if I was able to explain or not, just in case if you find it helpful!

[@SahdevSingh-io3qp]

Its going to initial position and due to which a small jitter is there, thats why I head to comment section to find what other felt and is there any solution to overcome this jitter which is not making the animation proper continuous

[@karankumarthakkar7265]

@@SahdevSingh-io3qp Please let me know if you find any solid solution for that 😊

[@sumantabhattacharya9694]

Thanks for this this great content

[@wizardgugu8533]

Niche bar anarahe kya kare

[@PPS018]

thanks for the videoo

[@NoTimeWaste1]

#project4completed, par sarthak bhai ek problem aa rahi hai. Vo animation hote samay halka sa khatakta hai, use kaise solve karu?

[@Error-td8fm]

Same ,hua bhai toh bata de

[@HassaanHaider313]

the most important part was wheel event
😊 31:08

[@velocity0212]

Science class 😂 heilooo

[@user-lo5vi9rs8j]

💝💝💝💝💖💖💖💖💖💖❤❤❤❤❤

[@takingfruits9822]

love from Dhaka.

[@UsmanHaider-w6c]

Aree Bhai intro dekh kr hi mza a gya

[@sarthakitaliya7660]

thanks a lot bhaiya

[@Kush-n4l]

Great animation!

[@Sixty2nd_Clips]

very nice animation

[@CodingHub21728]

You are the best😂🎉

[@sudiptaanirban8833]

This channel is teaching what others aren't... keep up the good work!

[@mohitsingh13]

You're fab❤

[@jawadmdkhn]

thanks you sir

[@Waleed._.Ahmed.]

Karli practice

[@rkn09]

thanks bhaiya

[@abhaypratapsingh-xc5jt]

Thanks Sarthak

[@Hassaan-u1i]

amazing video

[@vinekmaurya5515]

Mast h lakin 😂

[@itsjohn-t9u]

very osm ❤