Search the Community

hello i am jignasha please someone tell me how gsap3 scrolltrriger work with angular framework , i want one ball is moveing on scroll event in website

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