Diana LaRue

Awesome, thank you! I'm going to break apart those flowers and have the blooms sway a bit, but I think the hard part is over - learning both Greensock and Inkscape today was a job in and of itself, ha ha.

Ok, got it decent! Did 2 things: 1) Further cleanup in Inkscape. 2) Wasn't thinking that the origin of each child's group would be the upper-left corner. I redid the paths so they would line up. Duh. Question: Is it possible to have the center of each child's group follow the path, or is it always that upper left corner? Also, thanks so much for the help! Final version is here, with the paths shown so you can see what I'm talking about.

I'm so close now! Any idea why the kids jump down off their origin point before starting down their paths?

Ok, merging into one SVG is quite new to me, as I'm primarily a raster person. I've made an attempt here, but now the kids are vanishing, ha ha.

First time using Greensock and I'm trying to animate 2 kids rolling down a hill using ScrollMagic as a trigger. I'm not really much of a coder, so there are gaps in my knowledge and things not very obvious to me. I made some rough paths in Inkscape (they are kind of junky, will tweak later), but they are not scaling as expected. I want each kid to land approx at the bottom of the hill, but they are all over the place depending on browser width. I see in the docs, you can use a matrix to transform the path (example below), but I'm not sure how to have it scale responsively? Also, the paths used in the animation seem to be mirrored? //transform the path using a matrix (rotate 45 degrees and move to right by 200px) MorphSVGPlugin.pathDataToBezier(myPath, {matrix:[0.7071, 0.7071, -0.7071, 0.7071, 200, 0]});