Jump to content

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


  • Content Count

  • Joined

  • Last visited

Community Reputation

0 Newbie

About mechaniac

  • Rank
  1. Heres a link to the current situation (click the burger icon): http://stan.at/stansPlayground/ following this advice: https://stackoverflow.com/questions/2296097/making-an-svg-image-object-clickable-with-onclick-avoiding-absolute-positioning I am calling a function from my SVG file: <svg onclick="openAbout()" width="100%" height="100%" viewBox="0 0 738 781" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:1.5;"> <script xlink:href="/stansPlayground/scripts/scripts.js" /> <g transform="matrix(1,0,0,1,-628.921,-608.872)"> <g>... this is my SVG object in index.html: <div id="navIconHolder" class="mainMenuIconHolder"> <object id="burgerSVG" class="mainMenuIconSVG" data="content/main/menu_burger_01.svg" type="image/svg+xml"></object> </div> scripts.js: function openMenu(){ console.log("openMenu") const timelineOpenMenu = new TimelineMax({repeat: -1}); timelineOpenMenu.fromTo(mainMenuWindow,1,{x:0},{x:200}); } and I get ReferenceError: TimelineMax is not defined I have the CDNs linked and a TimelineMax works if I call it within script tags from index.html: <script> window.addEventListener("load", function(){ var tl = new TimelineMax({}); tl.to("body",.3,{backgroundColor:"blue"}); }) </script> so i guess its a matter of getting the files linked properly, but I cant work it out.
  2. I am using morphSVG to morph compound paths (as coming from illustrator) on single Shapes it works just fine, but when I want to use compound shapes the target gets flipped. I was then testing this in codepen (the top triangles) and it worked, even with compound shapes ( i just typed in the numbers) but the Illustrator export (the bottom leaves) are getting mirrored. It doesnt seem to me as the order of the paths are scrambled. (also because I just duplicated the shapes and shifted some vertices)
  3. mechaniac

    SVG perspective

    I would like to rotate an SVG element (imageContainer in my example) so it has a faked perspective. is this possible with GSAP? I tried rotate and setting perspective. Does this only work for html elements but not inside an SVG? (I am fairly new to this, so any help, pointing me in the right direction or to the right documentation would be very much appreciated)