Errors: Invalid property transformOrigin set to center Missing plugin? gsap.registerPlugin()

[Corentin Darras]

Hi, I got an error since i have setup transformOrigin to center :

 

"Invalid property transformOrigin set to center Missing plugin? gsap.registerPlugin()"

 

 

This is my Angular code (i try to import CSSPlugin without any success) =>

import {gsap} from 'gsap';
import ScrollTrigger from 'gsap/ScrollTrigger';
import MotionPathPlugin from 'gsap/MotionPathPlugin';
import CSSPlugin from 'gsap/CSSPlugin';

///

 

constructor(
  private renderer: Renderer2,
  private intService: InternationalisationService,
  private router: Router,
  private gtmService: GtmService
) {
  gsap.registerPlugin(ScrollTrigger, MotionPathPlugin, CSSPlugin);
}

//

 

buildLine(trigger: string, start: string, end: string, idEl: string, type?, isFr?, mk?) {
  var defaultMarker = false;
  var endSize = '+=' + end;
  var target;
  var ball;

  if (type === 'tb') {
    target = '.drawLineTB' + idEl;
    ball = '.ballTb0' + idEl;
  } else if (type === "mob") {
    target = '.drawLineM' + idEl;
    ball = '.ballM0' + idEl;
  } else if (isFr) {
    target = '.drawLinefr' + idEl;
    ball = '.ballfr0' + idEl;
  } else {
    target = '.drawLine' + idEl;
    ball = '.ball0' + idEl;
  }

  if (mk) {
    defaultMarker = mk;
  }

  return gsap.timeline({
    defaults: {duration: 1},
    scrollTrigger: {
      trigger: trigger,
      scrub: true,
      start: start,
      markers: defaultMarker,
      end: endSize,
    }
  })
    .to(ball, {duration: 0.01, autoAlpha: 1})
    .to(ball, {
      motionPath: {
        path: target,
        align: target,
        alignOrigin: [0.5, 0.5]
      }
    }, 0)
}

drawLine() {
  gsap.defaults({
    'ease': 'none',
    'transformOrigin': 'center'
  });
  gsap.set('.ball', {xPercent: -50, yPercent: -50});
  gsap.ticker.fps(-1);

  // Tl 1
  this.buildLine('#c-header', 'top top', '1100px', '1');

  // Tl 3
  this.buildLine('#c-helping', 'top 60%', '100%', '3').then(end => this.cell.play());
  this.buildLine('#c-helping', 'top 60%', '1150px', '3', null, true, false).then(end => this.cell.play());

  // Tl 4
  this.buildLine('#c-starting-1', 'top 60%', '1800px', '4');

  // Tl 7 832px
  this.buildLine('#c-tips', 'top 60%', '800px', '7').then(end => this.board.play());
  this.buildLine('#c-tips', 'top 60%', '1100px', '7', null, true).then(end => this.board.play());

  // Tl 8 690px
  this.buildLine('#c-form', 'top 60%', '90%', '8').then(end => this.nurse2.play());

  //Tl 9 500px
  this.buildLine('#c-talk-soon', 'top 60%', '40%', '9');

  // Tablet Line
  this.buildLine('#c-intro', 'top 25%', '1100px', '1', 'tb', null, false);
  this.buildLine('#c-talk-soon', 'top 25%', '70%', '9', 'tb');

  if (!this.isFirefox()) {
    this.buildLine('#c-intro', 'top top', '500px', '1', 'mob');
  }
  this.drawFakeMobileLine('#c-description', 'top 50%', false);
  if (!this.isFirefox()) {
    this.buildLine('#c-talk-soon', 'top 50%', '70%', '9', 'mob');
  }
}

Did you notice the firefox condition ?

Since few days i got the following error Only in firefox. The scroll trigger litteraly stop to work. If i disable this two expression that work, but arrived at the end of the svg the error come back .. Realy weird) =>

ERROR TypeError: (intermediate value)(...) is null . 

 

If you have any reccomandations for me  

Regards,

Corentin

[Corentin Darras]

Additional information on the second error, it happen only when the app is compiled and when i'm looking in the minify js i see is related to GSAP. 

[OSUblake]

There is no need to import the CSSPlugin. And it's impossible to tell what's going on by just looking at code, especially if it only happens in a certain browser. Isolating the problem is best course of action. 

 

If it's saying it's an invalid property, then your target is probably not an element, like maybe it's an object. You'll see the same error here.

gsap.to({}, {
  transformOrigin: "center"
})

 

[Corentin Darras]

Ok i understand for the transformOrigin it's good. 

 

For the other pbm it's also complicated for me to isolate something that happens only when the app is minify  (compiled) and only on one browser.

It's difficult to understand 

[OSUblake]

Make sure you are using the latest version, 3.7.1. There were a couple of bug fixes related to Firefox, but again, it's impossible to say what the issue is by just looking at code snippet. If you can create the animation without Angular, like a vanilla app, minify it, and it works in Firefox, then the problem is most likely related to Angular.

 

Just a quick search of the error brought up this.

https://stackoverflow.com/questions/42036349/uncaught-typeerror-intermediate-value-is-not-a-function

 

Perhaps Angular's minify process is messing up a semi-colon somewhere.