PointC

Hi @ELMNTL 
 
Welcome to the forum. 
 
The easiest way to animate a dashed line is by using a mask. I have a tutorial on my training site about that technique. I think you'll find it helpful.
 
https://www.motiontricks.com/svg-dashed-line-animation/
 
Happy tweening and welcome aboard.

 

The 'cuts' in your path are because the stroke is overflowing the SVG.
 
Here's a little example. The SVGs are 100x100 with a circle radius of 50. I've outlined the SVGs with a red dotted stroke so you can see what's happening. You can see the circle with a fill pushes right up to the edge in the first SVG. Now adding a stroke will cause problems because strokes are center aligned. Meaning half of the stroke will be outside the viewBox. You can see the 20 unit stroke is partially cut off in the second SVG. The third SVG is the same as the 2nd but I've set the SVG overflow to visible.  Now you can see the whole stroke.
 

See the Pen c90655407d005eadb7af06e1941db0c7 by PointC (@PointC) on CodePen
 
So the answer is either setting your SVG overflow to visible or make certain your elements remain inside the SVG viewBox. 
 
In regards to your main question. You could set up the circle with a gradient stroke like this example. 

See the Pen QWpJdpz by PointC (@PointC) on CodePen
 
Another way would be to just use a rectangle in the background with a gradient fill which is then revealed by the stroke in the mask.
 
Hopefully that helps. Happy tweening.

 
 

Just my two cents, but with these circular orbits, I find it easier to use svgOrigin and just animate the rotation. (Not that there's anything wrong with using a motion path.) Here's a quick fork for you. You'd need to adjust the rotations to meet your needs, but it shows how you could do it without a motion path.
 

See the Pen 04c10b7a70911c7a16ccba3cdaf9587d by PointC (@PointC) on CodePen
 
Happy tweening.

 

Hi nep 
 
You said you want to move the mask from right to left  so I'm assuming this is a soft reveal of the image?
 
I'd agree with Jack and recommend an SVG mask. The pen Rodrigo pointed out is using a solid colored square as the mask, but we can add a black to white linear gradient to the square and get a nice soft edged reveal. Using GSAP we just need to animate the x1 and x2 attributes of the linear gradient:
TweenMax.to("#theGradient", 2, {attr:{x1:-800, x2:1}, repeat:-1, yoyo:true, repeatDelay:0.5, ease:Power2.easeIn}) // adjusting the x1 value in the tween can change the reveal. switch it to your liking // the closer you get to 0, the more abrupt the end of the reveal will be Here's a CodePen to get you started:
 
See the Pen yJjNOX by PointC (@PointC) on CodePen

 
Hopefully that gets you closer to your goal.
 
Happy tweening.

When everything is "under one roof" I find it so much easier since all the elements scale nicely together.
 
I'd recommend a simple rectangle in a clipPath which expands its height attribute at the same speed as the path morph. Here's a quick starter for you.

See the Pen 6ab4a2fbf5620f43c8894ea05eee9221 by PointC (@PointC) on CodePen
 
You can add the text to same group as the image so it's all revealed by the animating rectangle in the clipPath. You'll need to resize that rectangle to make it all pixel perfect. It's often easiest to pull it out of the clipPath and place it at the bottom of the SVG (so it's on top) for visual sizing purposes. Once you have the size right, pop it back into the clipPath and you're good to go.
 
Make sense? Happy tweening.

 

Hi @BrianCross 
 
If it's something GSAP will be animating, I always set its initial properties with GSAP as well. I think this should work for you.
 
gsap.set("rect", { scaleY: 0, transformOrigin: "center bottom" });
See the Pen 66a924c828d379b77b02351346376189 by PointC (@PointC) on CodePen
 
Happy tweening.

 

Hey @Jakebogan
 
For those types of animations I use the puppet warp tool in AI and usually get decent results with MorphSVG. It's all in how you set up the assets.
 
