Corentin Darras
Members-
Posts
6 -
Joined
-
Last visited
Content Type
Profiles
Forums
Store
Blog
Product
Showcase
FAQ
Downloads
Everything posted by 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
-
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
-
Angular and scrollTrigger code optimisation
Corentin Darras replied to Corentin Darras's topic in GSAP
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); }