Search the Community
Showing results for tags 'motionpath'.
-
I cannot flip the car image and it always appears backwards. What am i doing wrong? And i want to show the text when the car is near red points, and hide it after, but i cannot figure it out. Any help would be appreciated)
-
Hi Everyone! Pls help me I have a trouble with the integration of GSAP and Locomotive Scroll When i tried to make an animation on both scripts the animation of Motion Path is going a little slow and looks like frame and frame animation, and i dont know how to solve it ! any idea? Thanks to everyone
-
I wanted to code this illusion with GSAP but i don't know why circles are not syncing way i expect them to with " +=0.5 ", timing is off. can someone help? https://tiphero.com/rolling-motion-illusion more about it...
-
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 there, I've checked the documentation for MotionPath and can't see the ability to add a callback function for when the animation has completed?...ideally I'd like this to be called at the end of each loop. Any help would be appreciated. Regards Al
-
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: 3000px; background:#dfdfdf; overflow-x: hidden; } #rec { position: absolute; width: 150px; height: 100px; background-color: #8894aa; } </style> </head> <body> <div id="rec"></div> <svg fill="none" xmlns="http://www.w3.org/2000/svg" height="100%" width="100%" viewBox="0 0 1300 3000"> <path id="path" d="M143.78,431.83c103.76,235.99,223.54,324.48,318.04,360c143.34,53.87,223.51-16.03,379,51.84 c136.54,59.6,292.87,208.71,272.99,325.44c-25.74,151.18-320.87,94.36-612.23,336.96c-155.68,129.63-367.75,392.59-331.29,624.96 c43.59,277.79,443.64,520.03,985.93,492.48" stroke="black" stroke-width="8"/> </svg> <script src="gsap.min.js"></script> <script src="MotionPathPlugin.min.js""></script> <script> gsap.registerPlugin(MotionPathPlugin); gsap.set("#rec", {xPercent:-50, yPercent:-50, transformOrigin:"50% 50%"}); gsap.to("#rec",{duration:5, motionPath:{ path:"#path", autoRotate: true } }); </script> </body> </html> index.html
-
I am using React as part of my stack. I have two elements: 1. A circle, made up of a div using css to style it 2. A square, made up from an svg using a fill colour. I want to be able to use a library, possibly gsap, to programatically trigger the change in position of the both elements from position (x,y) to position (x,y) on the screen using a custom path (svg) or bezier curve. With the above in place, I want to be able to apply a motion blur to the circle and square to enable it to look as if there is a blurred trail behind it. Can anyone recommend me the the right tools to achieve the above? -
Hello! I want to move the purple block along the path I've draw in the SVG. This is one section of my website which uses gsap all over the page. Rest of the page can be easily selected using the ref but when I use MotionPath, It throws Invalid scope and Target not found error. Here's the codesandbox: https://codesandbox.io/s/gsap-motionpath-react-bkscsf?file=/src/App.js Thank You!
-
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:
-
Hi Team! I'm trying to setup a simple animation with a boat moving along a path as the user scrolls down the page. I had the boat moving along the path correctly, but then I added the next step which was to pin the whole map so you could actually see the full animation before it scrolls off-screen - and this proved kinda tricky! I went through a few different iterations of path-mismatch, and now the boat does appear to be moving along a line of motion, but it's as if the path is rotated 90 degrees and the boat goes bouncing around towards the left instead of going down the map along the dotted line. I must be calling the motionPath before the asset has loaded or something, right? Any other suggestions where I am going wrong will be massively appreciated! Codepen here (brown box in place of the boat) https://codepen.io/Allanw/pen/jOarMaO
-
Hi there, I'm trying to build a seamless animation where my van image is centered in the middle with its light, and it is following the line. The white dot at the left is from another codepen: https://codepen.io/lisaschumann/pen/KKqMMoe which I used as a starting point. That point follows the path perfectly, but whenever I try to make my van follow the path in the middle it still takes the path position (-33%) Also, when I try to add my own path, it destroys the animation even more. I would like to use this as my own path <path id="line" d="M0,251.32C59.82,242,144.24,236.61,205,247c24,4.11,51.08,16.94,93.28,17.46,51.08.62,85.58-13.89,110.91-21.77,46.78-14.55,71.87-9.48,225,4.42,154.49,14,231.73,21,263.29,20.4,157.16-3.08,161.25-38.87,254.58-20.52,107,21,131.36,73.93,210.74,60.61,63.78-10.7,66.12-50.36,142.89-69.32,65.67-16.23,129.58.42,193.86,8.47,92.31,11.57,189.23,6,280.72-8.29,292.41-45.49,315.9,15,621.94-1.28,293.86-15.63,282.72-46.8,401-24.71,151.74,28.35,230.58,91,380.35,64,56.7-10.22,79.74-21.4,168-37.43,69.39-12.61,149.91-9.39,220.58-9.3,52.95.07,131.22-1.76,227.87-4.31" style="fill:none;stroke:blue;stroke-linecap:round;stroke-width:10px" /> Any help is massivly appriciated!
-
import React from "react"; import styles from "../../Sass/components/Sibteali.module.scss"; import Typewriter from "typewriter-effect"; import { ReactComponent as HeroSvg } from "../../Resources/heroNew.svg"; import { useState, useEffect, useRef } from "react"; import gsap from "gsap"; import { MotionPathPlugin } from "gsap/MotionPathPlugin"; gsap.registerPlugin(MotionPathPlugin); export default TextAnimation; const GsapHandler = () => { gsap.to("#circle_1",{ duration:20, motionPath:{ path:"#ellipse_1", autoRotate: true }, repeat:-1, }) }; function TextAnimation() { useEffect(() => { GsapHandler(); }, []); return ( <div className={`${styles.display} ${styles.font}`}> <div className={`${styles.text} Text`} style={{ fontWeight: "800", opacity: 0, }} > <div>Hi! I'm Syed Sibteali Baqar I'm a</div> <div style={{ color: "#fcab10" }}> <Typewriter options={{ autoStart: true, loop: true, cursor: "/", }} onInit={(typewriter) => { typewriter .pauseFor(3000) .typeString(" Computer Engineer") .pauseFor(500) .deleteChars(17) .typeString(" Web Developer") .pauseFor(500) .deleteChars(13) .typeString(" Open Source Contributor") .pauseFor(500) .deleteChars(23) .typeString(" Python Developer") .pauseFor(500) .deleteChars(16) .typeString(" Speaker") .pauseFor(500) .deleteChars(7) .typeString(" PC Gamer") .pauseFor(500) .deleteChars(8) .typeString(" Singer") .deleteChars(6) .start(); }} /> </div> </div> <div> <svg className={`${styles.heroImg} starSys`} xmlns="http://www.w3.org/2000/svg" width="855.6" height="578.4" viewBox="0 0 855.6 578.4"> <path id="mainGlobe" d="M763 338c-3 43-22 84-49 119l-3 4-8 9-10 11-9 9-7 7c-29 25-61 46-95 65-66 36-138 64-213 68s-153-18-207-69c-74-69-95-184-65-280 20-64 61-122 116-160s125-55 190-44c53-31 121-32 178-9 31 13 58 32 82 54a344 344 0 0 1 31 34l3 3 11 16 15 23 4 6 3 5a266 266 0 0 1 32 88l2 12a175 175 0 0 1-1 29Z" transform="translate(0 -52)" style={{fill:"#3f3d56"}}/> <path d="M568 403 420 279l144 129a3 3 0 1 0 4-5Z" transform="translate(0 -52)" style={{fill:"#f0f0f0",opacity:".30000001192092896",isolation:"isolate"}}/> <g id="smallGalax"> <circle cx="227.2" cy="198.7" r="89" style={{fill:"#f2f2f2"}}/> <path d="M307 245a81 81 0 1 1-53-76 81 81 0 0 1 53 76Z" transform="translate(0 -52)" style={{fill:"#fff"}}/> <circle cx="211.2" cy="165.7" r="25" style={{fill:"#e4e4e4"}}/> <path d="M303 222a25 25 0 0 1-27-41 81 81 0 0 1 27 41Z" transform="translate(0 -52)" style={{fill:"#f2f2f2"}}/> <circle cx="252.2" cy="219.7" r="9" style={{fill:"#e4e4e4"}}/> <path d="M216 323a8 8 0 0 1-1 2 82 82 0 0 1-17-4 9 9 0 1 1 18 2Zm-53-82a18 18 0 0 1-17 18 83 83 0 0 1 2-36 18 18 0 0 1 15 18Z" transform="translate(0 -52)" style={{fill:"#f2f2f2"}}/> </g> <g id="stars"> <circle cx="606.1" cy="156.4" r="3.7" style={{fill:"#6c63ff"}}/> <circle cx="571.9" cy="67.8" r="2.2" style={{fill:"#f0f0f0"}}/> <circle cx="224.9" cy="491.8" r="2.2" style={{fill:"#f0f0f0"}}/> <circle cx="584.2" cy="279.5" r="2.2" style={{fill:"#f0f0f0"}}/> <circle cx="305.1" cy="298.4" r="3.7" style={{fill:"#6c63ff"}}/> <circle cx="266.9" cy="383.8" r="2.2" style={{fill:"#f0f0f0"}}/> <circle cx="486.9" cy="45.8" r="2.2" style={{fill:"#f0f0f0"}}/> <circle cx="357.9" cy="506.8" r="2.2" style={{fill:"#f0f0f0"}}/> <circle cx="325.9" cy="65.8" r="2.2" style={{fill:"#f0f0f0"}}/> <circle cx="381.9" cy="170.8" r="2.2" style={{fill:"#f0f0f0"}}/> <circle cx="296.2" cy="428.5" r="2.2" style={{fill:"#f0f0f0"}}/> <circle cx="549.2" cy="442.5" r="2.2" style={{fill:"#f0f0f0"}}/> <circle cx="437.2" cy="316.5" r="2.2" style={{fill:"#f0f0f0"}}/> <circle cx="494.2" cy="170.5" r="2.2" style={{fill:"#f0f0f0"}}/> <circle cx="597.8" cy="240.6" r="4.3" style={{fill:"#ff6584"}}/> <circle cx="423.8" cy="98.6" r="4.3" style={{fill:"#ff6584"}}/> <circle cx="423.8" cy="393.6" r="4.3" style={{fill:"#ff6584"}}/> </g> <path d="M691 470a8 8 0 0 0-7 6 7 7 0 0 0 0 2v12l9-9 10-11Z" transform="translate(0 -52)" style={{fill:"#6c63ff"}}/> <path id="ellipse_1" d="m719 533-43-2c-79-5-183-22-290-49s-207-60-280-93c-35-16-62-31-80-45-20-15-28-28-25-38 5-21 50-25 88-25v3c-52 0-82 8-86 23-4 18 34 47 105 79s171 66 279 93 210 44 289 49 125-2 130-21c4-16-22-38-72-64l1-3c37 19 79 46 74 68-3 10-16 18-40 22-14 2-31 3-50 3Z" transform="translate(0 -52)" style={{fill:"#6c63ff"}}/> <g id="smallGalax2"> <circle cx="681.3" cy="182.3" r="34.4" style={{fill:"#fff"}}/> <path d="M682 200a35 35 0 1 0 35 35 35 35 0 0 0-35-35Zm0 68a34 34 0 1 1 34-34 34 34 0 0 1-34 34Z" transform="translate(0 -52)" style={{fill:"#2f2e41"}}/> <path d="M651 243a1 1 0 0 1 0-1 34 34 0 0 1 8-28 1 1 0 0 1 1 0 1 1 0 0 1 0 1 32 32 0 0 0-8 27Z" transform="translate(0 -52)" style={{fill:"#2f2e41"}}/> </g> <path d="M717 318h-58a8 8 0 0 0-8 8v128a48 48 0 0 0 26 43l7-7 9-9 10-11 8-9 3-4c27-35 46-76 49-119a64 64 0 0 0-46-20Z" transform="translate(0 -52)" style={{fill:"#2f2e41"}}/> <path d="M719 345a15 15 0 0 0-10-4 14 14 0 0 0-9 3 5 5 0 0 0-1 1l-48 49-34 35a8 8 0 0 0-1 2 6 6 0 0 0-1 3 7 7 0 0 0 2 5l1 1 10 10a7 7 0 0 0 5 1 7 7 0 0 0 5-2l1-1 12-12 69-71a15 15 0 0 0-1-20Z" transform="translate(0 -52)" style={{fill:"#6c63ff"}}/> <path id="ellipse_2" d="M240 569c-36 0-69-1-98-3-39-4-70-9-91-16-24-7-36-16-37-27-2-21 40-41 75-54l1 3c-49 18-74 35-73 50 2 20 48 34 125 41 79 6 184 4 294-7s213-29 290-51c74-21 116-44 114-64-1-15-33-28-89-36v-3c41 6 90 17 92 39 1 11-9 22-30 34s-49 22-87 33a2037 2037 0 0 1-486 61Z" transform="translate(0 -52)" style={{fill:"#6c63ff"}}/> <circle id="smallGalax3" cx="529.4" cy="54" r="9.4" style={{fill:"#e6e6e6"}}/> <circle cx="19.1" cy="381.4" r="17.5" style={{fill:"#e6e6e6"}}/> <circle id="circle_1" cx="87.4" cy="228.9" r="17.5" style={{fill:"#6c63ff"}}/> <circle id="circle_2" cx="838.1" cy="382.4" r="17.5" style={{fill:"#6c63ff"}}/> <g id="smallPlanets"> <circle cx="127.1" cy="56.4" r="10.7" style={{fill:"#ff6584"}}/> <circle cx="77.1" cy="462.4" r="10.7" style={{fill:"#ff6584"}}/> <circle cx="807.1" cy="287.4" r="10.7" style={{fill:"#ff6584"}}/> </g> <circle cx="645.1" cy="546.4" r="17.5" style={{fill:"#e6e6e6"}}/> </svg> </div> </div> ); } In the above code i want to animate a planet ( Circle or Ellipse having id="circle_1") along a path ( id= ellipse_1 ) but the circle is not animating on given path as expected. here is the picture for reference i want circle to move along elliptical path as shown in picture. Note: Sorry for not giving codepen as i am working locally on my machine. Github Link: https://github.com/sibteali786/Portfolio_Animated Component Name: TextAnimation.js directory: src/components/Animated_components
-
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'm using pixi.js and gsap together in my project. GSAP handles animating my sprites along paths. Most of the time it works fine, but sometimes my sprite jumps to `{x: 0, y: 0}` at the end of a path. The example is using dummy data, but the issue happens thare as well. Am I using the gsap.to() method correctly? Thank you for any help!
-
So i would like to animate this model along a path: https://codepen.io/uiunicorn/pen/abJmVwo but it doesn't seem to work and i am getting this in console: Uncaught TypeError: Cannot assign to read only property 'rotation' of object '#<Group>' at Plugin._setterPlain [as rSet] (gsap-core.js:3367) at PropTween.render [as r] (MotionPathPlugin.js:301) at Tween.render (gsap-core.js:3163) at _lazyRender (gsap-core.js:187) at _lazySafeRender (gsap-core.js:193) at Array.updateRoot (gsap-core.js:2564) at _tick (gsap-core.js:1252) and ideas of what the problem is? here is the original pen that works: (my pen uses modules): https://codepen.io/uiunicorn/pen/zYZoYpV
-
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 state (the corrected initial layout), but again not working as expected. Any ideas? SplitText & MotionPath related: Right now the letter & word spacing is off. It's tight to the stagger values. So how can i maintain the default ones? (This animation is intended to work with words of different lengths). Is there a callback i could use onResize that would re-calculate the correct position of the letters? Any help in any of the above would be much appreciated Thanks in advance
-
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
-
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.)
-
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! Demos MotionPath Showcase MotionPath How-To Demos -
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!
-
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 sure what's going on. If i were to hazzard a guess it would be that the coordinates are correct, but the "handles" in the bezier curve are off?.
-
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 for this? Have a good evening,Detlev
-
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. Do you have any hints ? Thanks a lot
-
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! -
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 out how to get it to look like it is passing in front on the right side and staying behind on the left.