Here's a really quick demo.

See the Pen gOgGQrP by PointC (@PointC) on CodePen
 
Hopefully that gives you some ideas. Happy tweening.

 

Whoops. I think I only read half of your question.
 
For stuff like that I usually just clone the node and animate them both to an xPercent of -100. This is a demo from another thread, but shows the same basic idea. It just has a hover speed/slow effect.
 

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

 

Oh... I see. Yes - you'd add another tween to the timeline with the rotation of the kite and use the position parameter to start it at the correct point. 
 
Say you have a 2 second motion path animation and you want the kite to rotate 15 degrees at 0.5 seconds into that animation, you'd then write it like this. 
tl.to(yourKiteTarget, { rotation: 15 }, 0.5); More info on the position parameter.
Happy tweening.

 

Is this what you needed?

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

 

Hi @todd.eagle 
 
Welcome to the forum and thanks for being a Club member.
 
If I understand the desired outcome correctly, I'd probably just put the image inside the SVG. That way it all scales nicely together. Does that make sense?
 
Happy tweening and welcome aboard.

 

If I understand your question correctly, I think you're seeing the easing there. You'd need to set easing to "none" in order to space them out.
 
.to(section, { bottom: "120%", ease:"none" }) Is that what you meant?
 
Happy tweening.

 

Hi @jakob zabala 
 
It's usually best to create the timeline outside of your event handlers and then play()/reverse() on hover so you don't get those weird overwrites.
 
Make sense?
 
Happy tweening.

 

Hi @Caroline_Portugal 
 
It looks fine to me, but have you tried the slight rotation trick? rotation: 0.01 on your tweens?
 
Just an FYI - you can set a default ease and duration since they are all the same.
gsap.defaults({   ease: "none",   duration: 50 }); The duration should also be in the vars in GSAP 3. You can also use the set() method instead of those zero duration tweens.
https://greensock.com/docs/v3/GSAP/gsap.set()
 
Please see if the rotation trick changes anything for you. Others may jump in with additional ideas.
 
Happy tweening.

 

The problem here is you have multiple timelines fighting for control of the same element. This thread has a similar topic and may be helpful to read and check out the answer demo.
 
If you want to take a slightly different approach, you could change the text in your placeholder element rather than adding the extra divs. The text plugin is great for that sort of thing. I created a function for the mouseenter and mouseleave events. In the enter function I check if we have an active hover timeline. If there is one, the progress is set back to 0 so there are no weird overlaps. Then just a quick timeline creation and play. In the leave function it's just a simple reverse of the timeline.
 

See the Pen 6ef58b252a1b135fb2cad222407f79f5 by PointC (@PointC) on CodePen
 
Of course if you want to use jQuery, add the divs, etc. that is totally fine too. I just thought I'd throw out another idea. Hopefully it helps.
 
Happy tweening.

A few things. 
1. You need to load the drawSVG plugin.
2. Masks need to have a stroke of white and no dasharray.
3. You have a lot of code from my demo that causes errors because the elements are not there. (button, marker etc.)
 
I forked your demo, made those changes and commented out most of the code. I've set the mask path animation to yoyo so you can clearly see it working.

See the Pen 4293bde8c57ac4c848692ef8a7d7ca92 by PointC (@PointC) on CodePen
 
More info about masks can be found on my training site:
https://www.motiontricks.com/svg-masks-and-clippaths/
 
I'd also recommend going through my dashed lines tutorial which was mentioned above.
 https://www.motiontricks.com/svg-dashed-line-animation/
 
Happy tweening.

 

Hi @Oli28
 
Welcome to the forum.
 
I'm not quite sure what the final result should look like here, but you'll probably want to put those two tweens on a timeline. Your pen also wasn't loading GSAP and the CSSRule plugin. Here's a fork that is working and should get you started. From here you should be able to adjust the durations and percentages to your liking.
 

