Search the Community
Showing results for tags 'svg'.
-
Good morning people, Could somebody explain why the 'strokeDashoffset' in the following pen will not animate? http://codepen.io/Joostan-33/pen/kkYEpk Inspecting the element in the DOM and manually manipulating the 'stroke-dashoffet' i can easily animate property. images attached. Thanks
-
How to ensure that the snake-like animation in https://codepen.io/TobiReif/pen/b7809c58663ddac3572f5594ffc4f5fe/ is even? Each column of dots should move up with ease-in-and-ease-out (eg sine) and should move back in the same way: slow upwards, fast upwards, slow upwards, then slow downwards, fast downwards, slow downwards; loop. The current animation is roughly what I want, but it seems to be faster at the top and slower at the bottom. Each column of dots seems to jump up and down, resting at the bottom only. I had no luck using repeatDelay, and I think a clean solution would not involve repeatDelay. Instead I need something like "sineAnimationUp;reverse;loop" or simply "sineWaveAnimation" == forth and back exactly like a sine wave.
-
Hello, I am working with SVG object (Map), I have divided it by regions and now trying to append on-click zoom-in and zoom-out function. I have decided to make zooming function via changing Transform's "scale" and "translate" properties. Example is here: https://codepen.io/Creedplay/pen/oLRPjY Just check JS lines, and for test click on red object. I have used TweenMax library for transition change of up mentioned properties. My problem is a visual of transition, the "zoom effect" does not go straight to object, it starts from left and then goes to object. I think reason for it is asynchronous change of "scale" and "translate" properties. but I am not sure how to fix it. Can anyone explain why it does this? and help me to fix? I would like to make "zoom effect" to look like this: https://bl.ocks.org/mbostock/9656675 Thanks in advance.
-
Hey Guys, I've created a bunch of ads which have SVG tags with DisplacementMap to give the illusion of moving 'northern lights' This has been fine for most adservers but apparently DFP don't support SVG tags. The other workaround is to create background image steps, but i fear this will create quite a large ad. I could create a video but im pretty much sure that won't be accepted. GIF will also be to large. Any ideas? Thanks!
-
Hi, I'm having trouble figuring out how to properly resize and rotate and svg element. Any suggestions to make this work? Rotating works well, but the scaling resets the rotation and the math is way off. A bonus would be if the handles could move with the resized element but not rotate or resize themselves. Just the red B should be transformed. Thanks!
-
Chrome is not animating SVG > clipPath > text The code is working perfectly in Firefox but not in chrome(and IE but I don't care about IE). I've only been playing with SVG and GSAP for a few days now. Am I doing something wrong? http://codepen.io/anon/pen/VjgvXQ chrome: Version 52.0.2743.116 m thanks.
-
I'm currently using GSAP to create a few banners with SVG shapes (text from Illustrator outline since I can't get Webfonts for these). They work and look fine on my machine, but when tested on a PC in Chrome, there is a small issue where the moving SVG element leaves a sort of "trail" graphically, but only when viewed at 100%. I've attached a mocked up version of the issue (I tried getting the user to provide a zoomed in screenshot but she says the issue vanished when zoomed in). Has anyone encountered this when animating SVG elements? I am imagining it is probably a hardware issue.
-
First off, I love this library and have been using it forever! Just took the plunge on a membership to support your efforts. Now on to the problem. I'm trying to animate the offset values of a gradient but I'm not able to for some reason? I successfully used the same method to animate stopColor, but no dice on offset. I've tried using a few methods but the example is using cycle. What am I doing wrong here? Please see the codepen below: http://codepen.io/Jerbach/pen/PzBXxa
-
Hello, This is my first post, and I'm hoping to continue learning more and more about GSAP and all its features. I'm correctly working on recreating a dribbble shot I saw (https://dribbble.com/shots/2766513-Ep-07-The-Hound). They created a gif and I'm trying to recreate the movement using SVG and GSAP. I have a couple of questions... 1. I attempted to do 2 different things, and I was curious how you guys would approach this animation. When I altered the opacity It kept "blinking", I solved this with altering the CSS to display none/block. Would this be the best approach or is there a different way to solve the "blinking" with altering the opacity? 2. The transition or timing is not fluid at all, would you be able to help me understand how to adjust the timing to make it look more fluid. I've had this same issue with other animations where it just looks choppy. What's the best approach so that transitions look more fluid and seamless? code: http://codepen.io/vaarellano/pen/bZjqmO Thanks, Victor
-
Hello everyone, I would like to start by apologising for the oh so abstract title, my questions vary quite a bit. I recently began working with SVG animations, started with SMIL, continued to Velocity.js, and then found out about GSAP and its great browser support - so here I am. Bearing this in mind, while looking at my Codepen if you guys find anything I did wrong or simply something you would have done differently be it in the SVG, or the GSAP implementation please do not hesitate to mention it. So in the following Codepen that I am currently working on I ran into a few issues: http://codepen.io/anon/pen/WxJQQr?editors=1010 1. On Firefox the cup sections fill up and then return to their original state, for those familiar with SMIL it had the option of fill="freeze" in its animate which would stop the animation at its end state. I am looking for something similar in GSAP - or perhaps something else. 2. On Firefox one of the gear does a proper rotation around the center transform-origin while two of the gears decided to do their own thing. 3. In Internet Explorer, the cup does not even fill up. It doesn't seem to be anything wrong with my linear gradient as the inside of the gears does fill up but has a lower opacity than it should. 4. I ended up solving this with adding a negative delay, but what would be the proper way of starting an animation while another one is still in progress in GSAP? Would it be making a new timeline? (I also solved the issue of infinite repeat by creating a new timeline - is this the right approach?) 5. And a quickie - which combination of TweenLite + extras would I need to maintain this at minimal file size? Any help would be greatly appreciated. Thanks in advance!
-
Hello! I'm trying to create a particle animation, something like this: http://i.imgur.com/OGpHy9m.gif The only thing difference is that i want each bubble to move a bit sideways as well. I found most of what i needed on the forum but now I'm stuck. As you can see in the codepen the bubbles move a bit but when the animation restarts it looks like a glitch, as i understand it, the bubbles start at their original x and y positions which is why that happen. I tried with yoyo set to true but that did nothing. I'm fairly new to Javascript so the code might not be best practice, feel free to correct me on this , always good to learn. Any help is much appreciated! Thank you
-
Hello all - I would love some help figuring out the z-index. I have everything like I want, however; the black Nike check is not moving to the front (over top of the yellow check on hover). Take a peek at my codepen, any help is much appreciated! Thank you! nick
-
Hi I have simple text logo from Adobe illustrator with two strokes (done via the appearance panel in Ai). http://codepen.io/pauljohnknight/pen/xOPvAQ I want to play around with animating the outer stroke and inner letter – what is the best way to do this with Greensock? I’ve hit a bit of a wall (I am comfortable using tweens and timelines using GSAP, but up until now I have done so on divs / text / DOM elements etc). In the CodePen example above I’ve put a simple tween on the letter m, but can’t seem to work out from googling how to target the stroke on a multi-stroke svg (say, for a color or opacity animation). Any help would be awesome. Paul. P.S When I tweak the inline SVG code it lets me manually change the outer-stroke for the letter a, but not for other letters which is also confusing me? When I check the Ai file every letter is stacked correctly on individual layers etc and without any excess sub-layers.
-
I'm wondering if anyone has managed to animate multiple SVG stroke colors - on the same stroke, at the same time. What I'm supposed to try and emulate is something like this After Effects plugin... https://videohive.net/item/animated-stroke-font/11905683?s_rank=3 After reading this: https://jakearchibald.com/2013/animated-line-drawing-svg/ And looking at the first example here http://greensock.com/docs/#/HTML5/GSAP/Plugins/DrawSVGPlugin/ It seems like there should be a way of applying an array of colors to a stroke in opposite stroke-dasharray/stroke-dashoffset settings - like "80% 20%" in one and "20% 80%" in another. If it's not possible to apply more than 1 color to different offsets of a single stroke, I guess it would require making as many duplicates of the strokes as there are colors in the array and then applying those opposing stroke color draws. Anyone ever manage to do this kind of thing?
-
Hi GSAP Friends, Question/Observation/Bug: Working on a DrawSVG animation and was having some huge performance issues on iOS mobile. It turns out that adding a size directly to the SVG element was causing the issue (adding a size to a div wrapper helped eliminate the issue). Size on SVG pen (awful on iOS): http://codepen.io/ryan_labar/pen/wWqGZk Size on div wrapper pen (much better on iOS): http://codepen.io/ryan_labar/pen/mErPEK Any reason for this issue (am I doing something wrong)? Not needing to wrap an SVG in a div would really be idea. Is it a GSAP bug, or the fault of the browser (or both)? Thanks! **UPDATE** even with the div wrapper, performance isn't great on mobile, what should I do? From my understanding, resizing my SVG's viewbox/internals may help, but IDK if that will eliminate the problem, it's not exactly a huge svg file--size or otherwise
-
Showcase - GSAP Web Animation using Emjoi SVG Icons - FoxLife SoundTrek TVC
Guest posted a topic in GSAP
First of all, Sorry if I'm spamming this forum by showcasing my side project. Admins, please delete my post if it's not the right place. I'm not a pro in making tween and after completing this side project, I have seen huge scope of improvements. I'm still learning and GS forum has helped me a lot during the making of this tween. This short animation is dedicated to my daughter because she just love this FoxLife SoundTrek TVC I'm open to any suggestion and improvements. Thanks to all in this forum who helped me in making this. Please enjoy this or kindly ignore. -
Hello, I have a task to animate an SVG (simplified map of a city), where road signs are part of the presentation. Everything goes quite smoothly with GreenSock (drawing SVG lines, rotating the whole image, etc.), but I cannot get the last part to work as intended: the small signs should always face the screen (the camera), while the whole SVG rotates in 3D, and the signs follow the path set by the parent rotation (and other tweens). Something like this image: My idea was to rotate them in the exact opposite direction as their parent goes (and the animation should last the same amount of time), but this does not work (except for the Z axis, where it does what is planned). The codepen has the full SVG (it's quite large), the JS code that I tried to use (and some CSS only so the image can be seen). Has anybody any idea how to achieve this effect? (Or is it possible at all with CSS / GreenSock animation? Thank you in advance, Gergő
-
I'm new to SVG's and trying to get this to animate. I thought something like this would work TweenLite.fromTo('.path', 1, {drawSVG: "0%"}, {drawSVG: "100%"}); but unfortunately no. http://codepen.io/Meds/pen/grWOXW I would like to line animate this logo, any troubleshooting guidance would be appreciated.
-
Hi - pleasure to meet you all. My first post but have been getting to know GS over the past few weeks and love it. However now I'm getting stuck. I've been trying to figure out how to make responsive SVG timelines - i.e. set SVG timeline "keyframes" in % such that (e.g.) left:100% will always be at screen right, regardless of screen size. Worked my way through your trail here (http://greensock.com/forums/tags/forums/responsive/) but I'm missing something. As a newbie I'm finding some of the examples a little too confusing to work out so I've created an example of what i'm trying to understand .... I'd like to substitute the X & Y values in the codepen for % along the lines of tl.to(cssCircle, 1, {left:100%}) .to(cssCircle, 1, {top:100%}) .to(cssCircle, 1, {left:0}) .to(cssCircle, 1, {top:0}); Many thanks
-
Thought I'd share a couple of CodePen's that might help someone. I was charged with coming up with something that would allow a user to dynamically load an SVG into a container and then draw it using drawSVG. (Our organization got the Business Green membership so we wanted to get all the goodie we could get out of it!) As you know, not all SVGs are alike and we didn't have the convenience of being able to go into every SVG and add class names. So, first I needed something that would snag an svg file in an img tag and replace it with the inline version. I decided to use this (won't go into the process of doing that but it works): https://www.npmjs.com/package/inline-svg Then I needed a script that would parse through the lines, paths, etc to see what was there and draw the SVG. I wrote a really quick function that will do that and added a couple of bonus functions (center on the screen and shake) for good measure. Hope that helps someone who might have the same issues at least get started.
-
Hi all, I have svg with couple of rectangles and I would like to scale them randomly while hovering with respect to the svg origin. At the same time I would them to rotate individually around their axis. The problem is that either transform origin gets overwritten by svg origin or vice versa. See the pen http://codepen.io/anon/pen/RRowRx. The rotation is commented out. Thanks a lot for any suggestions!
-
Hello everyone, I've created a tweenmax that alters a clip-path from an external svg file. While it does seem to work, there is a problem with the rendering as you'll see in the attached pic. Once I hover over the div with the cursor then it changes immediately to the correct clip-path. What could be the issue here? EDIT I attached the screenshot
-
Hi GSAP brothers, Thanks to Draggable, I can make a svg draggable within the bounderies of its frame. That is to say, if I use : img id="SVGmap" src="map.svg”. But when I use javascript to get inside the svg to control some elements, I get an error. If I use: object id="SVGmap" data="map.svg" type="image/svg+xml”, the javascript to control from outside works, but I cannot drag the svg anymore. I made a codepen: http://codepen.io/jaswa/pen/NrNorL Unfortunately the javascript does not work with an absolute link as I have to use here( why not?), but when the svg is on the same server, it works… Does anybody know how to drag AND control the svg from the outside? Thanks in advance for your answer! jaswa
-
Trying to learn animating along a path with Greensock. I got the animation working, but I can't seem to get rid of the white background. In the codepen, you can see there is supposed to be a green background (bg) in the html file. But a white background, that seems to be within the <SVG> tag is blocking it. Does anyone know why this is happening? Is MorphSVGPlugIn causing this? Thanks.
-
I have a path for my animation. This path is Bezier curve which can be plotted by arbitrary number of points: bezier:{ curviness:1.25, values:[ {x:100, y:250}, {x:300, y:0}, /* ... N more points ... */ {x:500, y:400}, {x:200, y:100} ] } I want depict this path with SVG <path/> element. Path element uses M, C, Q, T and other parameters for plotting curve, for example: <path d="M100,200 C100,100 250,100 250,200 S400,300 400,200" /> How can I convert my points to the terms of parameters used in SVG path?
