vamsi_k

Oh nice. thanks @akapowl

Hello, I am trying create something like this, but unable figure out logic. Can someone point me to a similar codepen using latest version of gsap Thanks

hey @Rodrigo This fixed it. Thank you so much for the quick help

@GSAP Helper Thanks for the starter codepen, I added it in the post. I am not getting any errors in console @Rodrigo Thanks for the suggestion but It didn't work

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>