Scribd
Upload
94 views3 pages

Gsap Notes

Uploaded by

1122.awaissaleem
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
94 views3 pages

Gsap Notes

Uploaded by

1122.awaissaleem
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 3

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;
}

You might also like