Text Animation

[silverd]

Hello

thanks for your work it's so great

i just have a question i would like to do a animation from this : http://csswarp.eleqtriq.com/ to the text not curve (standard)

how i can do this ? Use "straggerFrom" for all letter ? any ideas ?

 

thanks for help

[Carl]

something like this?

 

http://codepen.io/GreenSock/pen/8afe72688e3d841233fd855a010c7af0

[silverd]

Yes a little

but i would like to start from the arc text (your finish) to inline text standard

it's maybe the same think in the other way

I would like to beziers curves so that they become flat (inline)

as a Arc to become a line but with text

 

Maybe i am not very clear

[Rodrigo]

Hi,

 

Perhaps something like this, but instead of going from one bezier to another, you could use a from instance, like that the text will be rendered in the bezier and then go to the flat inline text:

 

See the Pen Aydqu by rhernando (@rhernando) on CodePen

 

Rodrigo.

[silverd]

Yes like that

I can put in place of the square, a letter from my sentence and return to a straight line like that, you think?
Because in fact I would like to make an animation from a text on a path, which follows the shape of shell and return to a normal text line

 

Thanks

[Rodrigo]

Sure thing, a letter inside a div element should do it.

 

Now I would recommend you using SplitText, it'll save you a lot of time and you can participate in the Splittext contest and maybe win a Club Greensock membership, see more here:

 

http://www.greensock.com/splittext/

 

Keep in mind that the bezier animation in the sample uses x and y transforms instead of top and left, therefore the document's flow is not affected.

 

I created a simple codepen, feel free to fork it, perhaps if you use it as a starting point using the SplitText tool and get something cool going you could win the contest :

 

See the Pen wdbLx by rhernando (@rhernando) on CodePen

 

Rodrigo.

[silverd]

Thanks

Yes i am going maybe try the contest

i had thinking also use SplitText i m already club member but the animation is for a customer maybe and i don't want put this plugin in the package it's normal

i saw the new video on SplitText yesterday it's awesome

[silverd]

Hi again

 

I have a question in your code you use path with x and y

but when I generate my path in canvas i have this :

 ctx.save();
      ctx.beginPath();
      ctx.moveTo(7.1, 217.8);
      ctx.bezierCurveTo(-10.4, 157.9, 4.4, 87.8, 59.7, 41.1);
      ctx.bezierCurveTo(167.9, -50.4, 242.2, 40.0, 242.2, 40.0);
      ctx.lineTo(248.1, 38.3);
      ctx.bezierCurveTo(253.0, 38.3, 279.1, 50.2, 284.4, 57.2);
      ctx.bezierCurveTo(289.6, 64.2, 326.8, 88.5, 326.8, 88.5);
      ctx.bezierCurveTo(326.8, 88.5, 356.4, 78.3, 362.3, 82.6);
      ctx.lineTo(381.2, 105.8);
      ctx.bezierCurveTo(381.2, 105.8, 402.6, 117.5, 394.1, 158.6);
      ctx.bezierCurveTo(394.1, 158.6, 402.1, 189.6, 376.4, 212.0);
      ctx.lineTo(351.9, 233.9);
      ctx.bezierCurveTo(351.9, 233.9, 326.7, 265.4, 325.7, 271.3);
      ctx.bezierCurveTo(324.6, 277.2, 327.9, 281.1, 327.9, 281.1);
      ctx.bezierCurveTo(291.4, 309.8, 235.9, 357.6, 132.7, 336.5);
      ctx.bezierCurveTo(73.9, 324.5, 27.2, 279.2, 8.9, 223.8);
      ctx.lineWidth = 0.3;
      ctx.strokeStyle = "rgb(255, 0, 0)";
      ctx.stroke();
      ctx.restore();

and in svg format I have this kind of code :

<path fill="none" stroke="#FF0000" stroke-width="0.2728" stroke-miterlimit="10" d="M290.514,343.786
	c-17.428-59.95-2.708-130.075,52.588-176.768c108.298-91.447,182.549-1.122,182.549-1.122l5.886-1.62
	c4.889,0,31.048,11.87,36.288,18.88c5.234,7.015,42.408,31.286,42.408,31.286s29.63-10.246,35.557-5.931l18.854,23.193
	c0,0,21.411,11.703,12.865,52.837c0,0,8.012,30.986-17.628,53.423l-24.575,21.901c0,0-25.105,31.517-26.174,37.394
	c-1.07,5.875,2.176,9.762,2.176,9.762c-36.424,28.727-91.977,76.481-195.137,55.445c-58.833-11.998-105.521-57.316-123.817-112.75"
	/>

How to do for translate that in position x and y

Where Can I find that, you have a "software" or a "website" to find the coordonates x and y ? because my path are also complexe

 

Thanks

[Rodrigo]

Hi,

 

You baked my noodle with this follow up

 

My initial idea is get the specific x and y coordinates of a given point in the path, because with an onUpdate callback you can get that easily.

 

After doing some research I found that you can do something like that with RaphaelJS, the beauty is that the engine does have a raphael plugin so that could mean a lot less work down the way.

 

I can't give you a ready bake solution but you could start by digging into the following links:

 

