bertelot

Hi, i would like to use the draw svg plugin in a google - banner campaign for a client. So would it work, if i get a gsap membership, download the draw svg plugin and include it (physically) into all the banner formats, that load the google hosted gsap library ? The link that i have to use for google banners done with gsap is: "https://s0.2mdn.net/ads/studio/cached_libs/gsap_3.11.5_min.js" I am just wondering what license it has to be for me, to be sure that everything is fine. Thanks in advance!

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 https://codepen.io/Illustraktor/pen/RwPNEZp update: switched to gsap3 , this one will be updated from now on https://codepen.io/Illustraktor/pen/MWwyyYB 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.

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 https://codepen.io/Illustraktor/pen/LYVERYE

i had to take a closer look at this tail wave ....not done yet with interactivitiy, but looks good so far https://codepen.io/Illustraktor/pen/bGdGoMd

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. https://codepen.io/Illustraktor/pen/dyobmEO

*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

@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 https://codepen.io/Illustraktor/pen/Exaqqyg

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

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?

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

Hi, if i include a simple html tag like <b> in my TextPlugin command, like this ...: TweenLite.to(yourElement, 2, {text:"This is the <br>new</b> text", ease:Linear.easeNone}); the "new" text will be displayed bold, BUT for a short period of time the <b> and </b> tag is visible (before it disappears). Is there a way to make html tags NOT be visible? Thank you!

Wow, great! i was wondering. thx for the info!

Ah . Ok thanks a lot, ill try to find out, what the solution for my site is...

Hi, if i include the jQuery script the pageslide works BUT the svg animation wont play ( which happens to be the logo ).. i updated http://www.bertelot.de/ux.html ok maybe i should make this codepen thing

Hi, im noobish, trying to include my first DrawSVG Animation in my existing website, which uses jQuery for a page-slide in for mobile. Ok, the DrawSVG Animation does not work when i just include all necessary GSAP plugins/scripts. As soon as i remove jQuery, the svg-animation works fine. Right before my closing body tags theres this script: <script src="js/jquery.pageslide.min.js"></script> <script> $(".open").pageslide(); </script> i tried just with: <script type="text/javascript" src="js/greensock/jquery.gsap.js"></script> <script src="js/jquery.pageslide.min.js"></script> <script> $(".open").pageslide(); </script> and lots off other stupid things... Could someone please help? thx in advance! P.S.: the website where the problem is: http://www.bertelot.de/ux.html if you resize your screen to about smartphonesize ( or use a smartphone) you can see that the menu icon doesnt do anything the other sites work http://www.bertelot.de/work.html