Jump to content

Corentin Darras

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

Recommended Posts

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';



  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() {
    'ease': 'none',
    'transformOrigin': 'center'
  gsap.set('.ball', {xPercent: -50, yPercent: -50});

  // 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 :) 



Link to comment
Share on other sites

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. 

Link to comment
Share on other sites

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"


  • Like 1
Link to comment
Share on other sites

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 

Link to comment
Share on other sites

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.



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


  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.