search

hypernym-studio / nuxt-gsap

GSAP module for Nuxt.
MIT License
290 stars 12 forks source link

Components - no go, I guess? #6

Closed pkej closed 3 years ago

pkej commented 3 years ago

I'm trying to add "animate"-method to my component in order to separate concerns. The animation is very slow if I use the template method (in development, no idea how it is in production), which works from a component However, the gsap object isn't available in "this" in components, nor in process, so I need to use the gsap-object when in a page, which gets cumbersome when adding several components with different animaitons.

This might be due to my inexperience with Nuxt, I just saw that I was almost reproducing routers, states, etc. in this project and decided to move it into Nuxt.

It might be related to when things are instantiated in Nuxt, I don't know :)

pkej commented 3 years ago

Never mind, gsap is available as a gsap import from package gsap so I solved it myself.

ivodolenc commented 3 years ago

Hi, not sure if I understood you well, but nuxt-gsap-module also works in components. Feel free to check out some examples.

If you use some features that are not included in the gsap's core, such as scrollTo or scrollTrigger, don't forget to activate them in extraPlugins options in nuxt.config.js.

Available globally

// Access GSAP by using
this.$gsap

// or
const gsap = this.$gsap
gsap.to('.box', { rotation: 27, x: 100, duration: 1 })

Use in templates

<div v-gsap.to="{ /* ... */ }"></div>
<div v-gsap.from="{ /* ... */ }"></div>
<div v-gsap.fromTo="[{ /* ... */ }, { /* ... */ }]"></div>
<div v-gsap.set="{ /* ... */ }"></div>