Jump to content

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

Search the Community

Showing results for tags 'motionpathplugin'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


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

Product Groups

  • Club GreenSock
  • TransformManager
  • Supercharge


  • FAQ Landing Page


  • Examples
  • Showcase


  • Products
  • Plugins


  • Learning Center
  • Blog


  • ScrollTrigger Demos


There are no results to display.

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start



Personal Website



Company Website



Found 11 results

  1. Hello Guys, I am having trouble creating an circular animation with motion path. Basically what I am trying to achieve is that all the 4 images rotate in even manner. for example First image should start from 0%, second from 25%, third from 50% and fourth from 75%. Here is the code sandbox for my code https://codesandbox.io/s/orbit-motion-path-mb6ns?file=/src/App.js:1339-1344 Please see attached screenshot for what I am trying to achieve Please help me. Thanks
  2. i want paper to go to conus but it moves backwards and i cannot understand how to change it, help please
  3. I want to create a section like the video attached. If some one have experienced it will be a great help thanks. I have created animation along my svg path but want to stop it on different points like in the video. Untitled- Jun 17, 2021 6-30 PM.mp4
  4. How to avoid the "jump" of the main circle "#usHome_1" at the end of the timeline? I'd like to have the same position for both circles at the start and at the end of the timeline.
  5. Hello Everyone, In a previous post @Cassie kindly helped me to fix a symmetrical animation that I'm trying to convert as an infinity (symbol) animation, it's kind of work but I can't make the each of the 10 circles scale down smoothly in the middle of the symbol and then scale up on the 2 extremities. @Cassie if you stop by, love would your help on this 😬 Many thanks Awa
  6. Hi guys! I tried to draw an svg path on scroll with these three plugins: ScrollTrigger, DrawSVGPlugin, MotionPathPlugin. I did it but I really can't understand why it is drawing in reverse order. When you scroll down more than 30-35%, you will see a red ball drawing a line, but it should start from the top not from the bottom. I don't know if the problem is with line, css or any other thing. Can someone please help me with this. I really don't know how to fix it. @GreenSock
  7. Hi. Amazing lib, just became a club member and i'm having a lot of fun trying it out. I am trying to recreate this pen on a create-react-app product. I would like to know if there is an analogous function in the motionPathPlugin that would return the array of objects i need (that was provided by MorphSVGPlugin.pathDataToBezier) in the pen attached.
  8. 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.)
  9. Hey guys! I'm a experienced developer but a newbie to animations. I've been trying Greensock and so far I think is great. I was presented with challenge today, I need a small circle to follow the mouse along a path I defined. I don't even have a Codepen because I don't even know where to start 🤣 I need the green circle ("#movingcircle") to follow the mouse when it enters the brown area ("#mousearea") and move the green circle along a path (I've used MotionPathPlugin to follow the path, super easy!). If you can give me a high level approach on how should I do this or point me to the right place in the Docs would be a big win for me. My first attempt looks like this, as you can see I commented the start and end props which seems the right places where to input the mouse coordinates. Ignore the console.log below, I was just playing around with it. Am I using pause() and resume() the right way? The code: document.querySelector('#mousearea').addEventListener('mouseover', (event) => { tl.resume() tl.to('#movingcircle', { duration: 5, motionPath: { path: '#followpath', align: '#followpath', alignOrigin: [ 0.5, 0.5 ], x: event.pageX // start: tl.progress(), // end: event.clientX * 100 / event.target.getAttribute('width') / 100 } }) console.log( 'mouse', event.clientX * 100 / event.target.getAttribute('width') / 100, 'progress', tl.progress() ) }) document.querySelector('#mousearea').addEventListener('mouseout', () => { tl.pause() console.log('leave') })
  10. Hello again! I've managed to make some items orbit infinitely 🥳 There are a few things I'm slightly struggling with: 1: I have tried using 'progress' and 'totalProgress' to make the animation start in 'full orbit' (i.e. without the beginning part). I've tried setting it all the places that seem correct (see commented out js in codepen). I must be missing something as nothing I've tried works..? 2: If you check the console, there are lots of errors like '"Invalid property" "start" "set to" 0.5714285714285714 "Missing plugin? gsap.registerPlugin()"'. I'm working in Magento2 🤢 so thought this was some kind of require.js error, but it also happens in the codepen demo. In the past I have seen this if there is a null target, but there are no null targets here. Why are these errors happening? 3: Also, in this simplified demo, the items seem to not follow the path exactly..? (offset and seems slightly wonky too). I assume this is something to do with the svg path itself? The 'items' are too small to need an offset? Magneto2 sidenote: I couldn't get MotionPathHelper to work, I really tried! I loaded it in the correct method via requirejs-config.js. Just mentioning this in case anyone has had the same issue and worked it out. I used the minified js files. Look forward to your response, thanks!! P.s. Loving version 3 !
  11. I'm converting a project using gsap 2 to gsap 3. BezierPlugin.bezierThrough() is used, but I don't see a compatible method in the MotionPathPlugin. What would I use to replace that function?