16 Replies Latest reply on Aug 25, 2017 7:05 PM by Rick Gerard

    Gradient Along Stroke

    nickn35634941 Level 1



      Is there a way to create a gradient which follows the shape of a stroke?

      I was googling this, saw that someone said to use "Gradient Stroke", I tried this but was surprised to see this has a start and end point, which means that it in no way creates a gradient along the stroke, it just creates a gradient which is masked by the stroke.

      Am I using it wrong, or is there no way to create a gradient along a stroke?

      I am ideally trying to create a gradient which starts at the end point, or "trim" point so it stretches/moves/offsets as the end point grows along a defined path.

      I made some examples in c4d to show what I mean:

      gradient trace.gif

        • 1. Re: Gradient Along Stroke
          Mylenium Most Valuable Participant

          AE doesn't have any such feature. You have to apply multiple instances of normal strokes and blur them together using Vector Blur/ Motion Blur, use the Vegas effect or similar convoluted techniques. however, since you seem to have figured out how to use transparency textures/ Alpha textures in C4D, you might do it just as well there with much more control, including using Sketch & Toon, if you have it or refining your geometry-based approach...



          • 2. Re: Gradient Along Stroke
            nickn35634941 Level 1

            Oh dear, I see, thanks. I was going to do it in C4D but wanted to check if its possible in AE first, it seemed logical that there may be such a feature. Using multiple strokes might not look too bad in my use case.

            I also found a tutorial using omino plugin to deform a layer along a path which seems like another good alternative:

            After Effects Tutorial - Bend Layers Along Paths in After Effects Part 1 - YouTube

            • 3. Re: Gradient Along Stroke
              Kyle Hamrick Adobe Community Professional

              AE actually does have this feature, but you have to think outside the box a bit.


              Create a text layer with a bunch of periods. Font choice will determine whether it's rounded or flat-ended.
              Draw your path, set the text to follow that path.
              Compress the tracking until it's a solid line.
              Add a text animator for opacity (set to zero), set the shape to Ramp Up or Ramp Down as desired.


              You can now animate along the path by keyframing First Margin/Last Margin, and/or add another Opacity animator to control what you'd call "Trim" if this were a shape layer.


              [Bonus: if you enable per-character 3d and use either the C4D or Raytrace renderer... you've got a fully native 3d version of this thing.]

              2 people found this helpful
              • 4. Re: Gradient Along Stroke
                nickn35634941 Level 1

                That is an awesome idea! very crafty!

                • 5. Re: Gradient Along Stroke
                  Kyle Hamrick Adobe Community Professional

                  As you may have guessed, this is also the secret recipe for a tapered stroke. Just swap in Scale for that first Opacity.



                  "What are the most under-appreciated layers in AE?"
                  Tapered Stroke.gif

                  2 people found this helpful
                  • 6. Re: Gradient Along Stroke
                    Szalam Adobe Community Professional & MVP

                    There's a second recipe for a tapered stroke, but I like the text layers one you mention better. It's a lot less resource-heavy.

                    • 7. Re: Gradient Along Stroke
                      nickn35634941 Level 1

                      that looks really nice too, loads of freedom to experiment now : )

                      • 8. Re: Gradient Along Stroke
                        Kyle Hamrick Adobe Community Professional

                        Ha, yes! Jake and I actually sat together at lunch at a conference last year, and amazed one another with the techniques we each came up with to get to essentially the same point. They both have their use - I believe his aim was to be able to make this work with Rubberhose, which mine won't do.

                        1 person found this helpful
                        • 9. Re: Gradient Along Stroke
                          Roei Tzoref Adobe Community Professional

                          working with text layer's path is also a neat way to create adjustable arrows in Ae, demonstrated splendidly in the following video by Mikey Borup that also gives away a preset for free and demonstrates how it is built step by step:


                          since bending layers along a path is not supported yet in Ae, as long as you create your element with fonts (or maybe even create your own font for this), you can use the text path workaround.


                          1 person found this helpful
                          • 10. Re: Gradient Along Stroke
                            Rembot2000 Level 1

                            Would you mind sharing your c4d file? Im setting up something similar and curious how you set yours up.

                            • 11. Re: Gradient Along Stroke
                              Kyle Hamrick Adobe Community Professional

                              I love using text layers for this kind of stuff, but there are two 3rd party solutions for warping layers along a path. Omino Snake, mentioned above, and then a fairly new plug-in named Bao Boa, which does the same thing as Snake, but is objectively better in every way, IMO.

                              • 12. Re: Gradient Along Stroke
                                Kyle Hamrick Adobe Community Professional

                                Which of us are you asking?

                                • 13. Re: Gradient Along Stroke
                                  Rembot2000 Level 1

                                  Hi, well actually I followed your solution and that is basically what I am after! Think outside the box indeed! I do like being able to solve the problem in ae so hopefully i can use this solution. having a c4d solution would also be nice also, just in case. i think i have the basic build, a plane spline wrapped to a curve and animating offsets? though i could use some advice on the opacity falloff bit. thanks!

                                  • 14. Re: Gradient Along Stroke
                                    nickn35634941 Level 1

                                    Hi Rembot2000


                                    In c4d is very simple, draw your spline, put in sweep nurbs, animate the start/end. then apply a material containing a gradient to the sweep nurbs. In my example I put the gradient shader in the alpha channel in the material.

                                    Because the sweep nurbs object has it's UVWs mapped along the stroke by default, so too does the gradient follow it that way.

                                    Can send scene file later if you think you'll need it.

                                    • 15. Re: Gradient Along Stroke
                                      theangietaylor Adobe Community Professional

                                      Have you tried using a Gradient Stroke on a Shape layer and then using Trim Paths operator on it?

                                      • 16. Re: Gradient Along Stroke
                                        Rick Gerard Adobe Community Professional & MVP

                                        To find gradient stroke click the add button in the shape layer and look here:

                                        Screen Shot 2017-08-25 at 6.23.36 PM.png

                                        Unfortunately the gradient does not follow the path in AE. Your only options are Linear and Radial.


                                        It would be great if Gradient stroke worked like it does in Illustrator so you could follow the path like this:

                                        Screen Shot 2017-08-25 at 6.35.13 PM.png

                                        For some projects requiring animating a path with a gradient applied I'll set up a starting and ending path in Illustrator, apply a blend with the matching the number of frames to the time I need for the animation, expand the blend to elements, release to layers, import the AI comp into AE as a comp and sequence the layers. For other projects I will use some of the techniques described in this thread.