Jump to content
GreenSock

silverd

Text Animation

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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

Link to comment
Share on other sites

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 :)

Link to comment
Share on other sites

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.

  • Like 1
Link to comment
Share on other sites

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 :)

Link to comment
Share on other sites

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.

  • Like 1
Link to comment
Share on other sites

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 :)

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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 :)

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×