PointC

Hi @digableinc Welcome to the forum and thanks for joining Club GreenSock. I'm a fellow AE user too. Masking an image is no problem. The easiest way would be to add the image to your SVG (so it scales nicely) and then create a mask for it. Mask color is important. White will show everything. Black will hide everything. You can use gradients in masks too. Here's a fork of your pen: We had another question recently about showing a full screen background image and this was my mask solution for that thread: Here's a good resource for some additional learning about masks and clip-paths. https://css-tricks.com/masking-vs-clipping-use/ Hopefully that helps. Happy tweening and welcome aboard.

I'm not sure what you mean by scroll, but I assume it's a 'type from the center' animation? You can do that with SplitText. Maybe something like this. Happy typing.

GSAP can tween anything. Check out this post where @Carl shows how it was used for Falcon Heavy's side boosters.

Thanks for the demo. Yes, it's an overwrite situation as @GreenSock thought. Drop this code into the beginning of your JS and you'll see the difference. TweenLite.defaultOverwrite = "false"; It doesn't make any difference that this is a DrawSVG tween. The same thing can happen with any type of tween. When you create a fight and overwrite a tween you end up with a new starting point. I think you're trying to have the tail end of those strokes 'chase' the other end off screen? If so, you're basically trying to create two DrawSVG tweens on the stroke at the same time and that won't work. You'll probably have to rework this a bit or use a mask to erase them. Happy tweening. Edit: DOH! Jack already replied.

I'm not sure I understand the question and there is no demo included, but it sounds like you'd want to look at the refresh() method. http://scrollmagic.io/docs/ScrollMagic.Scene.html#refresh I think all of your questions since joining the GS forum have been about ScrollMagic and I've answered several for you, but ScrollMagic is not a GreenSock product. They do have a support area here: https://github.com/janpaepke/ScrollMagic/issues We're happy to help with GSAP related questions and problems. Including a demo will get you the best possible answers. Happy tweening.

appendMultiple is indeed deprecated and replaced with add().

Looks like a neat script, but it's $49 for unlimited commercial projects. SplitText can do all that (& more). IMHO, it seems like Club GreenSock would be a better bang for the buck since you'd get a bunch of bonus plugins in addition to SplitText. https://greensock.com/club https://greensock.com/SplitText If you haven't seen them yet, here are a couple threads showing a typing effect with SplitText. But as @Carl mentioned, you'll probably have better luck with their support channels. https://github.com/alexmacarthur/typeit/issues

Sounds good. It's officially item 1,437 on my 'to-do' list so I may not get to it until the year 2029. Unless you're gonna let me use your Blaketrix headjack so I can learn it in a few seconds.

My apologies. When I see React in the thread title I just assume the Rodrigo React Signal has been fired up and my services will not be necessary.

That's neat. I must confess - I was not familiar with the .onOverwrite property before now. I guess I have to get out of the TweenMax section of the docs and visit TweenLite once in a while.

I'm not seeing anything that shouldn't work with restart(). Are you saying the whole timeline doesn't play on restart()? Or the timeline plays, but doesn't include the nested timeline returned from your makeWaves() function? Maybe you could put together a CodePen demo, but just use a few SVG lines, rectangles etc. instead of the actual client assets. Just enough to show the problem would be great.

Brilliant @Sahil!!! That made my morning. ?

You'll need to use call() instead of add(). https://greensock.com/docs/TimelineMax/call() Happy tweening.

Sorry, I'm not seeing that in Chrome or any other browser. Maybe someone else can see it? In any event, it's not related to GSAP. I wish I could be of more help. Happy tweening.

I'm not seeing any white space. In what browser(s) are you seeing this?

Hi @jsciumi The problem is your intro() timeline. In that one you're targeting the individual characters with a staggered color animation. So when you go to animate the color of the words (the parent div of those characters) it won't work correctly because you've set the color at a more specific level. One fix would be at the end of your intro() timeline you can use clearProps to get rid of that color on the characters. Hopefully that helps. Happy tweening.

This thread is full of good info about plotting along a Bezier curve. Maybe it can help. It's not exactly what you need since you don't want to animate the position, but this thread also had some neat Bezier curve ideas in it. Hopefully that helps a bit. Happy tweening.

You can make it work in Safari with @Sahil's trick if you set the SVG width/height to 100%. I'd also note that none of the above solutions will work in Edge. In general I'd recommend avoiding blurs unless they are absolutely necessary to the desired end result because they are so expensive. (and a pain to get working correctly) Happy tweening.

You could make it work with the core tools. For the motion path you'd create your own x/y coordinates to feed into the Bezier plugin. For the DrawSVG part you could get the path length and animate the strokeDashoffset. Club plugins just make your life easier and deal with browser inconsistencies, but yeah you can make it happen with the free tools too. Happy tweening.

Here's a basic example. You can see the MorphSVG plugin is used to create the Bezier motion. I've also added a drawing effect using the DrawSVG plugin. (another Club perk) Hopefully that helps. Happy tweening.

PS I forgot to mention that the MorphSVG plugin is one of the many time-saving plugins included with Club GreenSock membership. More info: https://greensock.com/club Happy tweening.

Hi @mechwd Welcome to the forum. Yes, that would be easy to do with GSAP. You'd have most everything you need by loading TweenMax. The other plugin that would make it super easy to animate that marker along the path would be the MorphSVG plugin. It has the MorphSVGPlugin.pathDataToBezier() method which feeds into the Bezier Plugin. (I'm assuming that progress bar path is a SVG) More info: https://greensock.com/BezierPlugin-JS https://greensock.com/morphsvg-update This is a good pen to view for info about what's all included. Happy tweening.

I'd certainly recommend what Jack has done in his answer, but another way to do it would be setting the SplitText divs to position:absolute and animating the left position. This isn't as versatile and animating x/y instead of left/top is usually preferable, but depending on your animation, this could work too. Happy tweening.

Hi @2sweedy Welcome to the forum. GSAP doesn't have a coding area on the website. For demos most people use CodePen, but there are other options like JSFiddle, Plunker and CodeSandbox. Those are just places online to write code. For local work you'll just download the GSAP files or link to the CDN and make all the animations you like in your local code editor. This is a great pen to show what's included: When making demos for your GSAP questions on CodePen, it's often easiest to fork an existing pen that loads all the GSAP goodies. This is a good one to start with for your projects. https://greensock.com/try-plugins You can also create your own templates in CodePen for future questions and demos. Hopefully that helps a bit. Happy tweening and welcome aboard.

Happy to help. When you have multiple elements that need to do the same thing it's usually best to give them a class and use that as your target. That being said there are many ways to target all three paths from your demo and have them start at same time. You can add all three with an array like this: tween_journey.to([$journey1, $journey1_2, $journey1_3 ], 1, { strokeDashoffset: 0, ease: Linear.easeNone }); You could also use three separate tweens and add the position parameter of 0 to have them all start at the same time like this (this is what @mikel was talking about): tween_journey.to($journey1, 1, { strokeDashoffset: 0, ease: Linear.easeNone }, 0); tween_journey.to($journey1_2, 1, { strokeDashoffset: 0, ease: Linear.easeNone }, 0); tween_journey.to($journey1_3, 1, { strokeDashoffset: 0, ease: Linear.easeNone }, 0); Again, using a class is the most efficient way to do it, but I wanted to point out the other ways to target the elements. The position parameter is best when you have different tweens, but want them to start at the same time. Hopefully that helps a bit. Happy tweening.