Search the Community
Showing results for tags 'motion path'.
Found 6 results
Orbit along path in even manner with motionpathplugin
Akash Ranjan posted a topic in GSAPHello 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
Motion Path add Trailing PathI only have been using the core GSAP and I have came across the MotionPathPlugin and tried it. I am using VueJS and I want to put a trailing path to my object but I am failing to do. can someone help me?
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 !
Move object a percentage along bezier lineHi, I have a path with a circle going along it using MorphSVG with Bezier. When you press 'play', the circle follows the path to the end as expected. However, I want the circle to stop at the top of the curved line, so like 70% along the path. Is this possible? https://codepen.io/Carrly/pen/vpwBEW
Animate object along the path with bezier plugin
murtazamalek posted a topic in GSAPHello, What an awesome animation library I must say. I am trying to work on some animation but having a hard time understanding the concept of bezier plugin. Please check the attached CodePen. What I want to do is, on the page load I want to animate all 5 links from the center of the screen to the left, which is a virtual arc and then I want to animate the links one by one along the arc path. Right now you will notice the links are animating but they are directly animating to the end position, whereas I want the links to reach their destination along the arc path. I tried using the bezier plugin "thru", "quadratic" and "cubic" types but none of them worked as expected. I am 100% sure I am missing something and so any help on this would be greatly appreciated. FYI: This animation library is so cool, it's net letting me sleep Thanks.
Using movieclip as motion path
nball posted a topic in GSAP (Flash)Warning: n00b question! I'd like to use TimelineMax to animate clips along other clips. The examples I can find using MotionPath all utilize generated paths vs. hand drawn paths. Can I simply designate hand drawn paths (which are mc's) using MotionPath?