Jump to content
Search Community

Text on a spiral path with animation

skyeinc9@gmail.com test
Moderator Tag

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

I would love some ideas on how to get this code to be able to change the fontSize from the beginning of the animation to the end of the animation, which is just the 8seconds it takes for the text to go around the spiral path.

 

I am new to GreenSock, so am just including the regular SVG code.  Any hints on how to GreenSockize it would be helpful.

 

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 1000 250" style="enable-background:new 0 0 1000 250;" xml:space="preserve">
<style type="text/css">
.st0{fill:#AF0A0A;}
.st1{fill:#FFFFFF;}
.st2{font-family:'Raleway-Bold';}
.st3{font-size:150px;}
.st4{fill: blue;}
.st5{fill:none;stroke:#000000;stroke-width:4;stroke-miterlimit:10;}
.st6{font-family:'ArialMT';}
.st7{font-size:12px;}
.st8{display:none;fill:none;stroke:#000000;stroke-width:3;stroke-miterlimit:10;}
.st9{display:none;fill:none;stroke:#40005C;stroke-miterlimit:10;}
.st10{display:none;}
 
</style>
<rect class="st0" width="1000" height="250"/>
<text transform="matrix(1 0 0 1 74.675 171.9564)" class="st1 st2 st3">Hillary Skye</text>
<rect x="189.8" y="61.4" class="st0" width="30.9" height="22.6"/>
<path id="SVGID_x5F_1_x5F_" class="st5" d="M198.1,72.6c0.3-4.1,3.9-7.2,8-6.9c5.1,0.4,9,4.8,8.6,9.9c-0.5,6.4-6,11.2-12.4,10.8
c-8-0.6-14-7.5-13.5-15.5c0.7-10,9.4-17.5,19.4-16.8c12.5,0.9,21.9,11.8,21,24.3c-1.1,15.6-14.7,27.4-30.3,26.3
c-19.5-1.4-34.3-18.4-32.9-37.9c1.7-24.4,23-42.8,47.4-41.1c28.5,2,40.6,20.1,34.6,52.6c-2.7,12.9-6.1,25.6-9.1,38.5
c-4.8,20.6-5.6,46,3,55.2c14.5,15.6,38.9,16.4,54.5,1.9"/>
  <circle class="st4" cx="205.3" cy="75.3" r="10.2"/>
<text><textPath  xlink:href="#SVGID_x5F_1_x5F_" startOffset="71.3942%">
<tspan  class="st4" style="font-family:'MyriadPro-Regular'; font-size:25px;">Shannon</tspan>
<animateTransform attributeName="transform" values="0;.5;1" begin="0s" type="scale" from=".5" to="10" dur="8s"/>
<animate attributeName="startOffset" values="0;.5;1" dur="8s" repeatCount="indefinite" keyTimes="0;.5;1" />
</textPath>
</text>
 
</svg>
 
Thanks!  Hillary
Link to comment
Share on other sites

Hi skyeinc9@gmail.com :)

 

Welcome to the forums.

 

Diaco is one of our forum superheroes and he has an excellent CodePen showing text on a path along with changing the text as it tweens:

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

 

I just adapted his code for use with your SVG and made a quick CodePen for you:

See the Pen yemdqR by PointC (@PointC) on CodePen

 

I added a second tween to the timeline for your fontSize animation.

.to("#theText", 5, {fontSize:50},0);

You can certainly adjust that to your liking.

 

Hopefully that helps a bit.

 

For future questions, if you'd create a CodePen, that would get you the best answers. Here's a link on how to do that:

http://greensock.com/forums/topic/9002-read-this-first-how-to-create-a-codepen-demo/

 

Happy tweening and welcome aboard.

:)

  • 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...