Need help for conversion from gsap2 to gsap3 for TimelineMax

[DevWeb]

Hi @GreenSock,

 

I am new to this library and there was a issue i've been facing after upgrading the library from v2 to v3 for animations. I changed to gsap.timeline() but its not working with the animation also tried using the older TimelineMax.js file inlcuded in my application. In my html i'm using <svg> <path>...</path></svg> from where i'll be rendering them svgs to animate, It would be really great if you could please help me in the conversion of the below code. 

 

Thanks in advance. 

@ViewChild('chevy') chevy: ElementRef;

@ViewChild('mg') mg: ElementRef;

@ViewChild('honda') honda: ElementRef;

 

this.timeline = new TimelineMax({ repeat: -1, delay: 0.5 })

.to(this.chevy.nativeElement, 0.5, { morphSVG: this.honda.nativeElement, ease: 'power4.in' }, '+=1.5')

.to(this.chevy.nativeElement, 0.5, { morphSVG: this.mg.nativeElement, ease: 'power4.in' }, '+=1.5')

.to(this.chevy.nativeElement, 0.5, { morphSVG: this.chevy.nativeElement, ease: 'power4.in' }, '+=1.5');

}

[GreenSock]

Hi @DevWeb. Welcome to GSAP!

 

It's very difficult for us to troubleshoot just by looking at a small excerpt of code (please provide a minimal demo, like in CodePen or Stackblitz that clearly illustrates the issue). Your converted code would probably look like: 

this.timeline = gsap.timeline({ repeat: -1, delay: 0.5 })
.to(this.chevy.nativeElement, { duration: 0.5, morphSVG: this.honda.nativeElement, ease: 'power4.in' }, '+=1.5')
.to(this.chevy.nativeElement, { duration: 0.5, morphSVG: this.mg.nativeElement, ease: 'power4.in' }, '+=1.5')
.to(this.chevy.nativeElement, { duration: 0.5, morphSVG: this.chevy.nativeElement, ease: 'power4.in' }, '+=1.5');

I notice you're using MorphSVGPlugin but you don't have a Club GreenSock membership so it won't be in any of your downloads. Remember to register that plugin too before you try using it: 

gsap.registerPlugin(MorphSVGPlugin);

Sign up for Club GreenSock here: https://greensock.com/club 

 

Happy tweening!