[Nuxt 3 setup with plugins]

On 3/14/2023 at 11:20 AM, Rodrigo said:

Hi,

 

For images a good alternative could be to use Nuxt Image, which is a part of the Nuxt ecosystem and developed by many members of the Nuxt team:

https://image.nuxtjs.org/

 

The API for the two components includes a load event that allows you to keep track of the images loaded state and could be helpful to tell you when you should create your ScrollTrigger instances:

 

As for the scroll position jump you can use ScrollTrigger's clearScrollMemory method:

https://greensock.com/docs/v3/Plugins/ScrollTrigger/static.clearScrollMemory()

 

Hopefully this helps.

Happy Tweening!

For continuity, the topic indicated Nuxt 3, the nuxt-image package that is compatible with Nuxt 3 is @nuxt/image-edge.

[Title disappearing when running gsap.from twice]

Yes that's it! I read that article, this is exactly what I was looking for. Completely solves my problem and explains why its working that way. Thank you Cassie!

[Title disappearing when running gsap.from twice]

Ok I tried this:

 

function gsapFrom () {
  gsap.from('#title', { duration: 2, x: screen.width, ease: 'back.out(1.2)' })
}
setTimeout(gsapFrom, 2000)
setTimeout(gsapFrom, 6000)

 

So it seems maybe it is a timing thing.

 

So then I tried this:

 

let tl = gsap.timeline()

tl
  .from('#title', { duration: 1, x:screen.width, ease: 'back.out(1.2)' }, '<3')
.from('#title', { duration: 1, x:screen.width, ease: 'back.out(1.2)' })

 

And running 2 from methods on the same timeline, the first from works, but the second still makes it disappear. Is this the same kind of timing issue?

[Title disappearing when running gsap.from twice]

Hi, this is probably a simple thing that I'm not grasping about gsap. I have a tween where I'm animating a title sliding in from the right side of the viewport. Here's the problem:

 

When everything starts, the title is in the middle of the screen. The title element is then animated from the right side of the viewport at x: screen.width using gsap.from('#title', { duration: 2, x: screen.width, ease: 'back.out(1.2)' }). I try to run the same gsap.from tween again but delayed 4 seconds using gsap.from('#title', { duration: 2, x: screen.width, delay: 4 }), but when the second gsap.from tween runs, the title element completely disappears! The question is why does it disappear? My understanding is it should revert back to the center after the first tween runs, and then be ready for the second tween to do the same thing again. Is this a timing issue, or maybe the element winds up outside the viewport again for some reason? I've tried using fromTo and couldn't seem to get that to work either. I know this is something simple but I've been beating my head against the wall trying to figure it out. Can someone explain what's happening here? Thanks in adv.

 

 

 

 

See the Pen abLvYbX by iankco (@iankco) on CodePen