Search the Community
Showing results for tags 'svg'.
-
Hi, After reading the documentation on how to morph more than two objects, it seemed like the code wasn't any much longer. However I'm wondering if I'm missing anything within my code that is preventing that, as the shapes only morph from the first to the second and gets stuck there. It doesn't move on to the third shape. http://codepen.io/anon/pen/pgKEQP Thank you - I really appreciate it! TweenMax.to(pink, 2, {morphSVG:"#red", fill:"#ED1C24"}, "+=1") .to(pink, 2, {morphSVG:"#black", fill:"#000000"}, "+=1");
-
Hello, I was following along with the MorphSVG demo, and was wondering how you would change the color of the second shape? Both shapes have their own color, but the morphing keeps it at the #start fill color. http://codepen.io/anon/pen/jWxeVY Thank you!
-
Hi, GSAP is really impressive, but I'm searching for a tip to playing with visibility or display in svg. I make a 0s transition but it's look stupid tl.to('#el',0,{autoAlpha:0}); In my codepen I try to wink
-
Hello, Im trying to use MorphSVG but it isnt working. I made a realy simple example but even this doesnt work. So basically I want to first use DrawSVG to draw a stroke and then morph it into a filled shape (not in codepen). But the morphSVG isnt working. I created a very basic codepen and even this is not working. Could it be because of my SVG?
-
Hello, I'm mystified as to why the stroke on the red bar in my pen doesn't animate like the stroke on the white bar. The only difference I can see are the coordinates of the lines. Thanks
-
Hi, I'm using an svg as a background image, but it pixelates when scaling It resets itself to a sharp vector once it's finished scaling Any ideas how to fix this? Thanks
-
A few days earlier I know, but I am off to the beach tomorrow. I wanted to say a big THANK YOU to the awesome GreenSock team. Thank you for all the new features, plugins and the incredible amount of work put into the GSAP tools that make our lives so much easier. Also a big thanks to everyone contributing to this forum for helping newbies and pros getting to know GSAP, brainstorming ideas and for simply being so helpful every time. https://ihatetomatoes.net/happy-new-year/ Happy new year. Petr
-
Hi folks, I am creating my prototype in Framer.js and using GSAP to animate the SVG in it. However the SVG inserted aren't detectable. Hence GSAP can't animate it? But I check the DOM, they are there. Weird? Framer.js spinner = new Layer({ width: 207, height: 207, backgroundColor: 'transparent' }); spinner.html = '<svg id="dots" xmlns="http://www.w3.org/2000/svg" width="207" height="207" viewBox="0 0 207 207">' + '<path id="top" d="M103,1A12,12,0,1,1,91,13,12,12,0,0,1,103,1Z" fill="none" stroke="#fff" stroke-miterlimit="10" stroke-width="3" fill-rule="evenodd"/>' + '<path id="right" d="M193,91a12,12,0,1,1-12,12A12,12,0,0,1,193,91Z" fill="none" stroke="#fff" stroke-miterlimit="10" stroke-width="3" fill-rule="evenodd"/>' + '<path id="bottom" d="M103,181a12,12,0,1,1-12,12A12,12,0,0,1,103,181Z" fill="none" stroke="#fff" stroke-miterlimit="10" stroke-width="3" fill-rule="evenodd"/>' + '<path id="left" d="M13,91A12,12,0,1,1,1,103,12,12,0,0,1,13,91Z" fill="none" stroke="#fff" stroke-miterlimit="10" stroke-width="3" fill-rule="evenodd"/>' + '</svg>'; GSAP function getSpinnerTimeline(){ var tl = new TimelineMax(); tl.to('#dots', 1, {rotation: 90}) .to('#top', 1, {y: 10, repeat: 1, yoyo: true}, 0) .to('#bottom', 1, {y: -10, repeat: 1, yoyo: true}, 0) .to('#left', 1, {x: 10, repeat: 1, yoyo: true}, 0) .to('#right', 1, {x: -10, repeat: 1, yoyo: true}, 0); return tl; } var mtl = new TimelineMax(); mtl.add(getSpinnerTimeline()); mtl.timeScale(2.5); mtl.play(); If I insert my SVG into HTML directly, it works like a charm. If I insert my SVG using jQuery, it works like a charm. But when I combine Framer.js + GSAP it doesn't work. Here I attach a screenshot of the generated DOM. The SVG with the id(s) are there.
-
Does anyone know why when animating the scale of an svg, it gets blurry in IE, and only looks clear in Chrome and Safari once the animation has finished? In this quick test (http://www.brendyn.com/test/) the top image is SVG and the bottom is a PNG. If looked at in IE, once it gets big, you can see it's very blurry, which an SVG shouldnt be. The PNG is only slightly blurry (which is expected). I assume it's a core browser difference, but I would have assumed TweenLite would have taken care of that. Can anyone offer any insight? Thanks very much in advance.
-
Hello, I'm a bit lost in Morph magic. Please take a look on my noob approach http://codepen.io/Dikus/pen/pgbQEe to morph one logo into another - It's messy and it fails on start. I would love to know how to prepare SVG from Illustrator so that MorphSVG can handle the rest. I've watched a lot of tutorials about morph, and I experimented with few demos on codepen but all SVG's there are nice and clean - I wonder, how to simplify them to paths? I'm tired of hitting walls with my head - paint is already falling of - so please aid me a bit, give me some clues, anything ! Probably I'm doing something very stupid so be gentle ^_^''
-
Hello, I'm having an issue with transformOrigin and svg groups. It's not really a GSAP issue, everything is working as it should be. It's more that I cant work out how to get the correct transform origin psoition. Essentially i have a bunch of concentric circles, with little dots on them. Each set is in it's own group. I'd like to rotate it so TransformOrigin: '50% 50%' might seem the logical choice. However the issue is that since I'm rotating the group and the group isn't the same size as the 'main circle' (which is also the 'rotate path') the transform is off (great if you liked spirograph as a kid, not so great for me). The problem is occurring because some of the edges of the little dots that sit on the larger stroked circles are not flush with the main circle, so the group tag naturally wraps around the outtermost elements. In the one circle group I've animated successfully, I've simply been able to set the radius of the inner circle as the Transform Origin but this only works because the top and left bounding of the group matches that of the main circle, where a dot pushes the group out at the top and left, this doesn't work. The pen will help you to understand this a little better, especially if you inspect the svg and see how the group box is larger (often on all sides) than the circle that makes up the animation path. What I was wondering is if anyone knows of a way to calculate the correct transform origin position, or if there is a simpler solution/ best practice I should be following. In the pen, the first circle in each SVG group is the 'main circle' (the stroked circle that makes up the animation path), the other circles are the little dots. Yes, I know that is a massive svg with billions of elements, and I apologise for that. http://codepen.io/peterallenio/pen/LGZYxa Thanks in advance
-
Just curious- But in Chrome/Safrai - the svg animation flickers (at the end of the animation) and the mask is almost reset. I would like the animation to end on the solid white color. (this works in Firefox). I must be over looking something. Any help would be helpful. thanks
-
In my last post I was struggeling with getting an on click event work within an svg image. This problem is solved, but now I'm struggeling with getting a hover to work. Here is what I my code to do: When you press one of the buttons, for example $yellowbutton, all the colored blocks except for the $yellowblock will get opacity 0. $yellowblock will get opacity 1. This is the part that is allready working. Now what I want it to do is when a button is pressed and thus a certain colored block is shown, when hovered over this block it enlarges. The code I've used to get this to work is based on this codepen demo. For now, only the orange block is working, but this might be because the orange block is the first visible block in the svg image.
-
Hi everyone, I'm trying to animate two paths at the same time using svg paths and javascript, but seems something is not right with my codes where I can't find out what is missing. I want each box to run on the different paths. Any idea/s what is wrong with this code? See on codepen: http://codepen.io/anon/pen/WrQeOp Thank you very much in advance. Kind regards, Fernando Fas
-
I need some help with animating certain parts of my svg image when clicked on another part of the svg image. This is what I'm trying to do: When you click on one of the smaller buttons, for example the yellowbutton, the yellowblock will appear (with opacity: 1) and the other coloured blocks will dissapear (with opacity: 0). When you click on the orangebutton, the orangebutton will appear and the other coloured blocks will dissapear etc. etc. I think I'm on the right track but something isn't working. -
Hi, greetings! I am a complete newbie and am very excited to get started learning GSAP for SVG animation. Right now I have one of the most basic questions: can I get a current step of a transform attribute component from an affected SVG shape using GSAP? I noticed that the amazing and intuitive capability of GSAP turns transform attribute parts into a matrix and I've come across https://css-tricks.com/get-value-of-css-rotation-through-javascript/ which is what I'll resort to outside of this forum. However, I have to ask if there's already a native GSAP method of doing this. My goal is to simply keep track of transform values in units, such as rotation of a clock-arrow, using an onUpdate function. tl.fromTo( elem, duration, { rotation : oldAngle, transformOrigin : "50% 50%" }, { rotation : newAngle, transformOrigin : "50% 50%", ease: myEase, onUpdate : function(){ // elem.currentRotationAngle = ? } }, myLabel ); Thanks, and thanks to all who made this code available for the people of Earth.
-
Hi all, I'm having an issue with transformOrigin combined with scale in Chrome (for OSX) (not the case in FF or Opera). Check a box, and click the CORRECT button. The 'check' jumps up the the viewBox in Chrome, but stays nicely centered in FF and Opera. This Pen has been fixed to show solution. http://codepen.io/ryan_labar/pen/vNozXO
-
Hey - I was reading an article by Sara Soueidan about grouping and reusing SVGs, so I thought I'd try implementing that on an animation I had already completed. Here's the original, using individual <line> elements: http://codepen.io/flysi3000/pen/XmaqBQ The new version with a reused <symbol> is here: http://codepen.io/flysi3000/pen/YwKedE. As you can see, the svg lines aren't rendering as expected at all. Wondering what I'm doing wrong? SVGs are still kind of mysterious to me, so any help would be greatly appreciated!
-
I am trying to make an arrow flip horizontally using SVGMorph... however, it doesn't look like it's flipping. I tried changing the ShapeIndex but there's none that will make the flip look natural. Codepen: http://codepen.io/anon/pen/dGbOLZ Is there a better technique to do an SVG flip that will work on all browsers?
-
Hi, I bought the GSAP update to obtain the powerfull SVG plugins. But I've readen topics about edge and svg and I cannot make it work. I don't speak english very weel, so explanations seem quite confuse for me across the many pages of the forum. Can someone explain it in a synthetic page : how to use an Illustrator SVG file inside Edge Animate with GSAP and SVG draw and transform plugins ? Thanks a lot for your precious help. If you can produce a zip sample file too, that would be wonderfull. Thanks. Zhur
-
I did a quick hourglass spinner using an SVG graphic. It looks great in OSX Chrome and animates just fine. But the positioning seems to be off in Firefox & Safari. Is there a known issue with SVG positioning cross browser? Or possibly with transform-origin? Codepen is here: http://codepen.io/Bangkokian/pen/ZbZmmw (View in Chrome first to see the working version).
-
Hi, I have animated SVGs with success using the morphSVG plugin within Edge Animate via the EdgeCommons library. For banner development Sizmek and DoubleClick don't host the edgeCommons library and to include it in production is almost prohibitive (69k). A solution is including only the EdgeCommons.Core.js and EdgeCommons.SVG.js. Unfortunately in doing this the latest version of jquery has to be downgraded (hosted by SIzmek and DoubleClick) and banners are limited to the number of assets. Is there an alternative to EdgeCommons? to access the SVG ID's. The solution is based on this question. http://greensock.com/forums/topic/11131-svg-plugin-with-edge-animate/ The code below works - (it's not pretty) and it relies on the libraries: https://secure-ds.serving-sys.com/BurstingcachedScripts/libraries/jquery/1_11_3/jquery.min.js https://secure-ds.serving-sys.com/BurstingcachedScripts/libraries/greensock/1_18_0/TweenMax.min.js EdgeCommons.Core.js EdgeCommons.SVG.js MorphSVGPlugin.min.js EC.SVG.accessSVG(sym.$("png_upper")).done( function(svgDocument){ // var svg01_a = $("#upper_baseShadow",svgDocument)[0]; var svg01_b = $("#bulge_baseShadow",svgDocument)[0]; // var svg02_a = $("#upper_base",svgDocument)[0]; var svg02_b = $("#bulge_base",svgDocument)[0]; // var svg03_a = $("#upper_keyline",svgDocument)[0]; var svg03_b = $("#bulge_keyline",svgDocument)[0]; // var svg04_a = $("#upper_txt",svgDocument)[0]; var svg04_b = $("#bulge_txt",svgDocument)[0]; // //Animate Tablet var a = .3; var d = .1; var r = 1; var tablet = sym.$("png_upper"); var pbg = sym.$("PBG_lower"); TweenMax.fromTo(tablet, 2, {scaleY:1, scaleX:1}, {scaleY:2, scaleX:2, onComplete:svgEffect, ease:Elastic.easeOut}); TweenMax.fromTo(pbg, 3, {x:0, scaleX:1, scaleY:1}, {scaleX:1.2, scaleY:1.2, x:100, ease:Elastic.easeInOut, delay:.7}); function svgEffect(){ TweenMax.to(svg01_a, a, {morphSVG:svg01_b, repeat:r, yoyo:true, transformOrigin:"50% 50%", ease:Sine.easeOut}); TweenMax.to(svg02_a, a, {morphSVG:svg02_b, repeat:r, yoyo:true, transformOrigin:"50% 50%", ease:Sine.easeOut}); TweenMax.to(svg03_a, a, {morphSVG:svg03_b, repeat:r, yoyo:true, transformOrigin:"50% 50%", ease:Sine.easeOut}); TweenMax.to(svg04_a, a, {morphSVG:svg04_b, repeat:r, yoyo:true, transformOrigin:"50% 50%", ease:Sine.easeOut}); // } } ); -
Hi, GreenSock developers! I'm amazed when see the latest Morph SVG Plug-in! I comparing two SVG Morph tool, but i seen you're using another way to morph, you're can share how you're doing? http://codepen.io/dalisoft/pen/qOQrwz - my pen, only for test http://codepen.io/chrisgannon/pen/QjKNeZ
-
I'm using morphSVG to change the shape of an SVG that is already using the morph function. It works as expected if you click the trigger "Grow" button with in the first second or so of the animation, but breaks (won't morph) after that that. I'm relatively new to GSAP, so I'm hoping I'm not missing anything too obvious. I'm not sure what's causing this. Any thoughts? http://codepen.io/ryan_labar/pen/gaEEGR Thanks!
-
I've created a 3D bar in illustrator (see codepen). Now I want to animate it with TweenMax (or TimelineMax) as if it's building up from the bottom to the top. I tried a couple of things to make this happen, but without any luck. - Created a clipping-path and then try to change the Y coordinate of the 3 polygons (or wrapped them in a <g id="bars"></g>) - Tried to animate the points of the polygon (http://greensock.com/forums/topic/8565-animating-svg-polygon-points-using-attrplugin/) I hope someone can help me with this. This is the end result what I need to create > http://postimg.org/image/pg2drnvch/
