Jump to content
Search Community

Corentin Darras

Members

  • Posts

    6

  • Joined

  • Last visited

 Content Type 

Posts posted by Corentin Darras

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

    in GSAP

    Posted

    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

    Motion Path with multiple paths

    in GSAP

    Posted

    Hi team!

     

    I have a ball wich follow a line with motionPath.

    This line have curves and changing colors, so the svg contain multiple paths. 

         <svg id="Line" xmlns="http://www.w3.org/2000/svg"  x="0px" y="0px"
           viewBox="0 0 1084.7 4581.9">
        <path class="drawline2 st1" d="M1082.7,410.6 1082.7,600.4 1082.7,819.6 "/>
        <path class="drawLine1 st0" d="M796.4,2.8c0,0,201.1-1,262.4-1.3c8.2,0,23.9,0,23.9,22.7c0,14,0,0,0,0v386.3"/>
        <circle class="ball ball01" r="14" cx="14" cy="14"></circle>
      </svg>

    My question is, how can i use differents paths on the same motionPath ? Or how can i force my animation to follow the next path when the ball have follow the previous ? 

     

    I use scrollTrigger and motionPath in an angular env.  This is how i draw the motion but it work only for one path. 

      

    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,
        alignOrigin: [0.5, 0.5]
      }
    }, 0)
}

    Thanks in advance :) 

    Capture d’écran 2021-07-14 à 08.55.59.png

    Capture d’écran 2021-07-14 à 08.56.07.png

    Angular and scrollTrigger code optimisation

    in GSAP

    Posted

    Hi @GreenSock ! Thanks for your quick reply , i understand well certains points.

     

    My animation is a line who's drawing on scroll. Each line following the height of the container. 

     

    I have a question regarding the end of scrollTrigger. Actually i input a size in px who's equal to the container height, but with responsive or language change this height evolve. I'm trying to bind the value on a variable (this.descriptionHeight) who's observe the height of the container. If height change i refresh the scrollTrigger. It's possible ton bind the end of animation to the next div ? Or i need to calculate myself the distance ? My reflexion look good for you ? 

     

    This is my update code following your indications => 

      

    buildTl(trigger: string, start: string, end: number, tog: string, idEl: string, dotSpec?: string) {
  var dotName;
  var dotClass;
  var defaultMarker = false;
  var endSize = '+=' + end + 'px';

  if (dotSpec) {
    dotName = 'dot' + dotSpec;
  } else {
    dotName = 'dot' + idEl;
  }

  if(tog.length > 1) {
    dotClass = tog;
  } else {
    dotClass = 'init'
  }

  return gsap.timeline({
    defaults: {duration: 1},
    scrollTrigger: {
      trigger: trigger,
      scrub: true,
      start: start,
      markers: defaultMarker,
      end: endSize,
      toggleClass: {targets: ".c-dot-nav", className: dotClass},
      onEnter: () => this.setActivePath(dotName),
      onEnterBack: () => this.setActivePath(dotName)
    }
  })
    .to('.ball0' + idEl, {duration: 0.01, autoAlpha: 1})
    .from('.drawLine' + idEl, {drawSVG: '0'}, 0)
    .to('.ball0' + idEl, {motionPath: {path: '.drawLine' + idEl, alignOrigin: [0.5, 0.5]}}, 0)
}

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

  //Tl 1
  this.buildTl('#c-header', 'top top', 400, '', '1')
  //Tl 2
  this.buildTl('#c-description', 'top 25%', this.descriptionHeight, 'reverse', '2')
  //Tl 3
  this.buildTl('#c-helping', 'top 25%', 720, 'reverse-w', '3')
  //Tl 4
  this.buildTl('#c-starting-1', 'top 40%', 260, '', '4')
  //Tl 5
  this.buildTl('#c-starting-2', 'top 40%', 476, '', '5', '4')
  //Tl 6
  this.buildTl('#c-flip', 'top 40%', 385, 'ra', '6', '5' )
  //Tl 7
  this.buildTl('#c-tips', 'top 40%', 832, '', '7')
  //Tl 8
  this.buildTl('#c-form', 'top 40%', 690, 'reverse', '8')
  //Tl 9
  this.buildTl('#c-talk-soon', 'top 40%', 500, 'reverse-w', '9')
}

    Angular and scrollTrigger code optimisation

    in GSAP

    Posted

    Hello,

     

    First of all, i'm totally new to GSAP and really in love of it! Congrats team for this work.

     

    I work on an Angular v10. I would like to know if this following code follow the good practices for GSAP or if i can optimizes it better. 

    Sometimes when i refresh my page, all animations are playing on the scrolltrigger simultaneously like they have lost their real positons. (i can add a video to show the issue) 

      

    drawLine() {
  gsap.defaults({ease: 'none'});
  gsap.set('.ball', {xPercent: -50, yPercent: -50})
  var tl = gsap.timeline({
    defaults: {
      duration: 0.5,
      autoAlpha: 1,
      scale: 2,
      transformOrigin: 'center',
      ease: 'elastic(2.5, 1)'
    }
  })

  //Tl 1
  var action = gsap.timeline({
    defaults: {duration: 1},
    scrollTrigger: {
      trigger: '#c-header',
      endTrigger: "#c-description",
      scrub: true,
      start: 'top top',
      end: '+=400px',
      onEnter: () => this.setActivePath('dot1'),
      onEnterBack: () => this.setActivePath('dot1')
    }
  })
    .to('.ball01', {duration: 0.01, autoAlpha: 1})
    .from('.theLine', {drawSVG: '0'}, 0)
    .to('.ball01', {motionPath: {path: '.theLine', alignOrigin: [0.5, 0.5]}}, 0)
    .add(tl, 1);

  //Tl 2
  var action = gsap.timeline({
    defaults: {duration: 1},
    scrollTrigger: {
      trigger: '#c-description',
      endTrigger: "#c-helping",
      scrub: true,
      start: 'top 25%',
      end: '+=420px',
      toggleClass: {targets: ".c-dot-nav", className: "reverse"},
      onEnter: () => this.setActivePath('dot2'),
      onEnterBack: () => this.setActivePath('dot2')
    }
  })
    .to('.ball02', {duration: 0.01, autoAlpha: 1})
    .from('.theLine2', {drawSVG: '0'}, 0)
    .to('.ball02', {motionPath: {path: '.theLine2', alignOrigin: [0.5, 0.5]}}, 0)
    .add(tl, 1);

  //Tl 3
  var action = gsap.timeline({
    defaults: {duration: 1},
    scrollTrigger: {
      trigger: '#c-helping',
      endTrigger: "#c-starting-1",
      scrub: true,
      start: 'top 25%',
      end: '+=720px',
      toggleClass: {targets: ".c-dot-nav", className: "reverse-w"},
      onEnter: () => this.setActivePath('dot3'),
      onEnterBack: () => this.setActivePath('dot3')
    }
  })
    .to('.ball03', {duration: 0.01, autoAlpha: 1})
    .from('.theLine3', {drawSVG: '0'}, 0)
    .to('.ball03', {motionPath: {path: '.theLine3', alignOrigin: [0.5, 0.5]}}, 0)
    .add(tl, 1);

  //Tl 4
  var action = gsap.timeline({
    defaults: {duration: 1},
    scrollTrigger: {
      trigger: '#c-starting-1',
      endTrigger: "#c-starting-2",
      scrub: true,
      start: 'top 40%',
      end: '+=260px',
      onEnter: () => this.setActivePath('dot4'),
      onEnterBack: () => this.setActivePath('dot4')
    }
  })
    .to('.ball04', {duration: 0.01, autoAlpha: 1})
    .from('.theLine4', {drawSVG: '0'}, 0)
    .to('.ball04', {motionPath: {path: '.theLine4', alignOrigin: [0.5, 0.5]}}, 0)
    .add(tl, 1);

  //Tl 5
  var action = gsap.timeline({
    defaults: {duration: 1},
    scrollTrigger: {
      trigger: '#c-starting-2',
      endTrigger: "#c-flip",
      scrub: true,
      start: 'top 40%',
      end: '+=476px'
    }
  })
    .to('.ball05', {duration: 0.01, autoAlpha: 1})
    .from('.theLine5', {drawSVG: '0'}, 0)
    .to('.ball05', {motionPath: {path: '.theLine5', alignOrigin: [0.5, 0.5]}}, 0)
    .add(tl, 1);

  //Tl 6
  var action = gsap.timeline({
    defaults: {duration: 1},
    scrollTrigger: {
      trigger: '#c-flip',
      endTrigger: "#c-tips",
      scrub: true,
      start: 'top 40%',
      end: '+=385px',
      onEnter: () => this.setActivePath('dot5'),
      onEnterBack: () => this.setActivePath('dot5')
    }
  })
    .to('.ball06', {duration: 0.01, autoAlpha: 1})
    .from('.theline6', {drawSVG: '0'}, 0)
    .to('.ball06', {motionPath: {path: '.theline6', alignOrigin: [0.5, 0.5]}}, 0)
    .add(tl, 1);

  //Tl 7
  var action = gsap.timeline({
    defaults: {duration: 1},
    scrollTrigger: {
      trigger: '#c-tips',
      endTrigger: "#c-form",
      scrub: true,
      start: 'top 40%',
      end: '+=832px',
      onEnter: () => this.setActivePath('dot6'),
      onEnterBack: () => this.setActivePath('dot6')
    }
  })
    .to('.ball07', {duration: 0.01, autoAlpha: 1})
    .from('.theline7', {drawSVG: '0'}, 0)
    .to('.ball07', {motionPath: {path: '.theline7', alignOrigin: [0.5, 0.5]}}, 0)
    .add(tl, 1);

  //Tl 8
  var action = gsap.timeline({
    defaults: {duration: 1},
    scrollTrigger: {
      trigger: '#c-form',
      endTrigger: "#c-talk-soon",
      scrub: true,
      start: 'top 40%',
      end: '+=690px',
      toggleClass: {targets: ".c-dot-nav", className: "reverse"},
      onEnter: () => this.setActivePath('dot7'),
      onEnterBack: () => this.setActivePath('dot7')
    }
  })
    .to('.ball08', {duration: 0.01, autoAlpha: 1})
    .from('.theline8', {drawSVG: '0'}, 0)
    .to('.ball08', {motionPath: {path: '.theline8', alignOrigin: [0.5, 0.5]}}, 0)
    .add(tl, 1);

  //Tl 9
  var action = gsap.timeline({
    defaults: {duration: 1},
    scrollTrigger: {
      trigger: '#c-talk-soon',
      endTrigger: "#c-footer-1",
      scrub: true,
      start: 'top 40%',
      end: '+=500px',
      toggleClass: {targets: ".c-dot-nav", className: "reverse-w"},
      onEnter: () => {this.setActivePath('dot8'); this.nurse2.play();},
      onEnterBack: () => this.setActivePath('dot8')
    }
  })
    .to('.ball09', {duration: 0.01, autoAlpha: 1})
    .from('.theline9', {drawSVG: '0'}, 0)
    .to('.ball09', {motionPath: {path: '.theline9', alignOrigin: [0.5, 0.5]}}, 0)
    .add(tl, 1);
}
×
×
  • Create New...