Svg morph fixing

[Dennyno 42 Likes (Newbie)]

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

[Trapti 211 Likes (Specialist)]

Hi, 

 

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. 

[Rodrigo 5,885 Likes (Superhero)]

Hi,

 

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!

[Dennyno 42 Likes (Newbie)]

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!

 

[Rodrigo 5,885 Likes (Superhero)]

Hi,

 

You could check these threads as well:

 

 

You might already seen them, but just in case.

 

Happy Tweening!

[alig01 168 Likes (Specialist)]

Hey, 

 

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

 

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

[Dennyno 42 Likes (Newbie)]

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%" }
  });

masterTl.add(tl);

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

masterTl.add(tl2);

 

[alig01 168 Likes (Specialist)]

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

[Cassie 5,649 Likes (Superhero)]

Really top quality answers here @alig01 - we appreciate the effort.