Jump to content
Search Community

DrawSVG is running instantly when placed inside a new TimeLine

Duo test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

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 comment
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 comment
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.
×
×
  • Create New...