Create Scrolling Text Animation | Complete GSAP Course - Project 4
Вставка
- Опубліковано 2 жов 2024
- 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
Are bhiya react m sikhado to or mja aa jaiga q ki wahi issue aata h
Same, unme usage ka way alag h tarah tarah ke errors bhi aate h, react / next me sikhao
@@jatinchaudhary7615 dimag k dahi ho gya svg animate hi ho rha
@@thecodecrafted mere saath bhi yahi sab ho rha tha phir isiliye framer motion pe aana pada 😂wo kaafi compatible h
@@jatinchaudhary7615 Bhai work ho gya thoda AI use lena pda AI ko smjhana pda wrna wo bhi same code rply m deta h
Maal aa gaiya maal aa gaiya :)
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!
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
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
bhaiya mai apka course buy krunga semester ke exam ke baad
Bhaiya api pe video bnado please with project
React mein karvado please
sir the social media accounts are not working ?
Gsap with React
vote karo bhai log❤❤
Love from pakistan❤
#part7Project4Complete
// script.js file
// from UA-cam
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();
❤
How will this work for anyone who is not using the mouse?? Just using the laptop.
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!!
We want this series keep going with more projects everyday we want 10 gsap projects
maa kasam bol raha hu intro alag hi vibe deti hai🔥🔥🔥🔥🔥🔥🔥🔥
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.
Bhaiyya! Meri ek request hai
Mujhe commercial & e-commerce wali unique website chahiye
Ap jabbi free ho tab ek video banado plzz
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.
thanks for contributing in our lives
gsap ki website mein jo fundamentals or method section hai ow yahan par cover karoge kya
Font download karne ka video daal dijiye
Inspect -> network -> font-> download the font
Eventlistener wheel laptop pr kaam ni krta mouse chahiye us k liye😢
Facing text overlapping issues can anyone tell me why this is happening..
Excellent playlist agar code bhi mil jata github par upload karke uska link to aur maja ajata
Brother Framer motion pr complete course bnaa den basic to advance level animations aik comprehensive course bna den please
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
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...
Sedha scroll and ulta scroll ka topic accha laga 😁😁😁😁
bhaiya ek dikkat hai jab sare name same hai to shi hai per name change kerne pe dikkat aari hai
Sir how to make it responsive for all device using gsap
Bhaiya main daily aapka class attend karta hoon
mera comment pin kar dijiye na 😒
bhaiya ji mujhe transform: translate samajh nhi aata hai ye kis kaam aata hai
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🩷
mujhe font-family install krke use krni nhi aati😢
Mza Aya sir
Please locomotive js ke sath scrolltrigger kayse use karte hai ye ek video me explain kijia...!!! I will be gratfull to u...👍👍👍👍
Bhaiyya ye SB to already bna hua is channel pr Kuch Naya aur advance lao
🎉🎉completed 4th prohect
code chaap diya but it is lagging because its not syncing with the initial position of the h1s
Can anyone tell that how to avoid the jitter when the animation loops everytime. 👀
Laptop wale wheel event kaise dekhe without mouse 🤔🤔
❤❤Th@nk you ❤❤
❤❤ Sheryi@ns Coding School ❤❤
Sir make brandium website in next project
Bhaiya China Dedo , I mean China Wala Font
❤
❤❤❤
Bhaiya china Wala family font kaise lagaye
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?
Same for me bro i get 44 for down and -44 for up but its totally normal just ignore it.
Sir please create responsive website using gsap
yar amazing ho kasam ap ka level alag ha
bas 1 bat kaho ga
i ove u 😍
There is a small glitch in the animation as if starts again it shows a small lack
Vaiya react ke sath ek adh animation bana dijiye na
Ye lo bhai "💖" chamakta hua gulabi dil
🖤 heartColor:#111; //nahi to akhe karab ho jay gi ......
Guys Comment!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
bhaiya font family bta dena kase kiya tha aapne
agar nehi karoge to adhura reh jayega ah course
china supporter sarthak sharma
Sheryians Coding School🤘🤘✔✔
thank you sheryians. awesome work
thank you sheryians. awesome work
can anybody tell me how to inlude that url
sheryians is not a channel it is our emotion❤
DAY3 Project 4 completed
Nice ❤
love from Pakistan bro ❤
yaar meri imagination badal di
Full frontend product batao
saare projects bana liye bro
Thanks for GSAP series
Itna to marquee tag se ho jaga 🙂
English subtitles please😢
Niche bar anarahe kya kare
Mast hai Bhai keep this series up 🫡
❤ nice video 👍
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...
Thanks for this this great content
#project4completed, par sarthak bhai ek problem aa rahi hai. Vo animation hote samay halka sa khatakta hai, use kaise solve karu?
Same ,hua bhai toh bata de
thanks for the videoo
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!
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
@@SahdevSingh-io3qp Please let me know if you find any solid solution for that 😊
Science class 😂 heilooo
thanks a lot bhaiya
the most important part was wheel event
😊 31:08
love from Dhaka.
very nice animation
You are the best😂🎉
Great animation!
Karli practice
thanks bhaiya
Thanks Sarthak
thanks you sir
You're fab❤
amazing video
bro my mouse wheel is not working so how i can run this
Buy a new mouse 🐁
Mast h lakin 😂
very osm ❤
bhai ji humko bata do font kaise download kare ye wala
He has told the font name now it's up to your googling skill 🙃
Nice 💕💕💕💕🔫🔫
I love you yat
done part7
First viewer