bertelot Posted February 2, 2020 Share Posted February 2, 2020 Hi, i am trying to find a solution for the new cape-Animation of the Greensock-Logo-guy. Is it only possible with DrawSVG? i thought about tweening single 'points' of a path, but now i am stuck, because all i can find is a 'd' in a 'path' that 'stores the data'.... but there is no way for me do something, is there? Thanks in advance Link to comment Share on other sites More sharing options...
mikel Posted February 2, 2020 Share Posted February 2, 2020 Hey @bertelot, Of course, you can tween a path - e.g. like this See the Pen zYxgdRw by mikeK (@mikeK) on CodePen Happy tweening ... Mikel 4 Link to comment Share on other sites More sharing options...
bertelot Posted February 2, 2020 Author Share Posted February 2, 2020 Hi Mikel, oh...that is indeed interesting. I just went simply-green to try my luck with drawSVG, but.. it´s not what i am looking for ( it seems ), since i already know about the drawSVG-stroke-animation..., so i thought the' fill' would be animate-able like i wanted .... not just alpha.... blabla The truth is, that this cape-animation is a threeJs thing, isn´t it? Link to comment Share on other sites More sharing options...
OSUblake Posted February 2, 2020 Share Posted February 2, 2020 It's all done with svg. You can look at source code, but it's pretty advanced. See the Pen WQjRXE by GreenSock (@GreenSock) on CodePen 3 Link to comment Share on other sites More sharing options...
GreenSock Posted February 2, 2020 Share Posted February 2, 2020 Blake is right - the cape flapping isn't done by a single plugin or anything like that - it's pretty advanced and wasn't intended to be a "cookie-cutter" solution for others to use. I just whipped that together for that particular animation. Of course you can use MorphSVGPlugin to morph between shapes, but that's not the same as what I'm doing in that cape-flapping animation. And no, it's not ThreeJS at all. It's pure SVG and some custom logic for the flapping. Thanks for joining Club GreenSock! I hope the tools serve you well. Let us know if you need anything else. Happy tweening! 1 Link to comment Share on other sites More sharing options...
bertelot Posted February 3, 2020 Author Share Posted February 3, 2020 thank you guys. i was hoping that it is a gsap animation, not a (browser) requestAnimation loop, and....( scrubbing) that thing is awesome. GSAP is awesome ...but THIS is really advanced. I´m glad about knowing now, that animating single 'values' of the 'd' of a path is possible... MorphSVG is a thing i must say, thats what i see now, because i would love to get better control of animating vector shapes 'fluidly' or 'wavy-ish', and was a bit confused by the animal-shape morphs shown in the videos. Now i do understand better what i could do with morphSVG. i´ve searched a while and thank you @OSUblake for these : https://greensock.com/forums/topic/15270-animating-waves-with-gsap/ https://greensock.com/forums/topic/16371-svg-sine-wave-emulate-audio-equalizer/ https://greensock.com/forums/topic/16172-svg-wave-animation/ so, due to the fact that i illustrate better than code i´ll rather draw a sprite-sheet now .( the 'browser' animation was supposed to be an animated cat´s tail ), but the combination ( with the yet not existing cat) won´t work, i guess . ....for now... so i´ll draw a whole cat-animation in a spritesheet, and 'step-ease' that thing with gsap and go through the timeline with scroll-magic. thanks greensock-guys for making this easily possible! i´ll think about upgrading to shockingly green ... and... probably 'help' the greensock community with some artwork, like key positions of (hand-drawn)characters, that would look good with just the combination of 'stepped-eases' and seperate alpha/scale tweens with all sorts of eases, ... 3 Link to comment Share on other sites More sharing options...
mikel Posted February 3, 2020 Share Posted February 3, 2020 hey @bertelot, I am very excited to see great animations soon. See the Pen ZZGjLV by mikeK (@mikeK) on CodePen Happy tweening ... Mikel 2 Link to comment Share on other sites More sharing options...
ZachSaucier Posted February 3, 2020 Share Posted February 3, 2020 @mikel I guess you've never seen tools like this, huh? https://www.spreeder.com/app.php?intro=1 Link to comment Share on other sites More sharing options...
bertelot Posted February 3, 2020 Author Share Posted February 3, 2020 @mikel nice .Pretty much, what i was talking about, except i couldnt handle vectors for 'optimizing' that animation... but yea, MorphSVG again. var Charly id="mundauf!.... 😁 I did already thank you for that path' information'. I tried to make 'it' readable for me: the base point followed by x and y : M 500 300 the next one is the interesting one : q 200 -100 200 -50 (that last two values are again x and y, but animating the the first two is 'fun'. It´s the 'points' the curve 'follows through'. but understanding how that could look good will take a while) adding a t after that would 'create' a new segment followed by x and y : t 70 0 See the Pen Exaqqyg by Illustraktor (@Illustraktor) on CodePen 1 Link to comment Share on other sites More sharing options...
mikel Posted February 4, 2020 Share Posted February 4, 2020 Hey @bertelot, Here is a nice 'pocket giude' and here a cool See the Pen mewdyZ by anthonydugois (@anthonydugois) on CodePen to learn how to build SVGs. Hey @ZachSaucier, In the late 1960s I learned to read quickly, especially for narrow newspaper columns with the optimal number of characters, the optimal line length and line weft. Happy reading. Makes live easier. Mikel 4 Link to comment Share on other sites More sharing options...
mikel Posted February 4, 2020 Share Posted February 4, 2020 Hey @bertelot, And here a nice thread like PRO coders wiggles the tail: May be you have it seen already. Happy wiggle ... Mikel 2 Link to comment Share on other sites More sharing options...
bertelot Posted February 4, 2020 Author Share Posted February 4, 2020 *sigh* wow. thank you . for the guide, for the editor, for this link, that i already know, but didn´t scroll enough to see @OSUblake ´s version.. I´m speechless for now. i´ll be back soon. thx 3000 1 Link to comment Share on other sites More sharing options...
OSUblake Posted February 4, 2020 Share Posted February 4, 2020 3 minutes ago, bertelot said: but didn´t scroll enough to see @OSUblake ´s version.. I figured you saw that as you liked my first post. But yeah, the best stuff is almost always towards the end of a thread as the solution gets more refined. 1 Link to comment Share on other sites More sharing options...
bertelot Posted February 4, 2020 Author Share Posted February 4, 2020 1 hour ago, OSUblake said: I figured you saw that as you liked my first post. But yeah, the best stuff is almost always towards the end of a thread as the solution gets more refined. well i know i was totally attracted by the other 'wavy' techniques in opened tabs, so .. i missed exactly what i wanted... ( i remember exactly, that i saw the 'cat' with no animation in the preview, and closed the tab ..like an idiot. So it serves me right, 'running in circles'... but no problem. i learned a lot the last days, i should complete my little path d animation-defintion thing,.... after @mikel ´s info.... it is of course more complex, than i foolishly thought. ...so thank you... i should at least do one cat´s tail animation... @Sahil´s version is of course 'inspiring' too 😀 ...and, here is dangerous 'Harry', the furry bumbleFly.He will probably get a new haircut- and what not - soon. This is the first try to animate stuff, triggered by scrolling, rather than hovering or clicking. See the Pen dyobmEO by Illustraktor (@Illustraktor) on CodePen 4 Link to comment Share on other sites More sharing options...
bertelot Posted February 6, 2020 Author Share Posted February 6, 2020 i had to take a closer look at this tail wave ....not done yet with interactivitiy, but looks good so far See the Pen bGdGoMd by Illustraktor (@Illustraktor) on CodePen 4 Link to comment Share on other sites More sharing options...
bertelot Posted February 8, 2020 Author Share Posted February 8, 2020 getting started with morphSVG 😎 i removed the bitmap-eyes, and overlayed the png with 2 eye-shapes ( one eye is scaledX -1). They are morphing ( eye blink ) and scaleY in a seperate timeline , which in this case, doesn´t look much different, but ..yea i need practice ...update: .eww... the css ....doesn´t work at all See the Pen LYVERYE by Illustraktor (@Illustraktor) on CodePen 2 Link to comment Share on other sites More sharing options...
mikel Posted February 9, 2020 Share Posted February 9, 2020 Hey @bertelot, That looks great. Just for fun. Another 'artificial' tail. The tail is now wagging the dog - no the code. See the Pen GRJgYyw by mikeK (@mikeK) on CodePen I am still in the learning phase too. Therefore happy learning ... Mikel 3 Link to comment Share on other sites More sharing options...
bertelot Posted February 15, 2020 Author Share Posted February 15, 2020 here is a little update again. i combined a body path animation with a seperate head movement, so 'bending' the body by just tweaking the path values could look pretty funny....and the whiskers.... WILL be fun soon 'synced with an appropriate pose' .., and stuff See the Pen RwPNEZp by Illustraktor (@Illustraktor) on CodePen update: switched to gsap3 , this one will be updated from now on See the Pen MWwyyYB by Illustraktor (@Illustraktor) on CodePen ok, the browser-window-scaling problem is the result of just building a path, pasting the values, not thinking about the viewboxes and the css. i tried to fix this all the time, but now it is obvious. I can´t save a current setting in the svgPathBuilder, so i rather use Adobe illustrator and build a clean layered file, that i can work with. I´ll try illustrating cat poses now, and morphSVG quickly between those poses, when clicking or scrolling. This is gonna interesting in combination with the already existing 'cat-setting', and probably difficult.. DrawSVG will just be used for the whiskers, but will look good, i promise 😅 so thank you guys again. 3 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now