Search the Community
Showing results for tags 'altering css'.
Found 1 result
-
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
