Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...

Search the Community

Showing results for tags 'motionpath'.



More search options

  • 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

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


AIM


MSN


Website URL


ICQ


Yahoo


Jabber


Skype


Location


Interests

Found 12 results

  1. GreenSock

    GSAP 3.2 Released

    GSAP 3.2 has some groundbreaking features for converting coordinates and aligning elements. Check out the video explanation below. Warning: it's a bit advanced, but hopefully you'll see how crazy-useful these capabilities can be. New: "alignOrigin" for motion paths MotionPathPlugin recognizes a new alignOrigin property that pins a certain spot on the target to the path. For example, alignOrigin: [0.5, 0.5] pins the center of the target on the path and sets the transformOrigin accordingly so that rotations are around that point as well. To get a similar effect before 3.2, you'd need to set the transformOrigin separately as well as a -50 xPercent/yPercent. Use the Array syntax to define progress values along the x and y axis, so [1, 0.5] would be the right side, centered vertically. Or use a point object like {x: 20, y: 50} to specify a coordinate (measured from the top left corner in pixels at its native size). Sample code // Move the element along a path, rotating it along with the line gsap.to("#spaceship", { duration: 5, motionPath: { path: "#path", autoRotate: true, align: "#path", alignOrigin: [0.5, 0.5] // aligns the center of the target on the path } }); See the Pen MotionPath aligning with path demo by GreenSock (@GreenSock) on CodePen. See the MotionPathPlugin docs for details. New: getRelativeDistance() that transcends coordinate spaces Have you ever wanted to move one element to another element even if they're in different containers... which may have various transforms, warping the coordinate systems and making it super difficult to calculate? If so, you will love this magical function which is explained in the video at the top of this page. See the Pen GSAP 3 convertCoordinates() by GreenSock (@GreenSock) on CodePen. See the getRelativePosition() docs for details. New: convert coordinates between elements/contexts GSAP can now take a local coordinate from inside one element and calculate exactly where that coordinate lines up inside of ANOTHER element's local coordinate space! So you could take a "click" pointer event from the window and map that to an element's local coordinate system even if it's deeply nested inside various containers that have transforms applied! Or, as you can see in the demo below, convert between coordinate spaces to make the blue arm stay connected with the rotating red arm: See the Pen GSAP 3 convertCoordinates() by GreenSock (@GreenSock) on CodePen. See the convertCoordinates() docs for details. And more... GSAP 3.2 also delivers various bug fixes, so install the latest version today (3.2.6). There are many ways to get GSAP - see the Installation page for all the options (download, NPM, zip, etc.) Resources Full release notes on each release is on Github Full documentation In case you missed it: GSAP 3.1 highlights (previous release) Getting started with GSAP Learning resources Community forums Happy tweening!
  2. GreenSock

    MotionPathPlugin

    Animate anything (SVG, DOM, canvas, generic objects, whatever) along a motion path in any browser. Define the path using an SVG <path> or an Array of points. The magical "align" feature bends coordinate systems and really sets it apart. You can even edit the path in-browser using MotionPathHelper! Video Feature highlights Magical align capabilities that bend coordinate systems in order to position the target exactly on top of the path (or move the path to the target), regardless of how deeply nested they are inside different transformed containers! This is insanely convenient and no other tool on the web offers this functionality! autoRotate makes the target rotate automatically in the direction of the path as it moves. Define specific start and/or end positions on the path (progress values from 0-1). Even wrap around or go backwards! A separate MotionPathHelper tool for Club GreenSock members enables interactive editing of the path directly in the browser! No need to supply an SVG path - you can provide raw coordinates through which to plot a curved path, complete with adjustable curviness, or if your Array has cubic bezier coordinates just set type: "cubic". You can even have a path go through non-positional properties like scale, rotation, or ANYTHING! That will basically smooth out the velocity changes as it hits each value, like: [{scale:0.5, rotation:10}, {scale:1, rotation:-10}, {scale:0.8, rotation:3}]. Loads of helper methods for doing advanced things like: Convert native SVG shapes like <circle>, <rect>, etc. into an equivalent <path> (convertToPath()) Calculate the relative position data between any two DOM elements so that you can move one to align perfectly with another, even if they're inside different containers that have various transforms applied! (getRelativePosition()) Convert SVG <path> data into raw cubic bezier data/numbers (or the other way around) (stringToRawPath()/rawPathToString()) Get matrix data for converting between coordinate spaces (convertCoordinates() / getGlobalMatrix() / getAlignMatrix()) Check out the MotionPathPlugin Demos collection on CodePen! Demo Sample code gsap.to("#div", { motionPath: { path: "#path", align: "#path", alignOrigin: [0.5, 0.5], autoRotate: true }, duration: 5, ease: "power1.inOut" }); Usage details (docs) Check out the MotionPathPlugin docs for all the details. How do I get it? MotionPathPlugin is included in the free download, so it's available via the CDN, Github, NPM, and Yarn too! See the installation page for all the options. MotionPathHelper (which lets you live-edit the path inside the browser) is a members-only benefit of Club GreenSock. If you're not a member yet, animation superpowers await!
  3. I am trying to use MotionPath to animate along a path and it is getting the correct data for how it should move but is not actually on the path which is what i need. The code pen shows this issue. The ship "orbiting" should follow and be on the red path.
  4. Hi everybody! I'm finding some trouble when trying to align an object and a path. The object is always apart from the path and I don't understand why. I've tried several commands, but neither with the most basic code I can get the desired result. Only with the "align: "#path" command I can almost get the desired result: https://codepen.io/strangler/pen/bGdEVJV Can you guys help me figure out this one? Thank you in advance, Cheers!
  5. I try the MotionPathPlugin to move the octopus along this path but it seems not to be perfectly synchronize every time in the loop animation. what am i doing wrong ? I put a white stroke to see the path. You can fork the codepen if you want and comment each animation on the mainTl (eyeTween, octopusTween, movePathTween) to see what's happened behind the scene. Thanks for your answer Yves
  6. I have been working on a project that involves a timeline that simply goes from one scene to another (one function to another) using onComplete. In a couple scenes I am successfully using the DrawSVG and Text plugins. Recently I have gotten involved in MotionPath and have successfully put together a scene using it. However, when I include the MotionPath scene in my main project, those other scenes that involve DrawSVG and TextPlug do not render properly. I get the following errors Could anyone explain to me why these plugins suddenly appear to be missing when all I have done is add the MotionPath plugin? I am including the MotionPath plugin like so: And have been successfully using the TextPlugin: And DrawSVG, locally
  7. Hi All, & Thanks in advance for any help. I have a selection of arrow heads I want to move along separate paths... I've followed some existing Topics here to get me most of the way, but am struggling with inconsistency between the different shapes. Some of the arrow heads are drawing in no problem (all the straight ones, that makes sense), but others do while similar ones don't - see #i-line_5. That works well, whereas #i-line_3 doesn't. It seems to be partly to do with the arrow head origin-position, and partly autorotate, but cannot get a fix whilst I change these. I also suspected the origin of each arrow-head may need changing (eg, which point comes first in the Path parameter), but have struggled to update them / make any change to the outcome. Thanks Jake.
  8. Hi I saw this website today (link below), where there is text being animated along a 3d path by the look of it. Is it possible to do something similar in Greensock. I've got a pretty good grasp of the basics of GSAP, but was wondering where to start with something like this. https://www.arche68.com/front/en Many thanks for any ideas Paul.
  9. Hi All, I want to create a button that is dragged using the "startdrag" across a motionpath tween but the line isnt straight. Is there a way. I have attached an example of what the line will look like. Any help would be great
  10. Hi, for a medical project I need to animate liquid slowly flowing up a pipe, much like those old pipe games. Here's a tutorial using manual tweens - http://www.computerschool.net/flash/fl_exercise25.html. I need the same result, only using code, because I have like a million of those pipes. Using an array of Points(), I can create a greensock MotionPath and send a Path Follower along it. But I need the follower to sort of leave trail, to color the pipe behind it. I am thinking of creating a separate shape and drawing a LineTo(followerX, followerY) on each Path update. But is there an easier way, a property or method that Greensock offers? Any other ideas are very welcome, too. Thank you!
  11. Would you consider updating the class by including more data from the fl.motion:KeyFrameBase (http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/fl/motion/KeyframeBase.html ), specifically : rotationConcat color alpha I was considering using Tweenlite for my Starling game. Llevels are imported from swf and then parsed during runtime. Those levels contain movieclips with motion tweens (+ rotation along the path). With tweenlite it's possible to rotate only one way or another, not have a rotation value per each frame, not to mention other things like color values.
  12. I am tweening an objct on a circular path: TweenLite.to(glareMC, 2, { circlePath2D: { path: circlePath, startAngle: 225, endAngle: 225, direction: Direction.COUNTER_CLOCKWISE, extraRevolutions: 1 }} ); I'd expect to see a CCW motion, as specified in the direction property, but the glareMC moves CW: why? If I change endAngle to whatever different from startAngle the animation looks correct: is this an unhandled exception of the motionPath engine?
×