Jump to content
Search Community

Svg morph fixing

Dennyno test
Moderator Tag

Go to solution Solved by alig01,

Recommended Posts

Hi all.

How can I achieve the following complex result:

the text path should start as already does (from left, following masterPath), then entering in the circle path, then the text should play endless inside that circle with a new infinite timeline. 

Basically I can make an hidden element and show it onEnd, but I guess there should be any clever gsap solution to morph the text path from the main one, to the circular one; then finally the image should appear.

Thanks for any help

See the Pen qBLmBwX by DedaloD (@DedaloD) on CodePen

Link to comment
Share on other sites



My approach would be to play with the start value of the motion path. Like for the first time, start value should be 0. And next round onwards may 0.3-0.4 whichever value is suitable for text to begin with circle start.  

I haven't tried something like this before so not sure whether this will work. 
Hope it helps. 

  • Like 1
Link to comment
Share on other sites



Another alternative could be to use the onLeave callback in ScrollTrigger in order to animate the text as you need.


@nico fonseca created this awesome example some time ago:


Here is an isolated codepen of just the circular text (again all the credit is for Nico):

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


Hopefully this helps.

Happy Tweening!

  • Like 3
Link to comment
Share on other sites

5 hours ago, Rodrigo said:


Thanks, I already did circle transitions sometimes, but the problem is applying the text and swap from primary path to secondary one.. even changing the use xlink from first, to second one... seems that the text follows only the main path and ends it's life there.

Gonna test tomorrow btw, thanks for the hint.

Also thanks to you @Trapti :)


Hopefully this helps.

Happy Tweening!


Link to comment
Share on other sites

  • Solution



I tried it earlier and this is the outcome. I wasn't completely satisfied (but I couldn't look further), although I think it's close enough? 

I hope at least I got the direction right ^^ 


See the Pen yLGbVoK?editors=0010 by alig01 (@alig01) on CodePen


Tried it first with normal text outside of the SVG to animate it with stagger, but the spacing between the letters got lost and found a few threads to solve it, but it wouldn't have been worth the effort (for me :unsure:).


Hope this is what you are looking for and good luck with your project

  • Like 4
Link to comment
Share on other sites

Hey! Thanks @alig01 

I was playing with your code, but seems bit hard to inject also scrolltrigger and have each function working together.
btw.. thanks for your time :)


gsap.registerPlugin(MotionPathPlugin, ScrollTrigger);

MorphSVGPlugin.convertToPath("circle, line");

let roundtext = document.querySelector("#textPath");
let masterTl = gsap.timeline({
  scrollTrigger: {
    trigger: "body", // or whichever element you want to listen for scroll events on
    start: "top top+=20", // animation starts when top of your trigger hits the top of the viewport
    end: "bottom bottom", // animation ends when bottom of your trigger hits the bottom of the viewport
    scrub: true, // enables scrubbing
    markers: true // Optional, shows markers where animation starts and ends

let tl = gsap.timeline({ defaults: { ease: "none", duration: 5 } })
  .to(roundtext, {
    attr: { startOffset: "50%" }


let tl2 = gsap.timeline({ repeat: -1 })
  .to("#text", {
    rotate: -360,
    transformOrigin: "50% 55%",
    ease: "none",
    duration: 20



Link to comment
Share on other sites

No problem, always happy to help if I can.


For this I would probably get rid of the masterTl. You could use the onComplete property to start the second timeline.


See the Pen WNLjJeB?editors=0010 by alig01 (@alig01) on CodePen


I run the first timeline only once to avoid the scrub effect when scrolling back.

If you want to keep that, it wouldn't be easy to reverse/pause the infinite timeline to make everything look fluint, especially if the user scrolls to fast back. Or maybe I'm not aware of something, as revert() would be too abrupt and reverse() only works if the user waits for it. So custom logic would be nesesarry to catch every use case. Maybe a few more circles could be added to the path, but I'm not quite sure what refinements end up being important.


Also, for future readers who want to combine/customize svg paths, there is a super useful tutorial by @PointC that explains each step.


Hope this helps

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