Jump to content
Search Community

scrollTrigger's trigger in Nuxt component is all over the place

JoaoJack test
Moderator Tag

Recommended Posts

Hello, 

I'm really worried by a problem i have for a gsap scrollTrigger animation i try to implement in a nested Nuxt component.

When previewing with markers activated, it appears that the start and end of the trigger are fixed, and not at all near the designated div.

Sorry for the tailwind flood in the code - I've already successfully made gsap scrolltrigger animations with tailwind, but it was not in a nested component.
I use GSAP with CDN, and scrolltrigger was doing well on other projects.
My hypothesis is that the problem is related to a mounting + viewport-height + nested component stuff, but I'm stil lnew to this and i can't understand the problem.

In this example, I use refs, but I've already tried a thousand times with a class trigger too (for example, <div class="trigger">)

 

<template>
<div ref="trigger" class='w-full h-screen text-black justify-center flex-1 align-middle my-auto relative p-4 pr-8 flex flex-grow bg-white box-border z-5'>
            <div class="relative flex h-full w-full flex-col">
                <div class="flex h-full w-full shadow-inner bg-mastro2 absolute z-5 bg-cover bg-top">huh ?</div>
            </div>
            <div ref="carte" class="absolute overflow-scroll flex h-screen justify-end ml-auto ">
            <div class='p-5 rounded-xl bg-white bg-opacity-70 my-auto mr-10 z-6 flex flex-col w-1/2 justify-center'>
                <div class='loader_title font-display mb-4 text-gray-700 text-left leading-none text-5xl'>Votre point de départ idéal pour la Côte d'Azur.</div>
                <div class='loader_legend font-sans text justify'>Lorem ipsum dolor sit amet consectetur adipisicing elit. Titae facere, voluptate vero ea a eius. .</div>
                <div class='loader_button mt-4 '><button @click="carta()" class="bg-opacity-50 hover:bg-opacity-100 border border-black p-3 w-32 text-center outline-none text-black bg-white">RESERVER</button></div>
            </div>
            </div>
</div>
</template>
 
<script>
export default {
    mounted() {
    const { triggercarte } = this.$refs
    let hero_scroll = gsap.timeline({
      scrollTrigger: {
        trigger: trigger,
        start: 'top center',
        end: 'bottom center',
        markers:true,
        scrub: true,
      }
    })
    .to(carte, {
        x: -200,
        duration:3
      }).reverse()
     }}
</script>

See the Pen QWKExdG by joaojack (@joaojack) on CodePen

Link to comment
Share on other sites

Hey JoaoJack and welcome to the GreenSock forums. Thanks for supporting GreenSock with a Club GreenSock membership!

 

Can you please create a minimal demo that actually recreates the issue that you're facing? The "demo" that you provided just errors because you're trying to use an export where it shouldn't be. You could either edit your CodePen to get it to recreate your situation (without other errors preventing things from running) or perhaps it would be easier to get a minimal demo set up with CodeSandbox.

 

Link to comment
Share on other sites

  • 2 months later...

I had a similar issue with nuxt and gsap. Gsap seemed to assess the height and width of the page at render on nuxts server side, but some components and dom elements don't render until the client side. If these elements have width or height and change the placement of dom elements or the overall page height it made my scroll trigger animations go all wonky.

Link to comment
Share on other sites

For nuxt project you have to upload it somewhere (maybe netlify).

 

Other than that, next time could you try to describe your end goal in detail.

 

If you think the problem is related to a late render you can put your code in a nextTick to allow for child components to render.

Also as to debug you can try with setTimeout to keep you sane and not go in circles as to validate your point. E.g if putting you code in setTimeout results in the same issue, it is likely not early render issue.

 

 

export default {
    mounted() {
    this.$nextTick( () => {
        const { trigger, carte } = this.$refs
        let hero_scroll = gsap.timeline({
      scrollTrigger: {
        trigger: trigger,
        start: 'top center',
        end: 'bottom center',
        markers:true,
        scrub: true,
      }
    })
    .to(carte, {
        x: -200,
        duration:3
      }).reverse()
    })

     }}

 

  • Like 2
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...