CSSRulePlugin or CSSRule not working in IE

[jordanklaers]

I suspect this may be an issue with the way my project is setup but honestly I have so little information to base that off of. I see how to implement these two plugins from this codepen:  and I was able to export it and run it in IE to prove the syntax works in IE.

I have tried to mimic that exact syntax (as shown in the commented out code) as well as an approach slightly different, that implements the animation I am intending to use.

 

const rule = this.$data._cssRulePlugin.getRule('#work:after');
const tl = new this.$data._gsap.TimelineMax({
  paused: true,
  duration: 0.3
});
const hoverScale = tl.to(rule, {
  cssRule: {
    height: '16.25rem',
    width: '24rem'
  }
});
this.$el.addEventListener('mouseenter', () => hoverScale.play());
this.$el.addEventListener('mouseleave', () => hoverScale.reverse());

// const testTL = new this.$data._gsap.TimelineMax({ repeat: -1, yoyo: true });
// testTL.add(new this.$data._gsap.TweenMax(rule, 1, {
// 	cssRule: {
// 		left: 100
// 	}
// }, 0));

Both work in Chrome but not IE. The only information I can get around this issue is that, if I pass 'left: 100'' to the cssRule object, in IE I will see the error: "unspecified error" pointing at the line ss[style[i]] ... (from within app.bundle.js from the webpack build)

render: function render(ratio, data) {
    var pt = data._pt,
        style = data.style,
        ss = data.ss,
        i;

    while (pt) {
      pt.r(ratio, pt.d);
      pt = pt._next;
    }

    i = style.length;

    while (--i > -1) {
      ss[style[i]] = style[style[i]];
    }
  },

Honestly im just not sure what to test or look at considering I have also matched the setup used in the codepen and even that didnt work. I can show the configuration I have for registering the plugins and how I made the gsap methods and properties accessible if there might be any value there.

See the Pen ibHAt by jamiejefferson (@jamiejefferson) on CodePen

[OSUblake]

Are you expecting this code to work in IE?

 

const rule = this.$data._cssRulePlugin.getRule('#work:after');
const tl = new this.$data._gsap.TimelineMax({
  paused: true,
  duration: 0.3
});
const hoverScale = tl.to(rule, {
  cssRule: {
    height: '16.25rem',
    width: '24rem'
  }
});
this.$el.addEventListener('mouseenter', () => hoverScale.play());
this.$el.addEventListener('mouseleave', () => hoverScale.reverse());

 

If so, try getting rid of the ES6 syntax, like const and arrow funcitons.

 

[GreenSock]

Also, that CodePen is loading a SUUUUUPER old version of GSAP, plus it uses the old syntax. Here's an updated version that's more concise too: 

See the Pen poPgpzK?editors=0010 by GreenSock (@GreenSock) on CodePen

[OSUblake]

Debug link for CodePen to show it working in IE.

https://cdpn.io/GreenSock/debug/poPgpzK

 

[jordanklaers]

so I updated to this code:

 

const rule = this.$data._cssRulePlugin.getRule('#work:after');

const hoverScale = this.$data._gsap.to(rule, {
  cssRule: { left: 100 },
  duration: 1,
  ease: "power2.inOut",
  stagger: 0.5,
  repeat: -1,
  yoyo: true
});


this.$el.addEventListener('mouseenter', hoverScale.play);
this.$el.addEventListener('mouseleave', hoverScale.reverse);

and I get the unspecified error as mentioned above. it still working in chrome though. I also changed the arrow functions (I had bable in my setup so that wasnt the issue but I changed anyways)

[OSUblake]

The demo shows it working in IE. It must be something with your environment or setup. Maybe something isn't being transpiled for IE. Most people don't worry about IE anymore as Microsoft doesn't support it anymore.

 

Like what is the meaning of this syntax instead of using normal imports?

const rule = this.$data._cssRulePlugin.getRule('#work:after');

 

 

[OSUblake]

It looks like you might be using Vue or Nuxt. Make sure that they even support IE. I think you have to polyfill them.

 

[jordanklaers]

I just made the properties and methods accessible through a mixin in Vue. I will double check the configuration thank you