Invalid property height set to 0% Missing plugin? gsap.registerPlugin()

[SuperKef]

Hello GreenSock,

 

Recently transitioned to v3 and had everything working locally until I deployed to live.

Live I get the following message: 

 

Quote

Invalid property height set to 0% Missing plugin? gsap.registerPlugin()

 

<script>
import { TimelineLite } from 'gsap'

export default {
  methods: {
    blastoff() {
      let children = this.$refs.barchart.children;
      for (var i = 0; i < children.length; i++) {
        var elChild = children[i].getElementsByTagName('div')[0];
        const timeline = new TimelineLite() 
        let maxHeight = elChild.style.height.slice(0, -1);
        timeline
          .set(elChild, { height: '0%' })
          .to(elChild, 1.5, { height: maxHeight + '%', ease: "power2.inOut"}, i/5)
      }
    }
  },
  mounted() {
    this.blastoff();
  }
};
</script>

the .set seems to be causing the trouble. Weird thing is that it works properly locally but doesn't when I build and deploy.

[GreenSock]

That error indicates that the target of the .set()/.to() doesn't have a "height" property. It's super difficult to troubleshoot without a minimal demo, but I'd recommend adding a console.log(elChild) right before the tween to see if it's what you THINK it is Perhaps it doesn't exist at that point. 

 

Another thing that may have happened: over-aggressive tree-shaking in your build process? I noticed you're only importing TimelineLite. I'd recommend updating to the more modern syntax that references the simplified "gsap" object - there's no need for TimelineLite/TimelineMax/TweenLite/TweenMax anymore.