Bro you know I've been suffered from two days and two nights and i was very frustrated during the work, i know all these stuffs but can't figure it out how am i able to do the timeline scroll but finally i got your video and it helps a lot! It's like last mein indian hi kaam me aaya 😅 Thank You brother for your help and i subscribed !😍
the way you explain mind blowing brother , keep it up 😍 u dont have to advertise your channel your content already doing it outstanding .... love u bro ❤❤
Thanks Brother for this video. But I have one question . I think this will effect on responsiveness .Can we controlthe device wise position of that elements?
I watched your video first time such an amazing content. Plz take live classes of html and css simple projects for beginner and explain while coding live. I hope many people will join you🥰
Hello brother..! Your video is very helpful to make animated websites for beginners.. agar possilbe ho to apna thoda experience share kro ki kha se sikha kse sikha kitta time hua h is field m , or krte kya ho work profile…or thoda btao ki begginers ko kya kya kse kse krna chhaiye age future k liye.. thank you ❤
Thank you bhai bohut kuch seekhne mila or mai ye effect ko portfolio me lagaunga maza aayegi Baaki bhai navbar banana nahi aata h responsive wo sikhaa do na please 🙏🥺 Matlab wo toggle navbar mobile screen par click hote hi wo open hota h animation se aur wo hambyrger menu turn hojaata h cross me fir wo again menu bar ban jaata h wo Baaki css se bana leta hu magar thoda effects waale nahi ban paate h css se
Yaa there is a solution wait for the tutorial which we are currently recording and uploading ASAP. That's video cover the how to use GSAP with Locomotive ☺️
I did exactly same as you did but in < div class="three>....., when i scroll the main fanta picture, the fanta picture comes from class="one" but not from class="two". Any ideas what's happening?
Actually there is some issue in assigning the value from top and bottom... You can check our latest live of responsive Fanta and we updated the source code there.
React js main purpose is to create efficient website which can handle server load. It is not a good practice to put many animations in react. Hope you understood 😊
when we are doing for first time it gives an error but when we refersh it it will work fine what is the problem why pepsi can and cocacola can are not moving for first time after refersh it works and in your github code also doing same problem
Yaa, I checked it right now it shows some bugs while we use GSAP from animation, I don't know why this problem happens, in my other projects, GSAP from animation is not working properly, we will convert this animation to GSAP to animation. I will update the source code and inform you shortly 😊
Hello Sir, Sir aapne ye jo animation bnaya hai, kya esko responsive nhi krskte hai? Mera name mukesh kumawat hai, Please Please esko responsive krna sikha do, Paid or free course please
Bro mara java script html ka sat link nahi kar raha ha ma na code bi sara alll right likha ha par pata nahi link kiyu nahi kar raha plzz aap issue solve kae da css link ho gaya ha par java script nahi ho raha ha
Bro vip content bus aik video aisi bhi bana do jis mein yai pata chal sakay gsap animations ko responsiveness k sath control kaise karsakte hein jaise k mobile screen par i pad laptop par kyun k wahan height width diff hogi to same aise hi positions par sub kuch aa k na bethay jaise is resolution par chal raha hai you know what i mean
please help i'm following your tutorial but trying to do in next, react app with @gsap/react package. below is my code can you fix the animation please, im new on it "use client"; import { useEffect, useLayoutEffect, useRef, useState } from "react"; import { gsap, Power3 } from "gsap"; import ScrollTrigger from "gsap/ScrollTrigger"; import { useGSAP } from "@gsap/react"; export default function Home() { gsap.registerPlugin(ScrollTrigger); const animationContainerRef = useRef(null); const secondContainerRef = useRef(null); const orangeHalfCutImageRef = useRef(null); const fantaImageRef = useRef(null); const main = useRef();
useGSAP( () => { let tl = gsap.timeline( { scrollTrigger: ScrollTrigger.create({ trigger: '.second-container', start: '0% 50%', end: '80% 90%', scrub: true, // pin: true, markers: true, }) } ) tl.to(fantaImageRef.current, { top: "120%", left: "10%" }, 'animation1') // animation1 is animation name to group multiple to work together tl.to(orangeHalfCutImageRef.current, { top: '160%', left: '23%' }, 'animation1') }, { scope: animationContainerRef, revertOnUpdate: true } ); return (
FANTA
Flavour Updated Lorem ipsum dolor sit, amet consectetur adipisicing elit. Labore facilis ullam nemo sequi? Itaque sint laudantium sed necessitatibus, animi voluptates soluta autem ab dolorum, facere facilis deserunt exercitationem, similique tempora!
CocaCola Buy Now
Fanta Buy Now
Pepsi Buy Now
Basic ScrollTrigger with React Scroll down to see the magic happen!!
Bhai or to apni bahut best content provide kia hai lekin images link nahi kiaye hai plz link karo taki koye direct images ko download kardy project ko start kar saky plz
Bro you know I've been suffered from two days and two nights and i was very frustrated during the work, i know all these stuffs but can't figure it out how am i able to do the timeline scroll but finally i got your video and it helps a lot!
It's like last mein indian hi kaam me aaya 😅 Thank You brother for your help and i subscribed !😍
Glad I could help, 😎🥰🥰
Bro ummed jaag gyi apki videos dekh ke webdev lord love from Uttrakhand❤❤
Are bhai bhai ❤️ ☺️🙏
I really appreciate 🙏 your works sir! Be consistent, you will definitely achieve a milestone within a yr
Yaa bro ☺️, thank you for your support ❣️, with you I am nothing 🙏💗
Aag lga di bhai Dhua dhua kr diya Bhai tumne yeah sb Itne aache se sikha kr🔥🔥🔥 ❤❤❤
Thanku Bhai ❤️
i dont have words to appreciate u. one of the best and easiest tutorial i have ever seen in my entire life. Thanks
Thank you for your lovely support 😊❤️
Bro ummed jaag gyi apki videos dekh ke webdev lord love from MAharastra India MH40
Are bhai bhai ♥♥
Marvellous content of web ❤
Thank you Bhai ❣️
the way you explain mind blowing brother , keep it up 😍 u dont have to advertise your channel your content already doing it outstanding ....
love u bro ❤❤
Thank you so much 😀, all things are happening with your support ❣️
This channel is soooo underrated. Bro you deserves millions of views❤
Aap logo ka pyaar raha to wo bhi ho jaayega 😊
Great work man great work
thank you for teaching gsap
Creativity another level keep it up
Great work. Thank you so much
Bahut badhiya ba bhaiya ji.
Thanks a ton
Thanks Brother for this video. But I have one question . I think this will effect on responsiveness .Can we controlthe device wise position of that elements?
Yaa bro ofcourse, hamlog control kar sakte h width wise.
Thank you very much... Very helpful...I am learning GSAP
🤗🤗 thanks for watching our videos 😊
your master of gsap
Thanks bro 😊
I watched your video first time such an amazing content. Plz take live classes of html and css simple projects for beginner and explain while coding live. I hope many people will join you🥰
Sure I will
@@gravitycoding thnx so much😊. I will awaiting
☺️☺️
@gravitycoding you are The Best❤☺
Are bhai best to aap ho ☺️❣️
Great work❤❤
Just one suggestion can you explain why you changed position relative from div when that causes some problem it will be more helpful
Just copy that and ask chat gpt to explain that help me alot in back
Ye badhiya tha guru... 😂
Bahut badhiya ba bhaiya ji
Thank you bhai
Understanding Hindi is coming in handy. This was wonderful.
Thank you ma'am ☺️
Creativity another level keep it up . Salute hai aap ko
Thanks bro 🥰
Hello brother..! Your video is very helpful to make animated websites for beginners.. agar possilbe ho to apna thoda experience share kro ki kha se sikha kse sikha kitta time hua h is field m , or krte kya ho work profile…or thoda btao ki begginers ko kya kya kse kse krna chhaiye age future k liye.. thank you ❤
Thank you so much bro ☺️, you like our videos. Yaa I will surely share my journey experience.
world best video in gsap maja a gya bhai or bhi video lao
Thank you so much, sure I will upload more video like this.
Great work man great work
thank you for teaching gsap
🫡🫡❣️❣️
Ab Aa gaya Maja ♥️♥️❤️♥️❤️💓💓👋👋🚩🚩
☺️🔥❤️
Aag laga di bro 🔥💕
Thank you bro 😊
how it work on your without gsap.registerPlugin(ScrollTrigger); iam new in GSAP
Actually we already link the CDN of Scroll Trigger plugin in the HTML file
1st time seeing your tutorial
Thank you so much for watching our videos 😊
Awesome brother ❤
Thank you so much 😀
Bro agar Js pe zyada focus lagawoo gy to zyada acha rahey gaa . But this is a great content. You are a great person ❤
Thank you bro 😊
You are the best sir! Make a website with tailwind if possible. Thank you 😇😇
Yaa sure bro ☺️
@@gravitycoding you are the best I have always been admiring you 😇
Amazing animation bhaiya
Thank you ❤️
bro...off screen cover by your face cam.......but video is very usefull and great!!!!!!!!!!
Sorry for that, from next time I will handle it. 💚
Great work. Thank you so much
🙌🙌☺️❣️🙌
Great work
Thank you so much 😀
Thank you bhai bohut kuch seekhne mila or mai ye effect ko portfolio me lagaunga maza aayegi
Baaki bhai navbar banana nahi aata h responsive wo sikhaa do na please 🙏🥺
Matlab wo toggle navbar mobile screen par click hote hi wo open hota h animation se aur wo hambyrger menu turn hojaata h cross me fir wo again menu bar ban jaata h wo
Baaki css se bana leta hu magar thoda effects waale nahi ban paate h css se
Okay bro, ho jaayega
Thanks bro
Welcome bro 🤗
iss khushi mee apko subscribe kar di jaati hai.
Thanks bro...
Super Bhai..Thanks .
❤️❤️❣️☺️
Op bro❤
Thank you ☺️
Thankyou bhai very much
☺️
i want to make it smooth with locomotive but when i add locomotive that work with gsap its animation is disabled . i want the solution
Yaa there is a solution wait for the tutorial which we are currently recording and uploading ASAP.
That's video cover the how to use GSAP with Locomotive ☺️
awesome
Thank you 😊
Great job man
Thank you bro 😊
bhai aapne javascript meh khud se logic kase banana sikha please bata dijiye
Lots of Practice guru ❤️🙌
bhaia mery paas koi alfaz nhi hain k mai apka shukria kesy ada karun
u did a reat job,u do and plz doing bro
it means alot
Always welcome 🤗
mja aa gya sir big fan
thank u for this amazing content
Are bhai always ☺️❣️
@@gravitycoding sir ek awwward website with advanced animations ke saath bnao plz
Yaa bro working on it
exccelente video, lo haces ver tan facil.
Thank you 😊
do this works in the responsive things means while making the web responsive didnt the positions differ so didnt the animation differ???????????????
Yes, it will work.
Already created on Live.
Hello, brother while adding image, it shows white background, how can I solve that?
Contact me on Instagram, and share the screenshot of problem☺
Great work 👏
Thank you so much 😀
thanks Bhai to make me understood
Always welcome 🤗
Thank you💜
Always welcome 🤗
congratulations for 3k party mil jana chahiye call krne sai phle 😅
😂😂🫂❣️❤️ Bilkul
Maja aagail...
🥹🤗🤗
great job
thnku mere bhai
I did exactly same as you did but in < div class="three>....., when i scroll the main fanta picture, the fanta picture comes from class="one" but not from class="two". Any ideas what's happening?
Actually there is some issue in assigning the value from top and bottom...
You can check our latest live of responsive Fanta and we updated the source code there.
Very nice sir 😊😊😊
Thank you 😊 bro for your support ❣️
@@gravitycoding sir please gsap par full series banaiye
Super website ❤❤
Bhaiya react js me bhi animation website bna do please..
React js main purpose is to create efficient website which can handle server load. It is not a good practice to put many animations in react. Hope you understood 😊
when we are doing for first time it gives an error but when we refersh it it will work fine
what is the problem why pepsi can and cocacola can are not moving for first time after refersh it works
and in your github code also doing same problem
Yaa, I checked it right now it shows some bugs while we use GSAP from animation, I don't know why this problem happens, in my other projects, GSAP from animation is not working properly, we will convert this animation to GSAP to animation.
I will update the source code and inform you shortly 😊
@@gravitycoding Yes i am also facing same issue
Ha bhai me bhi ab bolunga aapko❤❤
Great video 💯 thanks ❤
Glad you enjoyed it
Bindas bhai
Are bhai ekdam 😁😁☺️
nice work
Thank you ❤️
Bhai we want dsa in java, can you provide us ?
The mainstream front-end frameworks overseas are as follows. I am a programmer from China and would like to learn more about them.
Great 😃
Thank you for this video
My pleasure
thank you bhaiya
Always welcome 🤗
make a video on gsap responsive for mobile device, i have made but cant figure out how to make it responsive for mobile device
Ook bro karte h ushko bhi
thank q broo
🙌💖
Hello Sir,
Sir aapne ye jo animation bnaya hai, kya esko responsive nhi krskte hai?
Mera name mukesh kumawat hai, Please Please esko responsive krna sikha do, Paid or free course please
Unique content
Thank you 😊🙏
Orange can Jb 3rd section main ja raha.wahan scrub q ni lgaya? Without scrub wo waps move kyse Kr raha Hy?
Usme scrub lagya hua hoga bro
Bro mara java script html ka sat link nahi kar raha ha ma na code bi sara alll right likha ha par pata nahi link kiyu nahi kar raha plzz aap issue solve kae da css link ho gaya ha par java script nahi ho raha ha
File ka source dekho kaha par h ?
i liked and subsribed your channel, before even studying why? because i believe i will get osm content and knowledge/
Thanks and welcome
DSA is important in web development
Good developer ke liye zaroori hai jab scale pe le Jana honga compnay mein fresher level pe nhi padti woh Bina dsa ke bhunkar skate ho
No need bro
no need
Who said ?
Bro Web Development ke liye to nahi but interview ke liye DSA important hai.
Thik ba bhaiya sab
❤
Keren bg
bhaiya vo apne magic scroll pe frames banana to sikha diya ek video on how to make it animate in js correctly pleaseeeeeeeeeeeeeeeeeee
great👍
Thank you 🙏
But sir UA-cam ke contant title ki wajah se kabhi kabhi dikhayi nahi deta hai to sir please ek bye ek page pe work kariye please sir 🙏🙏
Okay bro 😊
Great bhaiya
bhaiya pls gsap aur vanila js pe tutorial banaiye, hum madhubani se hai
Okay bro
Bro vip content bus aik video aisi bhi bana do jis mein yai pata chal sakay gsap animations ko responsiveness k sath control kaise karsakte hein jaise k mobile screen par i pad laptop par kyun k wahan height width diff hogi to same aise hi positions par sub kuch aa k na bethay jaise is resolution par chal raha hai you know what i mean
Yaa bro ☺️, okay karta hu
@@gravitycoding thanks bro
Eski Responsive ki video kab ayegi
nice
Thanks
keep it up
Thank you bro 😊
how to make this animation reponsive ? 1 aise scrolling effect but responsive website video pls
Okay bro😊, karte h prabandh
Broo new tutorial lao jldi we all are waiting ❤
Thoda exam nipta le 😅 phir aate h lekar
@@gravitycoding okeyy lekin jldii😂🫶
Ram Ram ❤
Jai shree Ram 🚩❤️
Dolly chaiwale ka chacha ka ladka lolly codewala😂😅
🤣🤣🤣❤️
@@gravitycoding 😂 Bura mut man na sir 😅
Main to maje leta hu bro ❤️...
🤣🤣 Just Chill and Enjoy and learn
Which vs code extension u using?
Blackbox AI
please help
i'm following your tutorial but trying to do in next, react app with @gsap/react package. below is my code can you fix the animation please, im new on it
"use client";
import { useEffect, useLayoutEffect, useRef, useState } from "react";
import { gsap, Power3 } from "gsap";
import ScrollTrigger from "gsap/ScrollTrigger";
import { useGSAP } from "@gsap/react";
export default function Home() {
gsap.registerPlugin(ScrollTrigger);
const animationContainerRef = useRef(null);
const secondContainerRef = useRef(null);
const orangeHalfCutImageRef = useRef(null);
const fantaImageRef = useRef(null);
const main = useRef();
useGSAP(
() => {
let tl = gsap.timeline(
{
scrollTrigger: ScrollTrigger.create({
trigger: '.second-container',
start: '0% 50%',
end: '80% 90%',
scrub: true,
// pin: true,
markers: true,
})
}
)
tl.to(fantaImageRef.current, {
top: "120%",
left: "10%"
}, 'animation1') // animation1 is animation name to group multiple to work together
tl.to(orangeHalfCutImageRef.current, {
top: '160%',
left: '23%'
}, 'animation1')
},
{ scope: animationContainerRef, revertOnUpdate: true }
);
return (
FANTA
Flavour Updated
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Labore facilis ullam nemo sequi? Itaque sint laudantium sed necessitatibus, animi voluptates soluta autem ab dolorum, facere facilis deserunt exercitationem, similique tempora!
CocaCola
Buy Now
Fanta
Buy Now
Pepsi
Buy Now
Basic ScrollTrigger with React
Scroll down to see the magic happen!!
box
box
box
);
}
Great 😎🤗
bhai same Reactjs ke sath video banao with GSAP
HTML AUR CSS AUR JAVASCRIPT KA VIDEO FOR BEGINNERS K LIYE BANA DIJIYE❤❤🙏
Okay Bro, I am also thinking about that ☺️❣️
THANK YOU SO MUCH SIR...||😇😇
Responsiveness ka kya?
mza aya
☺️😇
bhai agr hum simply gsap lga kr animation krty hain aur agr mujey gsap ke animation ko ik particular device ke width pr perform krna hoga tb mein kaisy krun
@@gravitycoding
GSAP ke documentation me set width ka function Diya hua h check it once...
Bhai or to apni bahut best content provide kia hai lekin images link nahi kiaye hai plz link karo taki koye direct images ko download kardy project ko start kar saky plz
Already provided source code in the description from there you can download all the assets ❣️☺️
hlo bhaiya plz make a website using three js
Okay bro 👍
bhai framer motion se sath me video banau mare sath kafi sare log learn kar lange
Ok bro wait for it...
bro please make a video how to use gsap with react
Okay Bro ☺️
now imagine making it responsive
Already Responsive Done in our Live Stream...
Check it out 😉