Custom wiggle on a pseudo element

[Jloafs]

Hi everyone - thanks heaps in advance for any help. I'm trying to use the custom wiggle plugin for the first time on a pseudo element. I want the pseudo element to wiggle on rotation and loop infinitely. Really struggling with this - I don't think the custom wiggle is being used for the ease. Can anybody spot where I'm going wrong?

 

gsap.registerPlugin(CSSRulePlugin, CustomEase, CustomWiggle);
var rule = CSSRulePlugin.getRule(".intro--image-wrap:before"); //get the css rule for the :before psuedo element
CustomWiggle.create("iconWiggle", {wiggles:10, type:"random"}); // create the wiggle
const introIcons = gsap.timeline({})
introIcons.to(rule, {duration: 0.5, cssRule: {rotation: "2", ease: 'iconWiggle'},yoyo:true, repeat: -1, })

 

[GreenSock]

It looks like you just put the ease in the wrong spot: 

// BAD
introIcons.to(rule, {duration: 0.5, cssRule: {rotation: "2", ease: 'iconWiggle'}, yoyo:true, repeat: -1})

// GOOD
introIcons.to(rule, {duration: 0.5, cssRule: {rotation: "2"}, ease: 'iconWiggle', yoyo:true, repeat: -1})

(don't nest it inside the cssRule:{} object). 

 

Does that help? 

[Jloafs]

Oh man. Legend! thanks heaps.