Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
bertelot

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

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

Share this post


Link to post
Share on other sites

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

 

 

  • Like 4

Share this post


Link to post
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?   

Share this post


Link to post
Share on other sites

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

 

 

  • Like 3

Share this post


Link to post
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

Share this post


Link to post
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

Share this post


Link to post
Share on other sites

hey @bertelot,

 

I am very excited to see great animations soon.
 

See the Pen ZZGjLV by mikeK (@mikeK) on CodePen

 

Happy tweening ...

Mikel

  • Like 2

Share this post


Link to post
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

Share this post


Link to post
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

Share this post


Link to post
Share on other sites

 

Hey @bertelot,

 

And here a nice thread like PRO coders wiggles the tail:

 

 

May be you have it seen already.

 

Happy wiggle ...

Mikel

 

  • Like 2

Share this post


Link to post
Share on other sites

*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

  • Like 1

Share this post


Link to post
Share on other sites
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.

  • Like 1

Share this post


Link to post
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

Share this post


Link to post
Share on other sites

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

  • Like 4

Share this post


Link to post
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

Share this post


Link to post
Share on other sites

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

  • Like 3

Share this post


Link to post
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 2

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.

×