Scroll Trigger works only before refresh page

[GabrielVeres95]

Steps to Reproduce

heroScale() { this.$gsap.to('.home__hero__wrapper', { scale: 0.8, opacity: 0.75, duration: 1.2, scrollTrigger: { trigger: '.home__projects', markers: true, start: 'top 100%', end: 'top 50%', scrub: true } }) }

Current Behavior

The issues is that it works only after I save a change in the code. After refreshing the page, it stops working.

Something else, is the fact that, global effects are not working. Maybe the issues are linked in some way.

Expected Behavior

I am trying to set a scrollTrigger animation that sets the opacity and scale to a smaller value than normal on scroll. Am I doing something wrong?

Thank you for your help!

Additional Details

No response

Version

No response

[ivodolenc]

Have you tried this example directly with gsap (without the module)?

If it works as expected, then the problem is with the module.

If the same issue appears as you stated with gsap directly (without the module), then there is a possibility that you are doing something wrong.

Also, try to paste minimal working example or link to the repo.

Feel free to test it again and leave feedback here.

Code examples

Test Guide

1. Disable nuxt-gsap-module in the nuxt.config file

// nuxt.config

{
  buildModules: [
    // 'nuxt-gsap-module'
  ]
}

2. Import gsap directly in the page for testing

<template>
  <div>
    <!-- your html here -->
  </div>
</template>

<script>
  import { gsap } from 'gsap'

  export default {
    mounted() {
      const { ScrollTrigger } = require('gsap/ScrollTrigger')
      gsap.registerPlugin(ScrollTrigger)

      // your code
      gsap.to('.home__hero__wrapper', {
        scale: 0.8,
        opacity: 0.75,
        duration: 1.2,
        scrollTrigger: {
          trigger: '.home__projects',
          markers: true,
          start: 'top 100%',
          end: 'top 50%',
          scrub: true,
        },
      })
    },
  }
</script>

[ivodolenc]

I just tested the module with the example you provided and it works fine.

As I mentioned, check your code again and leave feedback.

Working example

<template>
  <div>
    <section class="s-1"></section>
    <section class="s-2"></section>
    <section class="s-3"></section>
  </div>
</template>

<script>
export default {
  mounted() {
    const gsap = this.$gsap

    gsap.to('.s-2', {
      scale: 0.8,
      opacity: 0.75,
      duration: 1.2,
      scrollTrigger: {
        trigger: '.s-2',
        markers: true,
        start: 'top 100%',
        end: 'top 50%',
        scrub: true,
      },
    })
  },
}
</script>

<style>
section {
  display: flex;
  width: 100vw;
  height: 100vh;
}
.s-1,
.s-3 {
  background: #cbd5e1;
}
.s-2 {
  background: #64748b;
}
</style>

Also, global effects works as expected. Example

Test env

• nuxt: 2.15.8
• nuxt-gsap-module: 1.7.2

[GabrielVeres95]

Thank you for the quick reply! I tested as you said but nothing. Seems that I am having some issues with the project setup.

[GabrielVeres95]

Just found out that it work only after I change routes and come back to the page. Any ideas?

Thank you!

[ivodolenc]

Can't reproduce it from the info you provided.

Tip: Create a new default empty project, install the module and play it with simple animations. If it works, your previous project probably has issues.

If you think you've found a bug, please provide a link to a minimal code example (repo or online sandbox) that shows the issue.