vamsi_k Posted October 5, 2022 Share Posted October 5, 2022 (edited) 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> See the Pen ExLpJva by boredPheonix (@boredPheonix) on CodePen Edited October 6, 2022 by vamsi_k Added codepen url Link to comment Share on other sites More sharing options...
GSAP Helper Posted October 5, 2022 Share Posted October 5, 2022 It's pretty tough to troubleshoot without a minimal demo - would you mind creating a CodeSandbox or CodePen illustrating the issue? I don't see any glaring mistakes. Are you sure that ScrollTrigger is being loaded/imported properly? Are you seeing any errors/warnings in the console? Here's a starter CodePen that loads all the plugins. Just click "fork" at the bottom right and make your minimal demo: See the Pen aYYOdN by GreenSock (@GreenSock) on CodePen If you're using something like React/Next/Nuxt/Gatsby or some other framework, you may find CodeSandbox easier to use. Once we see an isolated demo, we'll do our best to jump in and help with your GSAP-specific questions. Minor note: you set an ease on the timeline, but there is no such thing. That won't hurt anything, but it won't have any effect either. Maybe you meant to do defaults: {ease:...}? 1 Link to comment Share on other sites More sharing options...
Rodrigo Posted October 6, 2022 Share Posted October 6, 2022 Hi, I can think of two things. One, the elements are not completely ready when the instance ScrollTrigger is created. For that you could try the next tick method to create your instances: mounted () { gsap.registerPlugin(ScrollTrigger) this.$nextTick(() => this.initAnim()); }, Two, you're passing a number to the scrub property in ScrollTrigger's configuration, so that tells GSAP to take one second to update the progress of the tween with the given scroll position. If you just want the progress to be tied to the scroll position without waiting any time, just pass true: initAnim () { this.anim = gsap.timeline({ scrollTrigger: { trigger: '.main-content', markers: true, pin: true, start: 'top top', end: '500% 50%', scrub: true // <- HERE }, 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() }, If these suggestions don't work, please provide a minimal demo in order to see what could be the issue. Happy Tweening! 1 Link to comment Share on other sites More sharing options...
vamsi_k Posted October 6, 2022 Author Share Posted October 6, 2022 @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 Link to comment Share on other sites More sharing options...
Solution Rodrigo Posted October 6, 2022 Solution Share Posted October 6, 2022 Hi @vamsi_k, Thanks for the demo, it made it simple to find the issue. The problem is that you are creating the timeline with the ScrollTrigger instance but at the end you are also playing it: anim = gsap.timeline({ scrollTrigger: { trigger: ".main-content", markers: true, pin: true, start: "top top", end: "500% 50%", scrub: 1, }, ease: "power3.inOut" }); anim.add(this.headingFadeout(), "+=0.5"); anim.add(this.imageMove(), "+=0.5"); anim.add(this.headingContFade(), "+=0.5"); anim.add(this.textFade("one"), "+=0.5"); anim.add(this.textFade("two"), "+=0.5"); anim.add(this.textFade("three"), "+=0.5"); anim.add(this.textFade("four"), "+=0.5"); anim.add(this.textFade("five"), "+=0.5"); anim.add(this.textFade("six"), "+=0.5"); anim.play(); // <- THIS If you check and scroll just a little bit, before the start point is passed, you'll see that the timeline is actually running and then ScrollTrigger takes is back to the beginning again, but the timeline playhead is active. Just remove that line and everything should work as you expect. Let us know if you have any other question. Happy Tweening! 1 Link to comment Share on other sites More sharing options...
vamsi_k Posted October 6, 2022 Author Share Posted October 6, 2022 hey @Rodrigo This fixed it. Thank you so much for the quick help 1 Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now