Jump to content
GreenSock

Tonight12

vue composition + gsap scrolltrigger

Recommended Posts

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

image.png.4b92e61e7ff2d1ab30e2d2854efdd7a7.pngScreenshot_4.thumb.png.98401d019b2cf197c18e8a4afca99e99.png

  • Like 1
Link to comment
Share on other sites

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. 

  • Like 1
Link to comment
Share on other sites

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!

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.
×