Search the Community
Showing results for tags 'path'.
-
I've seen this amazing website and I noticed a nice effect when mouving the mouse around the right or left sides of the page. They are animating an SVG path as if it was a liquid. In a wavy way. Any tips to achieve this? I'm totally lost. I have the path but I have no idea how to "guess" which values should I apply to it to create the wave effect: https://jsfiddle.net/9o3f8vm4/ Thanks!
-
I'm trying to change the origin point of my staggering elements. Both are a path which visualy start drawing at the top of the line then goes down. Is there any way to tell GSAP to start at the bottom of the path then up. I tried with transform orignins without success. Thanks in advance!
-
Hello everyone, I'm looking for a hint, as you can see in the Codepen attached I managed to drag a masked SVG circle around the container, problem is when I want to use a path as a mask I don't know how to get the coordinates (for path there's no "cx" and "cy"). Any suggestions on how I could accomplish this? This is the function that does the trick with a circle //move the mask with the drag function onThrowUpdate() { var posX = parseInt(rocketHole.getAttribute('cx')) + this.target._gsTransform.x; var posY = parseInt(rocketHole.getAttribute('cy')) + this.target._gsTransform.y; TweenMax.set(rocketMask, { attr: { cx: posX, cy: posY } }) http://codepen.io/Polenji86/pen/KNeZOE
-
I read through as much as I can find here and test with your pens by copying ma path to your example (https://greensock.com/docs/#/HTML5/GSAP/Plugins/DrawSVGPlugin/, and there my path works!), but I cannot find my own problem with this animation. The circle path fades in, but the animation is doing nothing... I am still very new to SVG and also to GSAP, but I did read all the docs already... but I am still in the dark somehow... any hint would be most welcome! Thank you in advance! Best regards, Robert
-
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.
-
I'm having to work with huge collections of simple line-art SVGs and set up an app that will find all the various elements of the SVG (line, path, rect, etc), add drawSVG to them and export out to video. There's an entire folder where the artist decided to use paths with no stroke-width but, instead, used fills between adjacent paths. Forms little 4px channels where there should be 4px stroke-width on a single line. But, in most of the other folders in the same collection, the artist used paths with stroke-widths as you would expect. Referencing the Codepen, the first 2 SVGs that appear have lines/paths with strokes and the next 2 use no-stroke lines/paths with fill in-between as mentioned. You can see that the last 2 are like, "hey, there are no lines to draw here, move along!" The other trick is that I have to be able to do this programmatically - won't know if one of these is being loaded. I could check for paths with no stroke-width, etc., but, man! Welcome to the world of high inconsistency. Does anyone know of a way to detect and hack one of these so that it draws in/out?
-
Hi, Newbie here having trouble with animating on a path. I've managed to create a path using the bezier plugin included in tweenmax, but it is very inconsistent (path seems to be different each time). I'm looking to achieve the appearance of a piece of paper floating from one point to another - so a curved path, skewing, rotating etc. Any help would be greatly appreciated var tl = new TimelineLite({paused:true}) var trueTweenPoints = [ {top:'10%', left:'90%', rotation: 10}, {top:'75%', left:'75%', rotation: 80}, {top:'20%', left:'10%', rotation: 90} ]; tl.to(".trueTween", 0.8, {bezier:trueTweenPoints, type:"soft", curviness:1.25}); .trueTween { position: fixed; background: red; right: 4.5%; top: 30%; width: 160px; height: 300px; transition: All 0.4s ease; -webkit-transition: All 0.4s ease; -moz-transition: All 0.4s ease; -o-transition: All 0.4s ease; }
-
Hi, I was wondering if anyone could help me out with a pretty complex path animation. I have a path looking like a radio wave and I need it to go through four stages where the last one just makes the path into a straight line (see attached image). Is this possible with GSAP ? My SVG looks like this: <svg id="secondwave" xmlns="http://www.w3.org/2000/svg" width="1440" height="165" x="0px" y="0px" viewBox="0 0 1440 168" style="width:100%;height:auto;" xml:space="preserve"> <path class="st0" d="M0,167C11.2,167,5.9,1,15.5,1S23,167,33.2,167S37.5,1,57.8,1s13.4,166,32.1,166S99.6,1,122.1,1 s16.1,166,32.1,166S169.7,1,189,1s15,166,30,166c15,0,17.7-166,33.2-166s18.7,166,33.7,166c15,0,13.9-166,34.3-166 s11.8,166,30.5,166C369.4,167,361.9,1,371,1s7.5,166,16.6,166S394,1,403.1,1s3.7,166,17.1,166S425,1,436.8,1s12.3,166,17.1,166 c4.8,0,4.3-166,16.1-166c11.8,0,4.8,166,17.1,166c12.3,0,5.4-166,15.5-166c10.2,0,1.1,166,17.7,166c16.6,0,12.8-166,28.4-166 c15.5,0,19.8,166,33.7,166S599,1,616.1,1c17.1,0,7.5,166,29.4,166C661.1,167,661.1,0,682,1s18.7,166,34.8,166 c16.1,0,13.9-166,32.7-166s13.4,166,31.6,166S784.8,1,801.9,1c17.1,0,5.9,166,18.2,166c12.3,0,5.9-166,15.5-166s-1.1,166,17.1,166 S854.4,1,868.8,1c14.5,0,5.4,166,19.8,166c14.5,0,5.4-166,14.5-166c9.1,0,5.4,166,16.6,166S925.6,1,935.2,1s7.5,166,17.7,166 c10.2,0,4.3-166,24.6-166c20.3,0,13.4,166,32.1,166s9.6-166,32.1-166c22.5,0,16.1,166,32.1,166s15.5-166,34.8-166s15,166,30,166 c15,0,17.7-166,33.2-166s18.7,166,33.7,166c15,0,13.9-166,34.3-166c20.3,0,11.8,166,30.5,166s11.2-166,20.3-166s7.5,166,16.6,166 c9.1,0,6.4-166,15.5-166c9.1,0,3.7,166,17.1,166c13.4,0,4.8-166,16.6-166s12.3,166,17.1,166s4.3-166,16.1-166s4.8,166,17.1,166 s5.4-166,15.5-166s1.1,166,17.7,166"/> </svg>
-
visitmexico.bvkdev1.com When the cover image (SVG clip path) is tweened to reveal the next cover image, sometimes there will be jank. This is especially true on high-res devices. On normal-res devices the jank is far less noticable, but still poses a problem. What can I do to reduce jank when tweening image over image? My assumption is there is not much more that can be done, as I'm already making the top layer render as its own layer in the GPU via 3D CSS acceleration, and the items that are tweening over one another are made up of complex image data. Most sites I see that make it to awwwards have solid colors tween over their content before tweening in another image or content section. Can what I'm doing be done with consistent 60fps? If so, what am I not doing? Thank you in advance for any insight. visitmexico.bvkdev1.com
-
Hi everyone Just in case it has not been mentioned yet whenever you use svg in your htmls, make sure to explicitly close the all elements: i just had an issue with a set of banners to be uploaded to adwords and would like to share the essence: for AdWords always use <path..></path> instead of <path .../> while all browsers seem fine with the shorthand closing, adwords actually is not. it took the adwords technical support 3 days to realize: Hope it helps to save you time and frustration Cheers Gatekeeper74
-
How can I program an object using ThrowPropsPlugin along a spiral path (roulette wheel ball)?
-
Dear Green Sock pros, We are developing a Formular 1 simulation for which we depend on "cars" (=dots) moving on tracks, that we already built as SVG path. We are delighted by GSAPs animation capabilties so we would very much like to use it. Sadly it seems, it supports animation along a path only based on bezier curves with a value list, but not on SVG path'. Does anyone know a workaround or have information about the implementation of SVG path support. Thanks a heap! Daniel
-
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
-
Hey everyone , This isn't GSAP specific, but it came across my Twitter feed today and I thought it looked like a pretty handy little tool for creating paths without having to jump into other vector software so I thought I'd share it with the forum. http://anthonydugois.com/svg-path-builder/
-
I have an image clipped by a small diamond, On a certain event (click the go button, in the linked pen), I make the image to occupy the whole screen. It works, but I would like the four points of the diamond to be delayed respect one to each other, so the start they way to their corner in sequence, one after one. Is it feasible? I am just starting to play with GSAP. thanks
-
I'm repeatedly animating an SVG path with TweenMax.to: function wink() { TweenMax.to($righthand, 0.4, { x: 60, y: -60, rotation: -120, ease: Power1.easeInOut, transformOrigin: 'left bottom' }); TweenMax.to($righthand, 0.15, { rotation: -90, yoyo: true, ease: Power1.easeInOut, repeat: 5, delay: 0.4, transformOrigin: 'left top' }); TweenMax.to($righthand, 0.4, { x: 0, y: 0, rotation: 0, delay: 1.25, ease: Power1.easeInOut, transformOrigin: 'left bottom', onComplete: function() { $righthand.css('transform', ''); setTimeout(wink, 5000 + Math.random() * 10000); } }); } even resetting the transform property in the onComplete function. As long as the window is open, everything is fine. Now, using the latest Chrome on Mac OS X, if you keep the animation running in a background tab for a few minutes, the path slowly starts creeping away - see the attached screenshot, the hand of the animal has somehow transformed into an obscene dongus. While funny, I'd love to know if there is a fix for this. Thank you!
-
I'm wondering if it should be possible to tween between two sets of path values with the same number of points. For example, suppose I have an SVG with the following path data: <path id="n" d="M1.00000015,71.269657 L1.00000015,75.5026892 L0.999999988,98.6925107 L1.00000015,120.019657 C0.999999984,121.276249 0.999999984,123.013553 0.999999898,124.044071 L0.999999984,148.012996 L150.002473,148.012989 C150.553392,148.012989 151,147.561778 151,147.00891 L151,0.462184836 150.555247,0.0126430611 150.009303,0.0126430611 L2.79077147,0.0126430611 L0.999999988,0.0126430611 C0.999999988,1.31665305 0.999999984,22.0117224 0.999999984,22.0117224 C0.999999985,23.3740268 0.999999988,24.5196567 0.999999988,25.5836215 L0.999999988,49.3460918 C0.999999988,49.3460918 1.00000015,70.2861365 1.00000015,71.269657 Z"/> And with GSAP I do this: var changedShapeID = theSVG.querySelector('#n'); var changedShapePath = "M1.38388602,72.2082603 C0.973032172,73.2106889 0.958561277,74.8587265 1.35575085,75.8776525 L10.6365755,99.6930029 L1.32038928,121.509149 C0.907211953,122.510356 0.89074975,124.158726 1.28793932,125.179275 L10.568764,149.025648 L179.637832,149.013553 C180.189423,149.013514 180.636576,148.56227 180.636576,148.009402 L180.636576,2.01721499 C180.636576,1.46267711 180.179902,1.01313533 179.641046,1.01313533 L10.6365755,1.01313533 C10.5753064,0.379674194 1.38388602,22.8687273 1.38388602,22.8687273 C0.973032172,23.8711559 0.958561277,25.5191935 1.35575085,26.5381195 L10.6365755,50.3465841 L1.38388602,72.2082603 Z"; TweenMax.to(changedShapeID, 0.75, {attr: {'d': changedShapePath}}); I get the shape snapping to the new path shape, rather than tweening to it. As a GSAP beginner I'm unsure whether this is: 1. expected behaviour and I need to use another tool alongside GSAP (such as Snap)? 2. an error between keyboard and chair, in that I'm just doing something wrong? Can anyone point me in the right direction?
-
Hi all, The problem i'm having is a what appears to be a browser issue (namely firefox, safari). My codepen attached shows the animation I have working (using the fantastic drawSVG plugin and GSAP) at the end of which the raindrops are supposed to animate in their own timelines repeating. Chrome seems to want to animate it perfectly (why can't everyone just use Chrome!? ) but when in Safari and Firefox the paths don't want to translate position, only opacity. Any suggestions as to a workaround for this? Thanks! Oli [edit] codepen url removed by moderator [/edit]
-
How can I create a randomly road with GSAP? My idea is that a car moves for him in a canvas element (With Phaser Framework) When the car is off the road I want this stalling. Sorry for my bad english Regards, Nicholls
-
Hi guys, Does anybody know if it is possible to plot html elements to follow a bezier curve / path? I'd like some small shapes to animate along a path as though it is being drawn. I could write out the HTML and CSS for all the shapes and timeline them in to view but there will be 100's of the buggers and I'd like to do it a quicker and more elegant using GSAP if possible. Any help would be great cheers
-
How can I load a file using a relative path to the swf?
imoverhere posted a topic in Loading (Flash)
Hello and thanks again for your product here! I have a swf in a folder on my server for ever client. I'd like each of those swfs to load a file in a common folder one level up. For exmple: fakeRootName\Client100\this.swf fakeRootName\Client101\this.swf fakeRootName\CommonXML\targetXML.xml How can i direct Loadermax to reach targetXML.xml? -
Do I really have to load another library just to animate along the path. Can carl's stroke animation example be used? http://codepen.io/rgfx/pen/cusav I have it set to 25% width works great. What am trying to do is something like the progressive reveal dots example but have it be responsive. http://codepen.io/GreenSock/details/ABkdL/ And while am at it able to figure out how to animate along a path responsively as well, without another library. Slowing building up my responsive animation tools, thanks for everybody's help, can't wait to get to production mode.
-
Hi there, I just downloaded GSAP and I've been checking out codepen examples. I am a novice at JS so just a heads up I may need a small amount of hand-holding at first. Maybe someone can tell me if this is possible (also with GSAP will it work on IE9+?)- I am making a simple hidden object game where there is a list of items and the user clicks on the objects in the list. When the item is clicked, it fadesOut and strikes out the object text on the list. I've got this working with jQuery. HERE is where I am having trouble. I want users to be able to click on the object's name of text in the list and be given a hint. That hint would consist of magic sparkles moving a long a path and circling the object and then fading away. I'll need a different path for each list item. Also, once striked out cicking the object's name for help should be disabled. I am also trying some SVG plugins and haven't been successful for multiple paths on click yet. I am trying to figure out codepen for first time....so I'll try and have what I have so far available soon. Thanks to anyone willing to help a newb out! OK! Here is the codepen link: http://codepen.io/leelou/pen/IfixC
-
Hey all! I've been doing a lot of animating along bezier curves and created a simple little helper tool/function that converts an SVG path into an array of cubic bezier points that can be plugged directly into GSAP Tweening functions. It's still missing a little functionality for quadratic and elliptical arc movements, but I haven't come across any issues with it yet converting SVGs saved out of Illustrator. Just thought I'd share in case anyone else finds it useful. http://github.com/mattanglin/svg-to-cubic-bezier I'll update to incorporate the other SVG movements (and cleanup the code. It's pretty quick and dirty at the moment...) as I have time. Any feedback welcomed. Thanks!
-
Hi to all! my name is Patrizio, i have a question and hope find here a solution at my problem:) some year past have work to animation along bezier path in flash ... the anim figure a ship navigation. the page is here. now i want make a conversion of site frontend from flash to javascript. from cms data I get a path serie like this : path0= [{x: 530.1 , y: 115.7 }, {x: 538.65 , y: 119.35 }, {x: 536.8 , y: 126.6}, {x: 534.95, y: 133.9}, {x: 521, y: 135.45}]; path1= [{x: 519.9 , y: 135.55 }, {x: 523.1 , y: 144.4 }, {x: 523.6 , y: 154.5}, {x: 524.15, y: 164.65}, {x: 523.1, y: 174.05}]; path2= [{x: 523.25 , y: 174.7 }, {x: 494.9 , y: 179.9 }, {x: 470.8 , y: 240.25}, {x: 446.75, y: 300.6}, {x: 300.15, y: 211.1}]; path3= [{x: 300.15 , y: 210.65 }, {x: 275.55 , y: 215.85 }, {x: 244.25 , y: 225.2}, {x: 212.95, y: 234.55}, {x: 184.05, y: 247.05}]; path4= [{x: 183.05 , y: 247.1 }, {x: 135.45 , y: 246.6 }, {x: 118.1 , y: 252.05}, {x: 100.7, y: 257.55}, {x: 90.5, y: 278.35}]; path5= [{x: 90.7 , y: 278.95 }, {x: 104.6 , y: 268.55 }, {x: 107.55 , y: 265.4}, {x: 110.5, y: 262.3}, {x: 112.1, y: 260.2}]; path6= [{x: 111.4 , y: 261.55 }, {x: 105 , y: 254.25 }, {x: 184.7 , y: 235.8}, {x: 264.45, y: 217.35}, {x: 299.2, y: 211.6}]; path7= [{x: 299.5 , y: 211.65 }, {x: 434.3 , y: 300.05 }, {x: 463.2 , y: 247.75}, {x: 492.1, y: 195.5}, {x: 522.6, y: 174.7}]; path8= [{x: 522.3 , y: 174.75 }, {x: 534.6 , y: 165.4 }, {x: 539.15 , y: 144.3}, {x: 543.7, y: 123.25}, {x: 529.25, y: 115.95}]; In this forum i have find some example but not respond exactly how flash in the original work. maybe i'm wrong what's the optimal method for draw the bezier path like progressive animation drawing ??? someone can suggest me the right way ? sorry my poor english tnxxxx
