Jump to content
Search Community

bertelot

Members

  • Posts

    15

  • Joined

  • Last visited

 Content Type 

Posts posted by bertelot

    drawSVG in banner ad

    in Banner Animation

    Posted

    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!

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

    in GSAP

    Posted

    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

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

    in GSAP

    Posted

    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

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

    in GSAP

    Posted

    @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

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

    in GSAP

    Posted

    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

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

    in GSAP

    Posted

    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?   

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

    in GSAP

    Posted

    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

    including html tags in text plugin commands

    in Banner Animation

    Posted

    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!

    How can use jQuery and DrawSVG ?

    in GSAP

    Posted

    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:
     
     
    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 
     
×
×
  • Create New...