Jump to content
Search Community

Enabled scrub in scrollTrigger object but animation not stopping when scrolling is stopped

vamsi_k test
Moderator Tag

Go to solution Solved by Rodrigo,

Recommended Posts

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 by vamsi_k
Added codepen url
Link to comment
Share on other sites

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:...}? 

  • Thanks 1
Link to comment
Share on other sites

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!

  • Thanks 1
Link to comment
Share on other sites

  • Solution

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!

  • Thanks 1
Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...