CSSPlugin missing about nuxt-gsap

[ivodolenc]

Hi, @P-at,

Try removing the scoped tag from <style>:

<template>
  <div class="box"></div>
</template>

<script>
export default {
  mounted() {
    const circle = this.$CSSRulePlugin.getRule('.box::after')

    // works as expected
    console.log(this.$CSSRulePlugin);
    console.log(circle);

    this.$gsap.to(circle, { duration: 5, cssRule: { backgroundColor: 'blue' } })
  }
}
</script>

<style>
.box {
  position: relative;
  width: 10vw;
  height: 10vw;
  border: 1px solid #000;
}

.box::after {
  content: '';
  position: absolute;
  bottom: 0;
  right: 0;
  width: 5vw;
  height: 5vw;
  background: #000;
  border-radius: 50%;
}
</style>

[ivodolenc]

Hi and thanks for your interest in this module.

CSSPlugin

• default: true

CSSPlugin is included automatically in gsap's core and there is no need for additional configuration.

nuxt.config.js

export default {
  buildModules: ['nuxt-gsap-module']
}

Available globally

// Access GSAP by using
this.$gsap

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

More info

---

CSSRulePlugin

• default: false

However, CSSRulePlugin isn't included in gsap's core by default. To use cssRule plugin, simply activate it in the nuxt.config.js and that's it:

nuxt.config.js

export default {
  buildModules: ['nuxt-gsap-module'],

  gsap: {
    extraPlugins: {
      cssRule: true
    }
  }
}

Available globally

// Access the plugin by using
this.$CSSRulePlugin

// or
const CSSRulePlugin = this.$CSSRulePlugin

// or
const gsap = this.$gsap
const rule = this.$CSSRulePlugin.getRule('.myClass::before') //get the rule

gsap.to(rule, { duration: 3, cssRule: { color: 'blue' } })

More info

---

Feel free to try it and let me know if everything works as expected.

[ivodolenc]

Closing this as resolved, but feel free to reopen it if you have any issues.

[P-at]

Hi @ivodolenc,

thanks for your quick reply … and sorry for re-opening this issue, but I’m still not able to get it to work. :/

Maybe this sandbox helps: https://codesandbox.io/s/cssruleplugin-qrhzx?file=/pages/index.vue

Did I miss something, because the getRule function returns undefined?

[P-at]

Ouch, good to know! 🙈

Appreciate your help. Thanks again!

[ivodolenc]

No problem, but yeah, strange behavior.

I think this has to do with the way vue/nuxt works with scoped styles, because when you import gsap and cssRule directly(without module), you get the same undefined result.

Also thanks for ☕ Cheers 👋