Search the Community
Showing results for tags 'motionpathplugin'.
Found 19 results
-
Hello Firstly, it's weird how I'm first one who is asking about this(probably I'm diving deeply here 😁) However, my question is simple, I have a box and I want to change it's aspect ration while moving based on path Here is a helper image to understand the steps I want to go through
-
Hi! I'm trying to use the amazing MotionPathPlugin for a little animation of a series of objects that fall and bounce onto a surface. I've gotten the object following the motion path, but there are a few things I don't understand. It looks like the animation starts in the center of my container, and I can't seem to override that - I'd like the objects to start offscreen and animate into position and land on the blue surface. Also, I have MotionPluginHelper going, but the path looks like it's flipped 180 degrees - I'm sure it has to do with the path direction, but I'm not sure how to reverse it. Finally, if you hadn't guessed, these will end up being in some banner ads, and I'll want to resize them for a couple of different dimensions; is there a clever strategy to make this flexible for those different dimensions (ie. make them sort of "responsive")?
-
Hi, I am trying to build an event loop visualization as Jack Archibald did in this wonderful talk. I've created three SVG (2 ellipses, 1 circle) for this visualization. My goal is to be able to change the path in the middle of the animation and it should continue to follow the next path at the first opportunity(probably when it reaches the center-top position of the center circle or the center-bottom position of the center circle. My current implementation is adding an "onRepeat" callback to the currently playing animation and killing it when it starts to repeat. Then I'm starting to the next animation. But the problem with that is the square doesn't transition smoothly to the next path because my SVG's start positions are not the same. Even though I set their start position as close as possible to each other, I *should* be able to decide to follow another path in any phase of the currently running animation. So, I need some suggestions or clarifying that if this is possible with my way or should I try another approach. Any idea is appreciated. I hope my explanation makes sense, if you could watch Jake's talk for a few seconds, you can understand better my goal I also added a small video about how I use three different svg and merge them around center circle. svgs.mov
-
Hi, I have an element (a pony) that moves along a random path, flips and returns. I would like to recalculate that path each time the pony returns. I tried to work with vars.motionPath.path, but the new path isn't applied to the tween ... (see my comments in the code) I there another way to update the path on the fly? Thanks so much, Robert
-
Hi GreenSock devs, I wonder how to simulate jumping from the left to right, not just up-down. I achieve it using MotionPath plugin, but seems like it's not jumping in curve/curly, but like moving 1 point to 1 point. Could anyone please help with this? thanks in advance! Regards, Tony
-
Hi, I've been having an issue with this error ("Uncaught TypeError: t[0] is undefined"), whenever I try to use motionPath and give it a value of an object with multiple values in it, it gives me that error, and I've been trying to solve it for so long with no use. I tried gsap.registerPlugin, I tried importing instead of CDN, I tried different syntax, all with no use. Please help, I've been at this for so long. Should also mention that the error keeps getting spammed, goes up to 90 times sometimes, but it's repeats anyways. Here's the code: Javascript: CSS: HTML: Here's the error itself:
-
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?
-
Hi GSAP Team & Contributors, I've had hard times to make "1D cubic path" working. According to the following codepen, simply extracting the y property of a working curve data doesn't produce the same tween : let points = [{x:0,y:0},{x:50,y:0},{x:100,y:50},{x:100,y:100}]; // Reference Y let yValues= [{y:0} ,{y:0} ,{y:50} ,{y:100}]; // Not the same tween/smoothing GreenBall is 2D cubic path, as BlueRect is 1D cubic path using the same values https://codepen.io/swingingTom/pen/qBPBQQP A workaround a could have imagine is to tween another fake property in order to have a two-dimensional properties let points = [{x:0,y:0} ,{x:50,y:0} ,{x:100,y:50} ,{x:100,y:100}]; // Reference Y let yValues= [{y:0,foo:0},{y:0,foo:50},{y:50,foo:100},{y:100,foo:100}]; // Not the same tween/smoothing But according to this codepen, it won't work : https://codepen.io/swingingTom/pen/NWaWOXX I start to believe that `type:cubic` require both `x` and `y` property to produce the cubic smoothing. For now, my only working workaround is to animate a proxy target, that only reports "y" property on the real target to be animated. https://codepen.io/swingingTom/pen/GRMRYav gsap.to(proxyTarget, { duration: 3, ease: "none", repeat: -1, yoyo: true, motionPath: { path: cubicPoints2D, type: "cubic" }, onUpdate: function () { gsap.set(realDisplayTarget, { y: proxyY.y }); } }), I know that looks more like I should use CustomEase for the prodived cases, but I would like to know better the cubic motionpath features and its limitations.
-
Hello, sorry if my English is not good. A few weeks ago, I started studying GSAP, and I am delighted with this library. I am making the circles rotate aligned on the white line, I base myself on the example provided by GSAP: https://codepen.io/creativeocean/pen/mdrmZYY. I made the circles responsive, although I don't know if it is the best way to do it, the problem occurs when the size of the lines of the circles changes, I can't make the circles stay aligned to the white line. I don't know if the problem is related to the way I use svg or gsap. I hope I have explained myself well.
-
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
-
i want paper to go to conus but it moves backwards and i cannot understand how to change it, help please
-
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
-
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.
-
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
-
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
-
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.
-
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.)
-
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') })
-
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 !
.thumb.jpeg.1e17d2cd2ff730e1b1b53b9bc1b1887b.jpeg)
