Jump to content
GreenSock

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

Search the Community

Showing results for tags 'motionpath'.

  • 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

Found 21 results

  1. Hello! I want to layout some text on an SVG path and have an animation play in a loop, on hover. On mouse out, the text should go back to its initial state. I used SplitText and the MotionPath plugins in my CodePen and it looks kind of what i want, but i have the following issues: Timeline related: The intended initial layout, is the one you'll see if you comment out addPause (line 44). I thought i'd probably need to change the startTime of the timeline, but that's not working. What am i missing? On mouseout, i'd like to tween the timeline to its initial sta
  2. Hi guys ! Is that possible to couple those two plugins (Physics2d & MothionPathPlugin) to create a kind of "maze" what I want is that the svg circle fall and stop at the end of the path 😕 i don't see this anywhere :3 thk's
  3. Hi, This is my first time posting in the forum! I searched everywhere but could not find the answer so here goes. I want to animate a line of text on a motion path. At the moment it is not working as the characters all end up on top of each other. I think it has to do with the start/end within the path that's being set but I do not know how to add code to address this. (FYI my end goal is to animate the three lines of text on three different motion paths perhaps using the class for each line. Any help would be appreciated.)
  4. Hello! I am working to reveal this shape/outline via a mask ...specifically the rectangle shape, as it animates via motionPath the shape should reveal. This pen is set up to show the rectangle animating along its path (.path2) successfully, but when I place it within a mask ("theSquare"), motionPath breaks. Commenting in <defs> and <mask> within the linked pen will replicate the error. Can you help me understand why this is happening? Thank You!
  5. Steps to reproduce: Open Codepen Link, it will probably look sort of fine embedded, but it'll be obvious if you resize the screen so the boxes form a 2x2 pattern. Click a box. Goal: To have the boxes animate into the middle from their current position in a nice smooth curve (inwards). Issue: Top left box behaves completely as expected, the rest do not. Details: I'm using MotionPath to animate the boxes into the middle in a curved fashion. According to my math the coordinates should be fine, but the animations are erratic. I'm not entire s
  6. Hi, I am a real beginner and I am sorry, that my svgs are so messy. I used an old CorelDraw program, that pumped it up with g-tags. I try to make the teeth of the chainsaw in our logo move. I gave them all the same class "zahn" (which means tooth), but they simply refuse to move. One simple rectangle is moving, but 2 or more dont. I used a for-loop, that loops over all items in this class, but still no action. Any support is very much appreciated. Before I forget, my svg pops up in the beginning, although I think I blocked it properly with the eventlistener for "load". Do you have an idea
  7. Hello everyone, Let explain my problem, I am currently moving an object a long a x,y,z axis (in threejs). I want to have complex trajectory, like a looping : i tried to use the motion path plugin in order to do interpolation across multiple point. So far so good, but i need to use the bezier type in order to make it as a real looping (not a cubic one :) ) but bezier type seems supporting only x and y axis. The other main problem is to slow down the moving element on mouse hover, i think using the timeScale function on hover will do the job perfectly.
  8. 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 n
  9. Ok - I need a nudge down the right path on this one. (pun intended 🙂) From what I read so far - it seems as though I might need to create a mask that is the same size as my circle and try to animate it across the front of the box at the same time the circle passes behind it so that it gives the appearance of the circle passing in front of the box. I want to have the effect of the circle "orbiting" the box such that it passes behind the box on one side and in front on the other side. Right now it is really good at passing behind the box on both sides but I am trying to figure o
  10. Hi there, I am trying to make a div(#rec) follow an svg path with I did in my below code but, I want the div to follow down, as I scroll down and follow back up as I scroll up, I will appreciate if you help work on the code below, Thanks https://codepen.io/onseyi/project/editor/DeWepm <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> body { margin:0; width: 100%; height:
  11. 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 co
  12. 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.
  13. 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!
  14. 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
  15. 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
  16. 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
  17. 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.
  18. 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
  19. 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
  20. 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.
  21. 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?
×