http://www.benknowscode.com/2012/11/finding-points-along-svg-path-using_2799.html

 

http://bl.ocks.org/duopixel/3824661

 

I found this link regarding D3.js:

 

https://www.dashingd3js.com/svg-paths-and-d3js

 

Also perhaps you could find out about  SVGJS and check the following post by Rob Aldred, who's building a very neat SVGJS plugin, perhaps He could give you a better advice:

 

http://forums.greensock.com/topic/8676-svgjs-plugin/

 

Best,

Rodrigo.

[silverd]

Thanks Rodrigo

 

I am going to try to do that

it's maybe a little hard because i would like to do a animation after, as you do in your first example code to do a straight line at the end

because if the path are to hard maybe the animation doesn't work easily

 

Thanks a lot for your help

If you can, send me how i must do for protect my buy file (SplitText) as you say me

 

Jeff

[silverd]

Maybe If I use a textPath for following my complexe path

it's maybe a solution no ?

but for go to the end straight line, maybe it's too strange

[Rodrigo]

it's maybe a little hard because i would like to do a animation after, as you do in your first example code to do a straight line at the end

because if the path are to hard maybe the animation doesn't work easily

Hi Jeff,

 

By no means my previous suggestions go in that direction.

 

If you check the codepen and some of the Greensock collection that work using bezier like this, you'll see that the bezier is never used to actually animate the element. What's happening is that a dummy object is being tweened and the values of the bezier are collected and passed to position the element in a particular place on the bezier path.

var letters = $("div.element"),
    dummy = $("div#dummy"),
	
    btn1 = $("button#btn1"),
    btn2 = $("button#btn2"),
	
    path = [{x:0,y:0},{x:100,y:-50},{x:200,y:400},{x:300,y:300},{x:400,y:400}],
    point,
    tween = TweenMax.to(dummy, letters.length,
    {
    	bezier:
	{
            values:path, autoRotate:true
	},
	paused:true, ease:Linear.easeNone
    }) 

What I do is give the tween a duration based on the amount of elements, in this case the letters amount. The element being tweened is actually a DOM element (needed to get the rotation angle) but with no background and an absolute positioning, therefore it doesn't interfere with document flow or rendering.

tl = new TimelineMax({paused:true});

TweenLite.set(dummy, {x:0, y:0, rotation:0});

for(var i = 0; i < letters.length; i++)
{
    tween.time(i);
	
    point = {x:dummy[0]._gsTransform.x, y:dummy[0]._gsTransform.y, rotation:dummy[0]._gsTransform.rotation};
    
    tl.from(letters[i], .5, {x:point.x, y:point.y, rotation:point.rotation}, 0);
} 

Then inside the loop and using the time() method the tween's playhead is moved to a particular time. In this case every second corresponds to a letter of the phrase, and since the loop increments the value of i, the next position of the dummy corresponds to the next letter. Then the _gsTransform object comes into play, with that we get the values of x, y and rotation of the dummy element in that particular time and those values are equivalent to the letter, with that index value, position and angle. Finally a instance is added to a timeline setting that particular letter into that position, since a from() instance is being used the letter will be animated from the bezier position to the inline common position.

 

My idea is to get the particular x and y values of the SVG path for each letter and repeat that same procedure without the bezier path, just an object with the x and y values, then with a loop you add a from instance to the timeline and finally you animate it.

 

As you can see the GSAP part is the easiest one, while extracting the points is the big challenge here, once you get those, you're in the promise land because the rest is very easy.

 

Finally if you check this sample:

http://bl.ocks.org/duopixel/3824661

 

You can see how the circle's cx and cy values change as you move the mouse, if you can get those values in the correct position you're good to go. One code snippet that could help you is this codepen of the Greensock collection:

 

See the Pen zLiux by GreenSock (@GreenSock) on CodePen

 

Rodrigo.

[silverd]

Thanks Rodrigo

 

It's easy when you explain to me like that

Easy easy it's a big word but more easy

 

I read the D3.js tutorial and i tried to understant it, but it's not very easy for me i'm a beginner not a expert in javascript

because in this tutorial the svg is a random path not a design path. 

I am going to try with kiwi svg example I think it's more easy like that

My words have to follow the kiwi path on start and after i use your second part of explaination for go to the straight line

 

Thks

Jeff

[Rodrigo]

Hi Jeff,

 

Yeah, unfortunately you'll have to learn the basis of a library to pull this off and my own knowledge of SVG is quite limited closing to none.

 

But digging a little bit I came across Raphael's getPointAtLength() method, this might be exactly what you need since it returns an object with the x, y and alpha values. In the description of alpha it says angle of derivative, but I'm not sure if it refers to the angle of the segment or some other angle.

 

Also there's this other method path2Curve() which turns any path to a collection of cubic bezier. perhaps with this one you can use the bezier method of the codepen, simulate through a loop the whole bezier, get the points at the specific times and apply them to the corresponding letter.

 

Best,

Rodrigo.

[silverd]

Hi Rodrigo

 

thanks for your help i m going to try with that

 

it's a little bit hard the SVG and bezierToCurv but i m going to find a solution with your explanation

Thanks again

 

you are the best

Jeff