Can someone help me figure out why this is happening
<template>
<div class="wrapper">
<div class="full-page" />
<div class="main-content">
<p class="heading">
<span>Lorem ipsum </span>
<span class="purple-text">Lorem ipsum</span>
</p>
<div class="ss-life">
<img class="imgs img-gs" src="@/assets/img-gs.png" alt="Image 1">
<img class="imgs img-sso" src="@/assets/img-sso.png" alt="Image 2">
<img class="imgs img-dt" src="@/assets/img-dt.png" alt="Image 3">
<img class="imgs img-fb" src="@/assets/img-fb.png" alt="Image 4">
<img class="imgs img-pool" src="@/assets/img-pool.png" alt="Image 5">
<img class="imgs img-tb" src="@/assets/img-tb.png" alt="Image 6">
<p class="heading-cont">
<span>Lorem ipsum </span>
<span class="purple-text">Lorem ipsum</span>
</p>
<div class="text-box-one">
<p class="title">
<span>Lorem ipsum </span>
<span class="blue-text">Lorem ipsum</span>
</p>
<p class="description">
Lorem ipsum Lorem ipsum, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>
</div>
<div class="text-box-two">
<p class="title">
<span class="orange-text">Lorem ipsum </span>
<span>Lorem ipsum</span>
</p>
<p class="description">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>
</div>
<div class="text-box-three">
<p class="title">
<span>Lorem ipsum </span>
<span class="blue-text">Lorem ipsum</span>
</p>
<p class="description">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>
</div>
<div class="text-box-four">
<p class="title">
<span class="orange-text">Lorem ipsum </span>
<span>Lorem ipsum </span>
</p>
<p class="description">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>
</div>
<div class="text-box-five">
<p class="title">
<span>Lorem ipsum </span>
<span class="blue-text">Lorem ipsum </span>
<span>Lorem ipsum</span>
</p>
<p class="description">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>
</div>
<div class="text-box-six">
<p class="title">
<span class="orange-text">Lorem ipsum </span>
<span>Lorem ipsum</span>
</p>
<p class="description">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>
</div>
</div>
</div>
<div class="full-page full-page-two" />
</div>
</template>
<script>
import { gsap } from 'gsap'
import { ScrollTrigger } from '@/node_modules/gsap/ScrollTrigger'
export default {
data: () => ({
anim: null,
ssupLifeImgsMoveDistances: [
{ x: -81, y: -21 },
{ x: -44, y: -282 },
{ x: 40, y: -102 },
{ x: 20, y: 238 },
{ x: -119, y: 108 },
{ x: 100, y: 8 }
]
}),
mounted () {
gsap.registerPlugin(ScrollTrigger)
this.initAnim()
},
methods: {
initAnim () {
this.anim = gsap.timeline({
scrollTrigger: {
trigger: '.main-content',
markers: true,
pin: true,
start: 'top top',
end: '500% 50%',
scrub: 1
},
ease: 'power3.inOut'
})
this.anim.add(this.headingFadeout(), '+=0.5')
this.anim.add(this.imageMove(), '+=0.5')
this.anim.add(this.headingContFade(), '+=0.5')
this.anim.add(this.textFade('one'), '+=0.5')
this.anim.add(this.textFade('two'), '+=0.5')
this.anim.add(this.textFade('three'), '+=0.5')
this.anim.add(this.textFade('four'), '+=0.5')
this.anim.add(this.textFade('five'), '+=0.5')
this.anim.add(this.textFade('six'), '+=0.5')
this.anim.play()
},
headingFadeout () {
return gsap.to('.heading', {
opacity: 0
})
},
imageMove () {
return gsap.to('.imgs', {
x: index => this.ssupLifeImgsMoveDistances[index].x,
y: index => this.ssupLifeImgsMoveDistances[index].y
})
},
headingContFade () {
return gsap.timeline().to('.heading-cont', {
opacity: 1
}).to('.heading-cont', {
opacity: 0
})
},
textFade (indexStr) {
return gsap.timeline().to(`.text-box-${indexStr}`, {
opacity: 1
}).to(`.text-box-${indexStr}`, {
opacity: indexStr === 'six' ? 1 : 0,
delay: 1
})
}
}
}
</script>
<style lang="scss" scoped>
.wrapper {
display: flex;
flex-direction: column;
overflow-y: scroll;
}
.full-page {
height: 100vh;
width: 100vw;
background-color: rgb(252, 96, 96);
}
.full-page-two {
height: 800vh;
background-color: rgb(0, 149, 162);
}
.main-content {
height: 100vh;
width: 100vw;
background-color: #1F1826;
padding-top: 48px;
overflow-x: hidden;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
.heading,
.heading-cont {
width: 237px;
margin: 0 auto;
font-family: 'Neue Montreal';
font-size: 40px;
font-weight: 700;
line-height: 38px;
letter-spacing: -0.02em;
text-align: center;
font-feature-settings: 'salt' on;
color: #FFFFFF;
.purple-text {
color: #7F3CDD;
}
}
.ss-life {
position: relative;
margin-top: 80px;
.heading-cont {
position: absolute;
top: 161px;
// left: -87px;
transform: translateX(-50%);
width: 144px;
opacity: 0;
}
.text-box-one,
.text-box-two,
.text-box-three,
.text-box-four,
.text-box-five,
.text-box-six {
opacity: 0;
position: absolute;
top: 126px;
left: 0;
transform: translateX(-50%);
width: 216px;
.title {
font-family: 'Neue Montreal';
font-size: 24px;
font-weight: 500;
line-height: 29px;
letter-spacing: 0em;
text-align: center;
font-feature-settings: 'salt' on;
color: #FFFFFF;
margin-bottom: 8px;
.blue-text {
color: #35FFFF;
}
.orange-text {
color: #FF9421;
}
}
.description {
font-family: 'Neue Montreal';
font-size: 14px;
font-weight: 500;
line-height: 20px;
letter-spacing: 0.02em;
text-align: center;
color: #939094;
font-feature-settings: 'salt' on;
}
}
img {
position: absolute;
}
.img-gs {
width: 108px;
top: 81px;
left: -195px;
}
.img-sso {
width: 148px;
left: -87px;
top: 0px;
}
.img-dt {
width: 116px;
left: 61px;
top: 40px;
}
.img-fb {
width: 260px;
left: -87px;
top: 236px;
}
.img-pool {
width: 148px;
left: -159px;
top: 184px;
}
.img-tb {
width: 236px;
left: 29px;
top: 128px;
}
}
}
</style>
vamsi_k changed their profile photo