Search the Community
Showing results for tags 'bezier path'.
Found 9 results
-
Hey all. I've got a wavy svg path that I need to animate but articulating the exact nature of the animation I'm looking for isn't the easiest so bear with me. I need the effect to look like a cross section of waves moving, so each peak moves up and down slightly staggered behind the peak to its right. Each control point on the path will need to go up and down but there'll also need to be some rotation involved too I think to make it look natural. the complicating factor is the big dip in the middle of the path, but that needs to stay. I've been trying to figure it out but have got nowhere. Would gsap be the best thing to use here? Or is there an easier way of doing it that I'm blind to?
-
Hello, I found out about Greensock some days ago and immediately started using it. I think is really cool but I have some issues with some specific tasks. I am trying to: - Draw an svg line in portions as you scroll. (using also scrollmagic here) - Have a circle that will follow the svg line as it draws. (If I manage to do this, then I want multiple circles in a group follow the line as it's being drawn). From my codepen you will see not a perfect way to draw the line which I think I can make it better but my main issue is with the circle follow the svg. As a first step, I am just trying to follow the SVG (not the line as it's being drawn) but using the MorphSVGPlugin.pathDataToBezier to get the path of the svg, the return path does not really follow the svg. I think maybe my SVG needs more points so that the bezier path is more accurate but I am not sure if this is the case here. Also I would like to know for ideas if I am thinking this solution completely wrong and there is an easier way to accomplish what I need. Thank you,
-
Hi, I am trying to create movement of 6 items via bezier path, with ability to move them together on 1/6 of path (or for some distance) left or right. However, one of the problem is old engine, and I am not sure if it is possible to make. I am new to gsap, so it is a bit old version before I found autoRotate) However it's around what I need, but I am looking for ability to move left or right on some distance on bezier path and then pause. * VERSION: 2.1.2 * DATE: 2019-03-01 * UPDATES AND DOCS AT: http://greensock.com * * Includes all of the following: TweenLite, TweenMax, TimelineLite, TimelineMax, EasePack, CSSPlugin, RoundPropsPlugin, BezierPlugin, AttrPlugin, DirectionalRotationPlugin
-
I am using React as part of my stack. I have two elements: 1. A circle, made up of a div using css to style it 2. A square, made up from an svg using a fill colour. I want to be able to use a library, possibly gsap, to programatically trigger the change in position of the both elements from position (x,y) to position (x,y) on the screen using a custom path (svg) or bezier curve. With the above in place, I want to be able to apply a motion blur to the circle and square to enable it to look as if there is a blurred trail behind it. Can anyone recommend me the the right tools to achieve the above? -
I am new to GSAP animation, i was learning how to use the bezier plugin on a year old tutorial video but couldn't get it to work because I learnt it is outdated. Is there any alternative to this or any material i can use? Thanks
-
GreenSock Community, First, thank you in advance for any help you may provide. I am just learning how to use Greensock and web development in general, please pardon any newbie questions. I have put together a CodePen here is what I am looking to achieve: Each corner of the browser has a hyperlink with image for each section of the website. When you click on a section link that section image will move towards the center of the browser window (both vertically and horizontally centered) it will also scale up in size. The remaining section images will move out of the browser window frame (move off stage). This I have working... what I need help with is:Each section image does not center properly. I have tried a couple of things based on some other forum topics found here http://greensock.com/forums/topic/13542-positioning-relative-to-center/ and here http://greensock.com/forums/topic/13802-update-height-value-dinamically-on-window-resize/ I would also like to scale the image to about 65% of the browser window width. I tried using the technique mentioned here http://greensock.com/forums/topic/13802-update-height-value-dinamically-on-window-resize/I tried to replace "scale: 3" with "width: '65vw'" in my timeline but that did not work I also noticed that sometimes the image/object does not animate anywhere near the center (sometimes going off screen) a page refresh and clicking the link again will usually correct this behavior but it seems the javascript is not calculating the proper initial window size (thus all the other math is off). Also, is it possible to have the enlarged image (once it reaches its final animated position) be responsive (resize itself at the 65% vw) if the user resizes the window.I tried using the the window resize function found in this codepen http://codepen.io/celli/pen/XdWaRv but did not have any luck (likely because I was not able to sort the image size based on screen width as stated above). This last question is not a GreenSock question but I figure someone in the community could guide me towards a good article or solution... after the section image is centered I want to dynamically load content below it so the user can scroll down and view the appropriate content/info. I'm hoping to help speed the page load as it will only load the content the user is looking for... I'm off googling on this one now but any help will be very much appreciated. I hope that I have made things clear. Again, thank you for any help you may provide. -
I need to update a path from A point to B point using gsap and angular 6+. In the example of the image below: When you drag the circle the paths must be updated. Thanks!
-
Note: This page was created for GSAP version 2. We have since released GSAP 3 with many improvements. We recommend using GSAP 3's motionPath instead of the approach outlined here. Please see the GSAP 3 release notes for details. GSAP's BezierPlugin enables you to animate any object along a complex bezier curve. However, it isn't simple for most people to generate the exact coordinates of all the anchor and control points needed to describe a Cubic or Quadratic bezier curve. MorphSVGPlugin to the rescue MorphSVGPlugin's main responsibility is morphing SVG paths and in order to do that, it converts SVG path data internally into bezier curves. We thought it would be convenient to allow users to tap into that functionality. MorphSVGPlugin.pathDataToBezier() converts SVG <path> data into an array of cubic Bezier points that can be fed into a BezierPlugin tween (basically using it as a motion guide)! Watch the video Demo Aren't there other tools that do this? Sure, you could find some github repos or dusty old WordPress blogs that have some tools that move objects along a path. The problem is, what do you do when you need to incorporate one of these animations with other effects? Before long you're loading 5 different tools from different developers and none of the tools can "talk to each other". Choreographing a complex animation becomes a nightmare. What happens when you need to pause or reverse an animation from one of these "free" tools? Chances are you'll be spending dozens of hours trying to make it all work. With GSAP, all our plugins work seamlessly together. Any animation you create using any plugin can be synchronized with hundreds of others. Suppose your client comes to you with a small project with the following requirements: Morph a hippo into an elephant Progressively reveal a curved path Animate the elephant along the path Display captions for each animation Make sure you can play, pause, and reverse the entire sequence Sounds silly, but something like this should be a breeze. How many hours are you going to spend just looking for the tools you need? With GSAP you can build it all in under an hour, with less than a dozen lines of code. See the Pen Sequence of Bonus Plugins by GreenSock (@GreenSock) on CodePen. The demo above uses MorphSVG, DrawSVG and ScrambleText which are available to Club GreenSock members. For more information check out the many benefits of joining Club GreenSock.-
- 1
-
-
- tips
- svg animation
- (and 5 more)
-
I tried to set up a Codepen for this but can't get it to let me set up the javascript files in the header. I can't make the ball follow the path. I've verified that MorphSVGPlugin is making the path but the tween is choking. I can't figure out why. The error I'm getting in the console is: "Unable to set property 'vars' of undefined or null reference" I paid for the use of MorphSVGPlugin but so far I can't get what I need. I've attached the file. The javascript file url for MorphSVGPlugin is relative for obvious reasons. If you test it you'll need to fix that url. index.php
