Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Duo

DrawSVG is running instantly when placed inside a new TimeLine

Recommended Posts

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

Screen Shot 2017-11-23 at 11.49.39 AM.png

Link to post
Share on other sites

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.

:)

  • Like 4
  • Thanks 1
Link to post
Share on other sites

Hi PointC,

 

That has worked perfectly. Thanks so much.

  • Like 2
Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    No registered users viewing this page.

×