Jump to content
Search Community

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

2474 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

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

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...