vue composition + gsap scrolltrigger

[Tonight12 1 Likes (Newbie)]

Guys why is my title triggered not where it should be? Other titles triggers well

[GSAP Helper 123 Likes (Specialist)]

It's pretty tough to troubleshoot without a minimal demo, but the problem is likely that you're animating the element that you're using as the trigger. That's almost always a bad idea. It's throwing off the measurements. It's almost always better to wrap it in a container <div> that you use as the trigger. That way it doesn't throw off the measurements. 

 

If you still need help, please make sure you provide a minimal demo (like a CodePen). 

 

Please don't include your whole project. Just some colored <div> elements and the GSAP code is best (avoid frameworks if possible). See if you can recreate the issue with as few dependancies as possible. If not, incrementally add code bit by bit until it breaks. Usually people solve their own issues during this process! If not, then at least we have a reduced test case which greatly increases your chances of getting a relevant answer.

 

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. 

[Rodrigo 5,918 Likes (Superhero)]

Hi @Tonight12 and welcome to the GreenSock forums!

 

When using ScrollTrigger something you should try when facing this situation is using Vue's next tick method in order to ensure that the DOM has been updated:

https://vuejs.org/api/general.html#nexttick

 

Just add the async approach to ensure the DOM update and add your ScrollTrigger config after that.

 

Also take a look at the GSAP's Context, that would simplify a lot the cleanup phase when a component is unmounted:

https://greensock.com/docs/v3/GSAP/gsap.context()

 

It would look a bit like this:

<script setup>
import { nextTick, onMounted, onUnmounted } from "vue";
import { gsap } from "gsap";

const ctx = gsap.context(() => {});

onMounted(async () => {
  await nextTick();
  // Create ScrollTrigger instances
});

onUnmounted(() => ctx.revert());
</script>

Happy Tweening!