redtoad
Content Type
Profiles
Forums
Store
Blog
Product
Showcase
FAQ
Downloads
Posts posted by redtoad
-
-
thanks @Mikel ...no dice. I've tried a method based off another pen on here and now can at least get the cicada to react. There's an offset I gotta get rid of. I need him to hover over the triangles but he won't in this example...besides sort of flying away. I'm going to go eat and come back to it. going to be a long night.
-
the quickset followmouse thing doesnt have left and top. I replaced my code with it and updated the variables and now I cannot see my cicada. at all. No console error. my animation on that element also isn't firing (that I can see, I suspect it is firing off the screen).
-
ok will try that thank you.
No the codepen isnt the same link. I edited the pen.
-
right @elegantseagulls thanks. I need a group within an svg to be my mouse follow element. Think I've figured out codepen now.
-
ok I think I have figured out codepen, apologies.
also I need the mouse follow to happen AFTER everything else executes.
-
I don't even know if I can do this but I've looked at a bazillion examples. If I get this bit finished then I'm mostly done but the tweaking.
I need for my #flying group to follow my mouse.
Feel free to tell me I'm goofy/doing something wrong.
I have #flying as an svg group because otherwise it can't interact with my triangles. if I make it an svg on its own there is no overlapping them. I tried nesting svgs and then gsap wouldn't work. Please can anyone explain my issue?
-
-
no, you're right Mikel but what I can do is Morph to the point where I have a body, then make a compound path of the wings and motion tween those. Problem solved. Thank you so much for your help!
The motion tween shall be fun because I basically need it to blur, but I will be back with more stupid questions as needed.
-
3
-
-
-
-
2 hours ago, mikel said:
To show the effects:
Happy morphing ...
Mikel
Yeah, since what I'm going for is actually the bug raising its wings? I think I'll have to rethink the way this happens. But the answer to my question was, yes. I have to tween each separate object. got it.
Not a problem, just tedious! Thank you so much!
-
16 hours ago, GreenSock said:
Another option is to COMBINE your paths into one complex one because they all share the same fill and other attributes anyway, right? Most drawing programs allow you to combine multiple paths into one. Or you could do it with JS, but it's a bit more complex. Let me know if you need help with that.
So in the end, you'd only have two <path> elements - one for the starting shape and one for the ending shape. See what I mean?
Or, like @mikel said, you could use loops but that might get a little tricky to make sure everything is in the order you want so that each sub-path in the starting shape matches with the one in the ending shape. MorphSVGPlugin has an algorithm that tries to make sense of that automatically in complex paths.
Happy tweening!
I can't combine the paths without losing the space between the pieces, which is essential. Unless you know of some wizardry which allows me to do that.
But thank you.
-
Ok so I'm a super newbie and I've looked but can't find the answer to this, probably because the answer is too simple.
I'm trying to MorphSVG my first bug here into my second bug. There are a lot of paths. I'm willing to go try to match these paths and morph them but want to check before I do all that work and make sure there isn't something I'm missing? I saw a video where it looked like the morphing was this complicated and the guy talked about subpaths and how the algorithm chose them but all the examples have one simple path being morphed to another simple path.
Do I have to morph each little path to the corresponding path on my new shape?
See the Pen MWYEzYQ#code-area by redtoad (@redtoad) on CodePen
follow mouse?
in GSAP
Posted
thanks @ZachSaucier, I'll look at that!