Search the Community

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

Hey all, Got a bit of a quandary going here. So what I'd like to be able to do is to move the points of a polygon contained within a mask a variable amount (in this demo, 400 pts). A pen can be found here: (FF only) codepen.io/johnblazek/pen/CqEpd I'm using the attrPlugin, and adjusting the x/y coordinates within the point, but I'm getting no luck. Could the fact I'm using this as a mask be messin me up?

Hi gsap people, So I'm a bit at a loss. I did a ton of research to find the best "cross compatible" way to reveal a background image on scroll. Basically it works as intended on chrome in the codepen, a more clear example is above the fold to scroll on https://bell.works/work but you can for sure see it in the codepen. Just some notes - TLDR maybe using svg injector to load the svg circles except for the clippath SVG mask which is inline i'm using objectBoundingBox for the clipPathUnits, otherwise the size of the circle on load less easily controlled, and then I had to tween the attributes of the SVG mask ellipse to get it sized right so it wouldn't be an oval based on browser width, e.g. var relWidth = $("#site-header-area").width(); var relHeight = $("#site-header-area").height(); var $rX = relHeight / relWidth * 0.5; TweenMax.set("#circle-mask", { attr: {cx:0.5, cy:0.6, ry: 0.5 * 0.75 , rx: $rX * 0.75 }, transformOrigin:"center center"}); for the live url https://bell.works/work the mask works like the codepen and intended, but doesn't tween on scroll, BUT if you go to the bottom of the page and back up, it tweens it all open, and then doesn't close it back up like on chrome - does that make sense? it's like there's a big delay in any calculations but it is working, just not bound to scroll I've read a series of posts about similar issues with solutions that don't really work or help: https://stackoverflow.com/questions/44722751/svg-clip-path-not-working-on-safari this bug https://bugs.webkit.org/show_bug.cgi?id=126207 removing -webkit-clip-path property, which worked for some people on safari 11 for some reason I feel like I went down the rabbit hole on this one. Is there something obvious I'm missing? Is there a better way to do this purely with gsap? Should I just quit altogether and make an SVG that looks like a mask with a hole in the middle and then tween the attributes or scale the whole thing on scroll? Any help would be greatly appreciated!

Hi, If the attribute is multi parted like a 3d coordinate, how can the attribute plugin animate between the multiple numbers (x y z) -> (x y z) ? My object has the following markup: <object id="object_A" rotation="0 0 0"></object> How can i use the attribute plugin or another method to tween the coordinates? {attr:{rotation: "0" }}, { attr:{rotation: " 80" } works but only effects the Z coordinate. I was hoping that it was possible without access to the individual coordinates such as 'rotationX' or 'rotation-x' My try fails silently: var objectA = $( '#object_A' ); tlAnimationTimeline .fromTo( objectA, 10, {attr:{rotation: "0 0 0" }}, { attr:{rotation: " 0 360 180" }, ease: Strong.easeOut, repeat: -1, yoyo: true} )

Hi All! Having a helluva time trying to animate some paths in a defs tag to reveal other svg paths. Basic setup is, have a svg path, and then have some strokes that will reveal it when animated. It essentially looks like this ( abstracted ): <!-- In HTML --> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 516.8245 197.65855"> <defs> <clipPath id="mask1"> <path d="....." fill="none" stroke="#000000" stroke-linejoin="round" stroke-width="13"/> </clipPath> <clipPath id="mask2"> <path d="....." fill="none" stroke="#000000" stroke-linejoin="round" stroke-width="12"/> </clipPath> </defs> <path clip-path="url(#mask1)" d="....."/> <path clip-path="url(#mask2)" d="....."/> </svg> <!-- This is in my JS but basically... --> <script> // DOM references const $mask1 = $('#mask1'), $mask2 = $('#mask2'); // Animation const tl = new TimelineMax( { paused:true, smoothChildTiming:true } ); tl.fromTo( $mask1, 1, { drawSVG:'0%' }, { drawSVG:'100%' }); tl.fromTo( $mask2, 1, { drawSVG:'0%' }, { drawSVG:'100%' }, '-=0.5'); // Execute tl.play(); </script> When I remove the clipPath and defs, my mask paths do animate properly using drawSVG, ( doesnt mask anything of course, but animation works well ). As soon my 'masks' are wrapped in def / clipPath, there is no animation. The mask works, however, it is just blank. I read the pinned SVG Gotchas post like 10 times but couldn't find the answer. I found answers that work with images like this post here, but not for svg's revealing paths within the same svg. I found an example attempting to do exactly what i want here, but it did not work... Played with this one especially at length to no avail. I also read that article referenced from the previous article on css-tricks to no avail to my problem. Even when using the AttrPlugin. During my frustrations, I've been able to log out that lengths are being calculated, the libs / plugins are loaded properly and exist, but just can't for the life of me get it to work. Any help here would be greatly appreciated. Thank you in advance! Always get the best advice here!

hey i have noticed that some svg specific attributes will be tweened without using the AttrPlugin and {attr: {}} syntax, and some will. is this a feature that is currently in works or is there a reason that only some but not all of those attributes work that way? thank you.

I'm trying to animate the x and y of a nested SVG and am getting the error: Failed to execute 'setAttribute' on 'Element': 2 arguments required, but only 1 present. The codepen uses the min version so can't debug this. What am I missing? http://codepen.io/swampthang/pen/oLZEOK/ Related post: http://greensock.com/forums/topic/14620-tweenmaxset-drawsvg0-in-nodejs-not-working/ regarding the above related post - I'm not going to have a lot of control over the SVGs that will be dropped in to the editor except that I should be able to strip some attributes out.

You can see at line 26 in my JS that I am animating the svg text for whichever circle is hovered over. My only problem is this. Each circle is at different positions, so I need the text to animate by adding a certain number of px to it's current position. Something similar to a varible addition (x += 10;). Is this possible to do?

Hi, I wanted to start a discussion for feedback and thoughts on the best ways to do some masking animation. I've seen the really good one with the green grass and the star shape, but it doesn't work in Firefox. I did find a stackoverflow topic where the author found the Attr Plugin worked with changing <rect> properties! I've got a couple examples up on Codepen and wondered if anyone else has thoughts, examples or work arounds for something we do in Flash so easlily. I'm looking to try and mask an image and reveal it from the center out. clipPath, clip-path and svg are new subjects for me and I found that this works great in Doesn't work in FF http://codepen.io/kaplan/pen/waxrKe Attr Plug makes it work! http://codepen.io/kaplan/pen/bdjoRa I have a local version that does some offsetting and has overflow hidden that I'm going to put on Codepen, but it looks jumpy. This is the other forum post: http://greensock.com/forums/topic/11215-svg-masking-with-gsap-animation/ This is the SO post: http://stackoverflow.com/questions/29413359/animated-svg-clipping-path-not-working-in-firefox