DrawSVG is running instantly when placed inside a new TimeLine

[Duo 2 Likes (Newbie)]

Hi,

 

First of all. We love Greensock. We have used it on about 3 new client projects already and find it incredible! So great work!

 

I'm trying to get the following animation to work however and am having some issues.

 

This is the following animation. See screenshot.

 

The animation should be as follows:

• The T appears
• The line from the T to the D animates the stroke with DrawSVG.
• The D appears
• The line from the D to the L animates the stroke with DrawSVG.
• The L appears
• The line from the L to the T animates the stroke with DrawSVG.

 

This is the following code that I have:

 

const tl = new TimelineLite({delay:0.5, repeat:-1, repeatDelay:2});

    tl.from(this.letterT, 0.25, {scale:0, opacity:0, transformOrigin:'center', ease: Bounce.easeOut})
      .from(this.line1Path, 5, { drawSVG: "100% 100%" }, { drawSVG: "0 100%", ease: Linear.easeNone})
      .from(this.letterD, 0.25, {scale:0, opacity:0, transformOrigin:'center', ease: Bounce.easeOut})
      .from(this.line2Path, 5, { drawSVG: "100% 100%" }, { drawSVG: "0 100%", ease: Linear.easeNone})
      .from(this.letterL, 0.25, {scale:0, opacity:0, transformOrigin:'center', ease: Bounce.easeOut})
      .from(this.line3Path, 5, { drawSVG: "100% 100%" }, { drawSVG: "0 100%", ease: Linear.easeNone})

 

Now if I'm correct each .from should run after each other. This is working fine with the letters but the line ones run the moment the animation starts. I've tried using the Position Parameter on those line ones to no avail.

 

Any help with this would be greatly appreciated.

 

Thanks

[PointC 11,945 Likes (Superhero)]

Hi @Duo

 

Welcome to the forum and thanks for being a Club GreenSock member.

 

Your .from() tweens that are animating the lines with drawSVG are using two sets of vars. Looks to me like you probably want a .fromTo() tween in there.

https://greensock.com/docs/TweenMax/static.fromTo()

 

If you have other questions, a CodePen demo is the best way to get answers. More info:

 

Hopefully that helps. Happy tweening and welcome aboard.

[Duo 2 Likes (Newbie)]

Hi PointC,

 

That has worked perfectly. Thanks so much.