CSSPlugin missing

[P-at]

Hi @ivodolenc,

first of all, thank you for this great module. It’s pretty handy!

The current version is missing the CSSPlugin (CSSRule doesn’t work without it).
Would you be so kind and integrate it?

Thank’s in advance!

[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?

[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>

[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 👋