PointC

I think I'd probably put it into a function that called itself after each iteration. Maybe something like this.
 

See the Pen 8a208b01227fead3d30916074ca3a1a5 by PointC (@PointC) on CodePen
 
Happy tweening.

 
 

Hi @Durkan Group 
 
Welcome to the forum and thanks for being a Club member.
 
That would probably be a bit much for SVG to handle. Looks like that site is using some WebGL and PixiJS. 
https://pixijs.com/
 
Happy tweening.

 
 

It took me a minute to see what was happening because the original TweenMax version was only showing 2 child nodes and the new GSAP3 version was showing 4 child nodes.
 

 

 
Looking further I see the HTML in the original demo is all minified whereas the new version is all formatted and pretty so it's picking up the space as a text node I guess. If you use CodePen's "format HTML" feature on the original version, it will break too.
 
Best  to use children or querySelector. 
 
Happy tweening.

 

Hi @PixelDynamics 
 
Welcome to the forum.
 
I think I'd just add a pseudo-element to that div for the underline effect. Something like this.
See the Pen aa65e5941028e17a675bfb20504f3867 by PointC (@PointC) on CodePen

 
Hopefully that helps. Happy tweening and welcome aboard.

Hi @maddylobb 
 
Welcome to the forum and thanks for being a Club member. We really appreciate the support.
 
Looks like you're running into some .from() tweens and an immediateRender issue. My advice would be to set each path to drawSVG:0 and then then use .to() tweens. Here's that change.
 

See the Pen e600a675c2e25009c37c3b7880e1d236 by PointC (@PointC) on CodePen
 
An even easier approach with much less code would be to use a stagger. Here's that change.
 

See the Pen fca02b2075d4760899cfec8efb693738 by PointC (@PointC) on CodePen
 
Hopefully that helps. Happy tweening and welcome aboard.

 

I'm not quite sure I understood the desired results, but here's a fork with each path on its own timeline so it can restart before the others finish.
 

See the Pen c73801de29974fd27cf355bba4a1905b by PointC (@PointC) on CodePen
 
Is that what you meant?
 
Happy tweening.

 

Hi @tjefe 
 
Welcome to the forum.
 
Masks and/or clipPaths would be the way to go here. The handwriting can easily be handled with the DrawSVG plugin.
 
 
If your stroke width is the same width throughout the letters, you can animate the stroke itself. I have a couple tutorials about that.
https://www.motiontricks.com/animated-handwriting-effect-part-1/
https://www.motiontricks.com/animated-handwriting-effect-part-2/
 
If the stroke width of the letters is variable, you'll want to mask them and use DrawSVG to animate the mask. Tutorials about that here:
https://www.motiontricks.com/svg-masks-and-clippaths/
https://www.motiontricks.com/svg-calligraphy-handwriting-animation/
 
The trick is having a duplicate set of the letter paths in your mask (or clip-path) and animating the opacity of those paths once the lettering is done drawing itself. Then scale both groups of paths up at the same time to reveal the underlying image. Something like this:

See the Pen zYdPXXa by PointC (@PointC) on CodePen
 
Hopefully that gets you started. Happy tweening and welcome aboard.

 
PS The DrawSVG plugin is a Club perk. More info:
https://greensock.com/club/

I don't think that grouping trick is gonna work in Firefox. I'd probably use the plain circle as a proxy like this. YMMV.
 
See the Pen aa3b8fdadd3578ddd7844143265a4b92 by PointC (@PointC) on CodePen

 

Seems okay to me with svgOrigin.
 

See the Pen c6c91bf19db5378f18eac5c9f4ec7810 by PointC (@PointC) on CodePen

Hi @Tagliavia 
 
This should work for you.
Draggable.create("#yourTargetBox", {   onDragEnd: () => {     gsap.to(this.target, { x: 0, y: 0 });   } }); Happy tweening.

Hi @joelreed 
 
Welcome to the forum.
 
I'd probably do something like this.
See the Pen 505bddb65f7a38b7cf4e482e5b41d709 by PointC (@PointC) on CodePen

 
Happy tweening and welcome aboard.

Sure. An easy way would be to use .addPause() and then call for the other timeline to start playing. 
https://greensock.com/docs/v3/GSAP/Timeline/addPause()
 
There are also other ways to make it happen, but we'd need a minimal demo to see exactly what you're trying to do.
 
Happy tweening.

Welcome to the forum.
 
