Mixing ScrollTrigger with Lenis in a Nuxt project

[Mitiss]

Hello,

I am having some troubles making a scrolltrigger animation in a nuxt component. 

 

Basically I have a lenis script for a nuxt page and inside this page a scrolltrigger script for the projectItem.vue component. I installed gsap via npm and imported it both in the page and the component.

 

I don't know why but the code seems to work because we enter in the onEnter() callback but there is no animation at all. Here is a link to the stackBlitz of my project, hoping someone can help me : https://stackblitz.com/~/github.com/Mitiss25/portfolioFinal

Thank you !

[Rodrigo]

Hi @Mitiss and welcome to the GSAP Forums!

 

What specific file should we be looking at? There are several files there and we don't have the time resources to comb through an entire repo trying to find errors and issues. If you can direct us to the specific file it'd be great.

 

If possible create a minimal demo on Stackblitz without uploading a repo. We understand that creating the demo from a repo is super simple and fast, but that limit us on forking the demo since we have to fork the entire repo and that is not as simple as creating the stackblitz project.

 

Finally Lenis is not a GSAP product so we can't offer support on that, we have ScrollSmoother for smooth scrolling effects, which is fully integrated with ScrollTrigger. But we still don't know if this is a ScrollTrigger or Lenis issue, se we can't tell you at this moment. Once we can isolate what the issue is and where is happening, we'll be able to move forward wit this.

 

Happy Tweening!

[Mitiss]

Hello @Rodrigo,

 

Firstly, thank you for taking the time to answer me. I am still a junior in the community and trying to learn as much as possible. Do you have any advice on how to create a small demo like codepens for nuxt projects ? I am aware having to take a look at the whole repo is really not a good thing and I am sorry for that I am still learning how to share a good demo to people but couldn't find anything...  The problem is located in ~/components/projectItem.vue and ~/pages/index.vue.

 

The projectItem.vue component is used inside the index.vue page.

 

[Mitiss]

<script>
import { gsap } from "gsap";
import ScrollTrigger from 'gsap/ScrollTrigger';

export default {

  mounted() {
    gsap.registerPlugin(ScrollTrigger);
    const trigger = this.$refs.animtrigger; 
    console.log(trigger);
    gsap.to(trigger, {
      scrollTrigger: {
        trigger: trigger, 
        start: 'top center', 
        y: '-=100px', 
        ease: "power1.inOut",
        stagger: .2,
        onEnter: () => {
          console.log('coucou')
        }
      }
    })
  },

  props: {
  titre: String,
  type: String,
  composition: Array,
  outils: Array,
  date: String,
  image: String,
  alt: String
  }

}

</script>

<template>
  <div class="projectItem" ref="animtrigger">
    <div class="column">
      <div class="column-c-image">
        <img :src="(image)" :alt="(alt)" class="image">
      </div>
      <div class="column-c-content">
        <p>{{titre}}</p>
      <svg class="arrow" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M6.22438 17.9287C6.36591 18.0667 6.55676 18.1423 6.75438 18.1387C6.95141 18.1391 7.14109 18.064 7.28438 17.9287L16.6144 8.58994V16.6487C16.6144 17.0629 16.9502 17.3987 17.3644 17.3987C17.5658 17.4042 17.7608 17.3273 17.9042 17.1857C18.0477 17.0442 18.1272 16.8502 18.1244 16.6487V6.9165C18.1504 6.80241 18.1498 6.68188 18.1198 6.56444C18.0519 6.29871 17.8444 6.09121 17.5787 6.02334C17.4612 5.99335 17.3407 5.99275 17.2266 6.01873H7.49438C7.08017 6.01873 6.74438 6.35451 6.74438 6.76873C6.74438 7.18294 7.08017 7.51873 7.49438 7.51873H15.5644L6.22438 16.8587C6.08085 16.9997 6 17.1925 6 17.3937C6 17.5949 6.08085 17.7877 6.22438 17.9287Z" fill="black"/>
      </svg>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">

@use "~/assets/css/main.scss";
  .projectItem {
    width: 628px;

    .column {
      display: flex;
      flex-direction: column;
      gap: .2rem;

      .column-c-image {
        object-fit: cover;

        .image {
          width: 100%;
          height: 700px;
          object-fit: cover;
          border-radius: 1rem;

        }
      }

      .column-c-content {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        width: 100%;
      }
    }
  }


</style>

Here is the nuxt component where I used Scrolltrigger , hoping this might be easier for you

[Rodrigo]

Well the only thing I can see is that there is no animation at all here:

gsap.to(trigger, {
  scrollTrigger: {
    trigger: trigger, 
    start: 'top center', 
    y: '-=100px', 
    ease: "power1.inOut",
    stagger: .2,
    onEnter: () => {
      console.log('coucou')
    }
  }
})

You have a GSAP to() instance but there is no animation whatsoever, just the ScrollTrigger configuration, if you remove that this is what's left:

gsap.to(trigger, {
  
})

Nothing, nada, nicht. See the problem? You need to add some property for those elements that can be animated to begin with.

 

Finally you're planning to animate the same element that you're using as a trigger on your ScrollTrigger configuration. Be super careful about that and if possible avoid animating the trigger element because it could lead to unexpected results.

 

Happy Tweening!

[Mitiss]

Thank you so much !