I can't use just 'from' in nuxt

[hakimov_dev]

I can't use just 'from' in nuxt 3, 

 

That's my script codes:

    gsap.timeline({

      scrollTrigger: {

        trigger: "#about",

        start: "top center",

        end: "+=200",

        scrub: true,

      },

    });

 

    tl.from(".about-img", {

      yPercent: 40,

      duration: 1,

      opacity: 0,

    });

 

I've registered scrollTrigger, 

 

The problem is .about-img not showing.

[Toso]

can you add a minimal demo to see the full code , but in case you cant create a demo you can try these steps it might work for you 

 

1- add your code inside gsap.context() 

2- add this context inside an onMounted()

 

something like 

 

onMounted(()=>{

let ctx = gsap.context(()=>{

 

  // your code also in your code dont use duration while you are using scrubbed animation 

 

})

})

 

 

also add the clean up function >>  ctx.revert() inside onUnMounted()

 

 

here is a better thing you can check the starters collection here with nuxt to know where to add what 

https://stackblitz.com/@GreenSockLearning/collections/gsap-nuxtjs-starters

 

 

 

 

[Rodrigo]

Hi,

 

That makes complete sense to me. Keep in mind that from instances take the element from the values you pass in your GSAP configuration to their natural value. So in your case if your about section/element has an opacity of 1 and you set a from instance with opacity: 0, GSAP will take the element from opacity: 0 to opacity: 1, so it'll take the opacity (and the value of any other property you target in the tween config) from the passed value in the config object to it's natural value.

 

In your case the about section/element is not visible when the scroll position hasn't reached the start point in the ScrollTrigger config. Is also expected that any children inside that section won't be visible.

 

Now if for some reason you have another GSAP instance affecting the opacity of that particular element somewhere else, that could be the source of your issue as well. If another GSAP from  instance takes the element's opacity from 0 to it's natural value (1), it'll render at run time. So will the second (or any other subsequent GSAP from instance) GSAP from instance. So when the second GSAP instance is executed (regardless if the tween hasn't run yet) it'll take the opacity of the element from 0 to it's natural value. The problem is that, if another GSAP from instance already set the element's opacity to 0, GSAP will use that as the natural value, so it'll take the element from opacity: 0 to opacity: 0. See the problem?

 

Hopefully this makes sense. If you keep having issues follow @Toso's suggestion of creating a minimal demo so we can see the problem.

 

Happy Tweening!

[hakimov_dev]

Here minimal production: 

See the Pen JjzowKb by hakimov-dev (@hakimov-dev) on CodePen

[Rodrigo]

Hi,

 

Your demo didn't include ScrollTrigger and it wasn't working. I added and registered ScrollTrigger (as mentioned in the docs) and is working in the way is supposed:

See the Pen dyrobJw by GreenSock (@GreenSock) on CodePen

 

Hopefully this helps. If you keep having issues, please create a minimal demo that clearly illustrates the problem you're having.

Happy Tweening!