Probably easiest to just wrap that first text in a <span>. Here's a fork of your pen with that option and I've also updated everything to GSAP3 syntax.
 
See the Pen 39240edef3cb0cc070c789e9074aba45 by PointC (@PointC) on CodePen

 
Happy tweening.

 

I think you're looking for the ScrollTo plugin.
 
 
https://greensock.com/docs/v3/Plugins/ScrollToPlugin
 
Happy tweening.

 

Since you're adding the ScrollTrigger to a timeline, you need to write it like this.
 
gsap   .timeline({     scrollTrigger: {       trigger: "#action-inventory",       start: "center center",       toggleActions: "restart none none restart",       markers: true,       onEnter: () => console.log("enter"),       onLeave: () => console.log("leave"),       id: "act-inventory"     }   })   .to("#path-link-1", {     strokeDashoffset: 0,     duration: 3   }); Also take a look at drawSVG. It'll make your life easier.
Happy tweening.

 

Hi @Sibteali Baqar
 
Welcome to the forum.
 
Looks like the problem is that your orbit path (#ellipse_1) is a filled path so the circle wouldn't animate along it as you expect. I've created a little demo using your SVG. The path you were using has no fill and a red stroke. See how the circle would orbit along the outside of that path? Probably not what you want here. I added a simple ellipse and converted it to a path to show you that everything is working correctly with the MotionPathPlugin. I'd think an actual ellipse would be the easiest method here.

See the Pen 576a99f87ecf0a9aea713b8beb894f00 by PointC (@PointC) on CodePen
 
Hopefully that helps.
 
If you have additional questions, you'll need to create a demo. Just strip it down to the minimum like I did above and we'll be able to provide the most accurate and helpful answers.
 
Happy tweening and welcome aboard.
 

Maybe this would work for you.
 
gsap.set(".drag", {   xPercent: -50,   yPercent: -50 }); Happy tweening.

I'll throw my two cents in too.
 
You could just move the first arrow to a yPercent of -100 and then animate each one to a relative yPercent of +=100. 
 
See the Pen 77a4780b72feb6ee6c0ab901c1511aea by PointC (@PointC) on CodePen

 
Happy tweening.

 

There would be several ways to handle this animation, but I think an easy solution would be to use overflow:hidden on your parent container which is animated from a width of 0 and then animate the two child divs (image and text) accordingly. Here's a fork of your pen. I've added some padding to the child text group so it doesn't get clipped when the image appears. Hopefully this gets you started in the right direction. Happy tweening.
 

See the Pen c021734385ff870f52b9c574cfef5703 by PointC (@PointC) on CodePen

Sounds similar to this:
 

On second thought I guess you could reverse the first tween and make this happen. Maybe something like this:

See the Pen 7658a5f21db59cb183374e8fbd04e474 by PointC (@PointC) on CodePen
 
If you want to go the SplitText route, we do have several 'typewriter' themed threads. Here are a couple.
Hopefully that helps. Happy tweening.

 

I'd be remiss if I didn't also mention that you can use GSAP's toArray() utility method too.
const targets = gsap.utils.toArray(".nav-link"); targets.forEach((obj) => {   obj.addEventListener("click", (e) => {     e.preventDefault();     tl.reverse();   }); }); Happy tweening.

Please try this on line 9.
  tl.from("#line",{duration:2, drawSVG:0, immediateRender:false},"<");  

Hi @trousersthecat 
 
Welcome to the forum.
 
Since you've specified the pathLength attribute as "1", you need to write your GSAP tween like this to go from 0 → 1.
tl.fromTo(pj1Paths, { drawSVG: 0 }, { duration: 6, drawSVG: 1 }); Or you can remove that attribute from the elements and your original tween will work correctly.
 
Just FYI, the duration should be in the vars for GSAP 3 syntax.
 
I hope that helps.
 
Happy tweening.

 

The problem here is you can interrupt the tween at any time and then start a new tween to 360 with a duration of 3 seconds. So if the current animation is at 330 degrees and you interrupt it with a click, it will then animate the final 30 degrees in 3 seconds making it seem like slow motion. In this case I think using a .fromTo() tween would be the easiest fix.
 

See the Pen 6ef0faf495c9000cf1f553f5f7bbb773 by PointC (@PointC) on CodePen
 
You can also create your tweens/timelines outside of your event handler and simply play/reverse/pause etc. them with your clicks.
 
Hopefully that helps. 
 
Happy tweening.