Jump to content
GreenSock

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

FromTo: I thought I'd have a small path segement but...

Recommended Posts

It seems to just animate the whole path. I've been trying to see what I am doing wrong by following the video on the DrawSVG page but alas the newbie in me is failing.

 

Anyone have any suggestions as to what I may be doing wrong (trying to make rain basically)?

 

Pen: 

 

Thanks! 

See the Pen zqzKxj by ZCKVNS (@ZCKVNS) on CodePen

Link to comment
Share on other sites

Hi 2474 :)

 

Welcome to the forums.

 

It looks like you're trying to tween from the end 2% of the path to the beginning 2%. The drawSVG plugin describes the end state - not the values between. 

 

From the docs:

  • Remember, the drawSVG value doesn't describe the values between which you want to animate - it describes the end state to which you're animating (or the beginning if you're using a from() tween). So TweenLite.to("#path", 1, {drawSVG:"20% 80%"}) animates it from wherever the stroke is currently to a state where the stroke exists between the 20% and 80% positions along the path. It does NOT animate it from 20% to 80% over the course of the tween. This is a GOOD thing because it gives you much more flexibility. You're not limited to starting out at a single point along the path and animating in one direction only. You control the whole segment (starting and ending positions). So you could even animate a dash from one end of the path to the other, never changing size, like TweenLite.fromTo("#path", 1, {drawSVG:"0 5%"}, {drawSVG:"95% 100%"});
// you currently have your raindrop variable like this
var raindrop = {
  start: "100% 98%",
  end: "98% 0",
}
// if you switch it to this, I think you'll get the effect you're looking for
var raindrop = {
  start: "98% 100%",
  end: "0% 2%",
} 
// you could also do something like this to start from nothing and grow the size as it falls
var raindrop = {
  start: "100% 100%",
  end: "0% 10%",
}

Hopefully that helps a bit.

 

Happy tweening.

:)

  • Like 2
Link to comment
Share on other sites

Thanks guys, I'll check these out. Appreciate the guidance. Just starting in the land of svg animation. Wish I would have dug into this library sooner. Seems like a hell of a lot of fun.

  • Like 2
Link to comment
Share on other sites

Diaco makes a cooler solution again - very nice. :)

 

@2474 I was only giving you the drawSVG info. Diaco has provided a more complete solution so please just follow his pen - that's how it should really be done.

 

Happy tweening.

  • Like 2
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.
×