Jump to content
Search Community

Animate text from straight line to curve

bytrangle test
Moderator Tag

Recommended Posts

Hi everyone. I'm attempting to animate a block of text from straight horizontal line to an arc that would be a part of a circle. Here is the design that I have in mind:

loading-06.png.da756ac1b3101f168a5801d1ba169bb5.png

 

loading-07.png

 

loading-09.png

 

loading-10.png

 

At first, I tried to use sine, cosine to calculate the horizontal and vertical distance that each character has to move to reach the arc.

 

The problem with this approach is that I have to set `position: absolute` to each character.

 

As a result, my attempt looks nothing like what I have in mind, with each character radiates from the center point of the imaginary circle instead of organically moving from horizontal line to the arc.

 

So I'm rethinking: Maybe I should scratch that and try to animate a straight line to a Bezier curve using SVG, then place the characters on the curve to make them look like they are waving from straight line to curve.

 

What do you think? Any pointer would be highly appreciated.

See the Pen ExXPaPm?editors=0110 by trangthule (@trangthule) on CodePen

Link to comment
Share on other sites

@Cassie,

Sorry, I don't want to pollute the forum with unnecessary threads, but I've rethought my approach by starting from scratch breaking it down into different steps. This thread is hopefully just about animating things from straight line to an arc.

 

The original thread is about rotating text in a circle and many more. Actually, at the time of opening the original thread, I saw a cool idea, didn't know where to start and mainly just asked for general pointers.

 

|Nonetheless, if you think this deserves to be merged to the original, then I'll do so 😀.

  • Like 1
Link to comment
Share on other sites

Since you only have seven letters, I'd recommend converting the letters to paths and using a combination of regular position animations along with the MotionPath plugin. It'll give you more options than using SVG text. I'm basing that advice on the assumption that the text will always say "LOADING" and doesn't need to be dynamic.

 

Just my two cents. YMMV. :)

 

  • Like 3
Link to comment
Share on other sites

Thank you @mikel. That was so slick.

Here is my attempt. Nothing worth talking about yet, but I hope it's in the right direction.

 

See the Pen ExXPaPm by trangthule (@trangthule) on CodePen

 

Thank you @Cassie and @PointC for the advice. I worked with SVG text for the first time yesterday and it was so unexpectedly frustrating 😶.

 

I'm going to study up on SVG path and texts soon, but can you flesh out a bit more about the benefits of using text paths over text objects in animation?

  • Like 2
Link to comment
Share on other sites

9 hours ago, bytrangle said:

I'm going to study up on SVG path and texts soon, but can you flesh out a bit more about the benefits of using text paths over text objects in animation?

Ok - so there's no such thing as 'text paths'  - lets start from the beginning.

SVG paths can be used to create complex shapes. At the end of the day they're just shapes you can move around.
SVG text is actual text - it can be dynamic, it can be read by screenreaders- etc. But it's actual text so if you want to move each letter you're going to have to wrap each letter in a tspan, and it has a ton of text based rules attached to it, like kerning and font size and whether the font you're using is available or applied and what zoom level someone is using on their screen and whether it wraps or not and how it's positioned. 🙃


When we're talking about using text as paths - we just mean - 'save as outlines', like the video below.

For something like a loader where the text isn't going to change paths are likely the way to go.

Then you can move them and squish them and transform them and morph them and change the fill color - pretty much anything you can do with a normal SVG path, with no constraints from how SVG manages text or fonts.
 

 

  • Like 4
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.
×
×
  • Create New...