Stroke along path with image ?

[Lynx]

Hi, are there any examples of stroking a curve along a bezier / path using an image, say for example to create a vine ?

[Diaco]

Hi Lynx 

 

i think this can help you : 

See the Pen LEjQer by MAW (@MAW) on CodePen

[Lynx]

I suspect an actual graphic won't stroke along a path very well !

[Diaco]

pls check the BezierPlugin Doc. : http://greensock.com/docs/#/HTML5/Plugins/BezierPlugin/

 

if you want to create a vine with leaves i think this's the right direction ... in the other hand you can use SVG and GSAP DrawSVG plugin too .

[Lynx]

What am I doing wrong as a starting point ?

[Diaco]

Hi 

 

- your first mistake is using jsfiddle instead of Codepen ... ( just kidding   )

 

 

- you need to add External Resources in jsfiddle via https protocol , pls try this :

https://cdnjs.cloudflare.com/ajax/libs/gsap/1.17.0/TweenMax.min.js

- for left /right , you need to set position:absolute , that's better to use x,y

 

 

- why you don't use GSAP selector instead of document.getElementById("one") ! this is not a problem just that's so easy and shortest way . pls check this out : http://greensock.com/docs/#/HTML5/GSAP/TweenLite/selector/

 

 

check this out : https://jsfiddle.net/oovx73xs/

[Lynx]

I did a few mistakes, position:absolute for one, thanks for the refresher

Everything works, how can I make it a series of text, as a vine would work ? Remember this is just a placeholder, not going to make a vine of text Just a note, other coding forums sometimes takes things a little too literal

[Diaco]

your answer is in the first pen/answer ... you need a js loop , and can you can try something like .staggerTo() too

[Lynx]

for (i=10;i<10;i++) {TweenMax.to(document.getElementById("one"), 5, {bezier:[{left:200, top:400}, {left:50, top:0}, {left:35, top:12}], ease:Power1.easeInOut})};

 ?

[Carl]

Not sure what you are asking, but it looks like each iteration of that loop is doing the same exact thing.

The point of a loop would be to use new left and top values in each tween.

 

A CodePen demo would help you and us see if what you are suggesting works or not.

[Lynx]

The fiddle is in the first post. I posted only the code, the loop I posted in incorrect, in other words, it won't do anything.  I want to know where I went wrong ?

[Carl]

I'm having trouble understanding what you mean by

 

how can I make it a series of text, as a vine would work ? Remember this is just a placeholder, not going to make a vine of text 

 

anyhow, this is how you could stagger multiple text items along the same path

https://jsfiddle.net/63gzy6h9/1/

 

Feel free to re-word your question or provide an image if you think that would be helpful.

[Lynx]

Carl you example shows a few words following a path, I want a growing effect along a path.  The only thing I didn't mention in post #7 was the word growing, other wise the rest of that post remains the same, using words, as a growing effect as mentioned in that post as an starting example. I want to say similar to illustrators blend paths, I don't want to make confusion.

[Carl]

I added growing https://jsfiddle.net/63gzy6h9/3/  it still doesn't really convey vines or anything like your description to me. 

 

I don't know much illustrator. Please provide and image showing the words in beginning of animation, middle of animation, and end of animation so that we can visualize exactly what you want. To be fair it sounds quite complicated and I can't guarantee its the type of thing we can build for you, but I'm sure it would help advise you better. 

[Lynx]

Easy, how does a tree branch grow ! Take a word, for example, apple and make a path of the word, which would consit of hundreds duplicates of the word apple, and that would form a solid path.

[Lynx]

Look at number eight on this page.  The only difference is, I need control over the path width.

[Carl]

Our DrawSVGPlugin (which Diaco recommended in post #4) is designed exactly for the type of animation in the demo you referenced.

 

https://greensock.com/drawSVG

 

However I am not sure how you are going to do a variable width stroke. I'm still a little lost on how you would use 100 copies of the word Apple.

[Lynx]

However I am not sure how you are going to do a variable width stroke

 

 

This would be the only thing, GSAP can't adjust the width ?

Couldn't you tween the stroke width ?

What about this;

selector {stroke-width:20px}

"           "{stroke-width:30px}

"           "{stroke-width:40px}

 

Then tween using the same selector using a SVG path?

[Diaco]

• Lynx

 

Carl is completely right , GSAP tweens property , we can't change web/browser standards , pls check the SVG stroke limitations / basics . i think you need to follow my first answer codepen demo .

 

could you provide a image or a live example of what you looking for !?

[Lynx]

See how the thickness changes, that is what I hope can be achieved with GSAP ?

[Lynx]

I see it's a limitation of SVG, bummer.  One problem with Diaco example, if you increase the stroke width in the style, you see the path consist of multiple lines joined together, can this be smoothed out ?

[OSUblake]

Hi Lynx,

 

I remember you saying that you don't know how to use the canvas, but doing something like this is better suited for the canvas. In fact, most of the questions you ask seem to be geared towards something that you would do with the canvas. With the canvas you're working with pixels instead of elements, so it's much easier to manipulate what is being displayed. You can even do things like stroking a path with an image.

 

Here's an example using PIXI's rope mesh, which allows you to draw a texture across different points. It's using an actual image, which is just a simple triangle, but by changing the the position of the points, we can turn it into a growing vine.

 

See the Pen GJEwpQ by osublake (@osublake) on CodePen

[Lynx]

OSUBlake - If I recall, you mentioned it may be hard to implement this on a page ?

 

Not Growing as in, scaling growing, growing as in literally growing, like how your finger grows, or a branch on a tree grows.  A branch on a tree starts off short, then as the tree ages it gets longer.

[OSUblake]

I said that as a word of warning because there was some advanced stuff going on. It's definitely not something I would recommend somebody who isn't familiar with canvas to start out it with. If you understood what was going on in the code, then please don't let what I said hold you back. If not, I would recommend starting out small by learning the basics at places like HTML5 Canvas Tutorials or Jenkov. Once you get the basics down, start forking some demos and see what you can do. 

 

And the purpose of my demo was to show that you can transform an image into a stroke. I used scaling because it was easiest way to make it look like it was growing. You can move the points around to do whatever you want. You can even swap the textures out.

[Lynx]

I do have some material on canvas, I never read

 

From my perspective, canvas is coding what photoshop does, except for the web.  Unless I want a components effect, GSAP can do such stuff, otherwise, canvas is the best alternative.