See the Pen 9060999ec705edea2807b824ddb6cf2d by PointC (@PointC) on CodePen
 
If you're just getting started with GSAP, I'd recommend:
 
 
Happy tweening and welcome aboard.

 

Hi @hatim 
 
hmmm... yeah -  I would expect that set() to fire after you resume. I'm not 100% sure but I'd guess that the addPause() and the set() fire on the same tick since the set() is a zero duration tween. I just added a position parameter as a quick experiment and it worked fine.
 
t.set(".box", { backgroundColor: "red"}, "+=0.01"); I think we need to ask @GreenSock if this a bug or there's another reason for the behavior. He should stop by a little later with some more info.
 
Happy tweening.

 

Hi @leonardpbd 
 
Welcome to the forum.
 
There would be a few ways to create that animation. I think the simplest approach would be to use a set() for the scaleX when the boat reaches the end of the first animation. For the rocking I would suggest a separate tween that just repeats. It doesn't need to be part of the timeline. Here's a fork with those changes.
 

See the Pen 8fbce57328d58f78ed650789f756a4eb by PointC (@PointC) on CodePen
 
If you're just getting started with GSAP, I'd recommend:
 
Our very own @Carl also has loads of training materials to get you started.
https://www.creativecodingclub.com/courses/FreeGSAP3Express?ref=44f484
 
Hopefully that helps. Happy tweening and welcome aboard.

 

Just my two cents but I'd take advantage of the .wrap() utility method and target the container and the image in the same tween. You could check the index of the loop target and flipflop the .wrap() array depending on whether the index is odd or even. That way you wouldn't need to add the extra class to your HTML markup. You can then add a bunch of copies of the targets without worrying about the left/right class. Maybe something like this:
 

See the Pen 14db07e23ea1235bc448c229a757098c by PointC (@PointC) on CodePen
 
More info about .wrap()
https://greensock.com/docs/v3/GSAP/UtilityMethods/wrap()
 
Use it or not. Just a thought. YMMV.
 
Happy tweening.

 

Have you tried offsetY?
 
scrollTo: {y: "#yourID", offsetY: 100}  

Sure. You can map the rotation to any other animation or value you like. I actually have an entire tutorial about mapping dials to change HSLA color values. 
https://www.motiontricks.com/hsla-color-dials-with-maprange/
 
There are multiple demos in the tutorial, but this is the final result.

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

 

Hi @scavaliere 
 
Welcome to the forum and thanks for being a club member. We appreciate it.
 
If you make this change to your code, it should work as expected.
onEnter: () => document.getElementById("background_video").play(), onLeave: () => document.getElementById("background_video").pause(), onEnterBack: () => document.getElementById("background_video").pause(), Even more concise.
const video = document.querySelector("#background_video") ScrollTrigger.create({   start: "top center",   end: "bottom bottom",   trigger: "#video",   onEnter: () => video.play(),   onLeave: () => video.pause(),   onEnterBack: () => video.pause(),   markers: true }); Happy tweening and welcome aboard.

 

Hi @Jakebogan 
 
Welcome and thanks for being a Club member.
 
That morph is behaving as I'd expect. You have some funky transforms on the group and a little bit of an odd viewBox size. Here's a fork of your pen showing the circle target and where it resides. I've outlined the SVG with red so you can see it better.
 
See the Pen 01b4f32f5e6659d58d0d961600889795 by PointC (@PointC) on CodePen

 
The secret to SVG vector prep is using a background rectangle the same size as your project. I have a whole post about that here.
https://www.motiontricks.com/use-background-rectangle-with-svg-exports/
 
Hopefully that helps. Happy morphing.

 

Hi @RaúlSan.
 
Welcome to the forum.
 
Did you mean it appears and then the whole thing continues to rotate? Like this?

See the Pen 5afd1ac07bef5ca027f83a552e70e11c by PointC (@PointC) on CodePen
 
Does that help? Happy tweening.