Jump to content
Search Community

Is Draw SVG needed for new GSAP-Logo-Guy Animation?

bertelot test
Moderator Tag

Recommended Posts

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

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

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!

  • Like 1
Link to comment
Share on other sites

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

 

 

 

 

  • Like 3
Link to comment
Share on other sites

@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

 

  • Like 1
Link to comment
Share on other sites

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

  • Like 4
Link to comment
Share on other sites

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

 

 

 

  • Like 4
Link to comment
Share on other sites

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

  • Like 2
Link to comment
Share on other sites

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.

  • Like 3
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...