gsap.to('.
box1',{
x:600,
duration:2, as ka matlba katni dar tak chalna ha
delay:2, as ka matlab katni dar bad chalana ha
backgroundColor:"blue",
// stagger:2
repeat:-1, as ka matlab elemnt infinite chala ga
yoyo:true, as ka matlab element takra ka wapis aya ga reapeat/yoyo akti use ho gi
})
.1
gsap.to means element go for apni initinal position sa final position
matlab apni asl jaga sa dosri jga jata ha
2. gsap.from() means elemnt apni final position sa waps initinal
position measns gom per kr apni asi jaga waps ajata ha
Navbar animate with gsap:
gsap.from("#nav img,#nav h3,#nav h4,#nav button",{
y:-100,
duration:1,
delay:1,
opacity:0,
stagger:0.5 // sab ka darman katni time ma animate krwna ha
})
awIaadas
con
Contionuly moving of element:
t1.to("h5",{
y:30,
repeat:-1,
duration:0.7,
yoyo:true
})
ScrollTrigger animations:
gsap.from(".page1 .box", {duration: 1, delay:2,x:600,rotate:360,scrollTrigger:{
trigger:".page1 .box",
scroller:'body',
markers:true,
start:'top 30%',
scrub:2 // scrub smoothing ka kia use hota ha as ma scroll per element visible hota ha or
scroll per hi unvisible hota ha
}})
<script
src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js"
integrity="sha512-7eHRwcbYkK4d9g/6tD/mhkf+
+eoTHwpNM9woBxtPUBWm67zeAfFC+HrdoE2GanKeocly/VxeLvIqwvCdk7qScg=="
crossorigin="anonymous"
referrerpolicy="no-referrer"
></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/ScrollTrigger.min.j
s"
integrity="sha512-onMTRKJBKz8M1TnqqDuGBlowlH0ohFzMXYRNebz+yOcc5TQr/
zAKsthzhuv0hiyUKEiQEQXEynnXCvNTOk50dg=="
crossorigin="anonymous"
referrerpolicy="no-referrer"
></script>
Ak gsap cdn ha or script scroll ki cdn ha
Locomotive scroll js:
Position in css:
Position relative: ya apni jga ni chrothi move ho jati ha per apni jga ni
chorthi
Position Absoulute: ya apni jga chor dati ha per or parent ma postion lab
Lati ha means apni parent ka sath attach ho jati ha
Position Stickey: ya scroll per apni postion fix krata ha or or ak kam or
krta ha ya apna parent ki height per fix rehta ha jasa hi height katam
wasa hi fix band ho jata ha gar parent ka pass height ni ha tu pori body hi
height la la ga.
Flex:1 Nearst Parent ka sath work katiri ha ziada dor ni kati or ya width
ko equally dievide krati ha
.card{
display: flex;
flex: 1;
}
