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

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.

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

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

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') }

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); }