Jump to content

Page Tailoring

  • Posts

  • Joined

  • Last visited

Everything posted by Page Tailoring

  1. @PointC yes, adobe XD giving a crazy number, that are coordinates for the whole document, not for the exported group of paths. I have a new file with smaller coordinates. But still, I don't know how to move a path. Now I have translate(81.157 34.104) and I want to add 50 to x. (thx @OSUblake) <path id="Path_23" data-name="Path 23" class="cls-3" x="0" y="0" d="M585.648,443.9q-4.442,0-5.492-3.826l-17.472-59.584q-1.667-5.921-7.836-5.923h-1.975a1.759,1.759,0,0,0-1.727,2.222l18.768,64.329q3.083,10.986,15.734,10.986c.11,0,.205-.014.313-.017v-8.227c-.113,0-.2.038-.313.038" transform="translate(81.157 34.104)"/> Best I have come up with, is: logoAnimation.from('#Path_23', 4, {attr:{transform: "121.157 33.538" }, ease: Expo.easeInOut}); And in chrome dev tools it look ok, transform="translate(81.157 34.104)" is changing ok. But consol giving me 233 errors like: TweenMax.min.js:17 Error: <path> attribute transform: Expected transform function, "81.178 34.103". And path is disapering during animation. Do you have idea how I should that write? it is still here: http://links.stawiarski.eu/AttrPluginProblem/ I have put it codepen: https://codepen.io/bartek-stawiarski/pen/bPPrwa?editors=1010
  2. Hi, I'm trying animate SVG path with attrPlugin. I can't find any docs about it. Can I use Attr Plugin to move path exatly x:30? Path is from Adobe XD export. Path like this for exemple: <path id="Path_23" data-name="Path 23" class="myGreen" d="M601.019,474.723q-6.417,0-7.933-5.526l-25.239-86.07q-2.408-8.553-11.319-8.555h-2.854a2.541,2.541,0,0,0-2.494,3.21l27.111,92.925q4.454,15.87,22.728,15.87c.158,0,.3-.02.452-.025V474.667c-.163,0-.287.055-.452.055" transform="translate(-3723.339 3675.66)"/> this dosen't work: var logoAnimation = new TimelineMax(); logoAnimation .from('#Path_23', 4, {attr:{x:30}, ease:Linear.easeNone}); http://links.stawiarski.eu/AttrPluginProblem/ After finding a solution, the real question should be: How to animate transform (x,y) of elements SVG Adobe exported file? Answer: The easiest way is to use CSSPlugin and use relative values, like x: "-=180".