Jump to content
Search Community

Search the Community

Showing results for tags 'path'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • GreenSock Forums
    • GSAP
    • Banner Animation
    • Jobs & Freelance
  • Flash / ActionScript Archive
    • GSAP (Flash)
    • Loading (Flash)
    • TransformManager (Flash)

Product Groups

  • Club GreenSock
  • TransformManager
  • Supercharge

Categories

There are no results to display.


Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


Personal Website


Twitter


CodePen


Company Website


Location


Interests

  1. hi is anyone one know how to animate text on a curve path, i've attached a snap shot. can you please advice me to get this thing done.
  2. Hello, I'm quite new to GSAP and still learning the ropes. I am trying to create a specific animation that has proven difficult and was hoping someone could give me some pointers or advice on how to best tackle this. Using the MorphSVGPlugin I have placed several dots on a path and made them loop on it. What I would like to be able to do with this is when clicking a dot, to have this dot move to the bottom center of the path. In other words, the dots should loop forward or backward (based on the shortest distance) until the clicked dot is in the right location. So far I have not been able to figure out a way to make this work. Any help or advice would be much appreciated! Thanks.
  3. Hi, I'm getting more and more familiair with GSAP and JS, but I'm only diving in to it since last week. Now I was playing around with the TweenMax.ticker and mousemove event based on: But I got stuck on trying two things: 1)move SVG paths in the same way as the circle element; I did get the rect element to work by changing the cx and cy into x an y, but I don't know how to interpret this with a path position, since the ticker event does not seem to work if I give the SVG group tag an id. 2)I attached a codepen sketch based on the pen from Blake Bowen; as you can see I simply added a timeline to rotate one of the elements. Now I want this to keep on rotating around the origin value of the element, but this doesn't happen. The origin point stays on the begin value of the element (which is the top left corner) and does not move accordingly to the mouse position. Initially I want to be able to do: 1)move SVG paths based on mouse position 2)know how to apply more than the change of position accordingly Can anyone help me? Please let me know if my question is unclear. Thank you in advance!
  4. 0down votefavorite I am creating a dynamic path using my SVG. I now wish to add gradient to my path but I am stuck. The way I am trying, my gradient is coming along the path as shown in image 2 while I require it to be the kind in image 1. Needed_Picture Current_Picture My gradient and stroke definitions are as follows : </svg> script : ` svgPath.setAttribute("stroke-width", "10"); });` 0down votefavorite I am creating a dynamic path using my SVG. I now wish to add gradient to my path but I am stuck. The way I am trying, my gradient is coming along the path as shown in image 2 while I require it to be the kind in the image named as Current. My gradient and stroke definitions are as follows : </svg> script : ` svgPath.setAttribute("stroke-width", "10"); });`
  5. 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!
  6. 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!
  7. 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
  8. 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
  9. 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.
  10. 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?
  11. 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; }
  12. 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>
  13. 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
  14. 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
  15. How can I program an object using ThrowPropsPlugin along a spiral path (roulette wheel ball)?
  16. 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
  17. 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
  18. PointC

    SVG Path Builder

    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/
  19. 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
  20. 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!
  21. 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?
  22. 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]
  23. 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
  24. 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
  25. 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?
×
×
  • Create New...