Jump to content
Search Community

Masking in SVG with Morph SVG

atulraj89 test
Moderator Tag

Recommended Posts

Hello All, 

I am quite new to GSAP and just purchased the Shockingly Green and trying to make an animation with Morph SVG, I have attached the Codepen link as well, what I am trying to achieve, 

Right now I have a single alphabet written , I want to show an image into the alphabet and like this:

image.png.31aa61b13a4b7ed1e55c4a73b9179397.png

Ignore the red background for now.

I have tried to mask this image into H with AI, and the above result is the preview of that,
but when I am trying to morph a normal H alphabet with this Shape, the image is not showing there,
NOTE: I have data image in SVG with Clip path. I dont know if this is the right way to do this. Just scroll down below in codepne, You can see the second SVG

 There is 2 questions I have: 
1. While moprhing, how to show this 2nd SVG into the H alphabet in First SVG path.
2. I want this H to move its right while morphing, right now its going to its left.

See the Pen NWxOjEg by atulraj89 (@atulraj89) on CodePen

Link to comment
Share on other sites

Hey atulraj89. 

 

20 minutes ago, atulraj89 said:

just purchased the Shockingly Green and trying to make an animation with Morph SVG

I assume you purchased it on another GreenSock account? There's no purchase associated with this profile :) 

 

20 minutes ago, atulraj89 said:

1. While moprhing, how to show this 2nd SVG into the H alphabet in First SVG path.

Both of your issues come down to asset prep (as usual with SVG issues). I highly suggest that you combine both SVGs into one SVG (and no, I don't mean nested SVG elements, I mean actually combining them so that they share the same viewport).

 

The translation issue comes down to the difference in positions of the points. I recommend:

  1. Setting up the H at the far left of the SVG.
  2. Convert it to a path if it's not already.
  3. Duplicating the H, then dragging out the top right and bottom right points to the far right (as far as you want it to be). 
  4. Applying the clip path to the original H.
  5. Exporting the entire thing.

 

Once you've done that, the animation is easy. Your code (gsap.to("#h", {duration: 1, morphSVG:"#ul"});) should work great so long as the IDs are correct and you set it up like I suggested.

  • Like 3
Link to comment
Share on other sites

Hi @ZachSaucier,

Thakns for the reply
Yes I have purchased it with other ID and now I am using this with my VUE project, Thanks for helping in that as well in another post of mine.
by using awesome instructions given by you, I have managed a fair SVG combination,
But still I am getting the problem with its transition Position, 

As you can see the updated Codepen Above, The Last H is still moving from its position to left, and this is because I have translateX the clipped Image, which is not right I guess, 
So if you can see it once and help me out to move H its original Position to its right,
Like this 

image.png.1964009f5c8def869bf4663b414e1270.png
and when this H is getting morph, the Full Stop next to it, should also move with it to its right,
So if I need the same animation with M in AIM and need to move whole HIGH word, so I can manage both the thing with same trick.
any Suggestions for updated code please?

Link to comment
Share on other sites

After reading your comment 2 or 3 times, I got what you actually want to say about the assets Prep, Actually I am not familiar with AE, that's why this confusion happened, 

So Got the point about the Assets prep as I took help from a friend to understand this,

One more this I want your suggestion on, like you gave for the animation above,
So this is the complete scenario,
Screen start with this view, (yellow part is the full viewport)
image.png.f66bba14f9c2c481d5246ca07de84037.png
then it will change to this with in a span of 2 or 3 second animation, 

image.png.f8b44a9cd40a8e9aee0c9180556f90e5.png
and once it will go to the end of the screen, it will shrink from its left, and become this

image.png.8891e5d95ecf5d4783f09fa4abc90622.png

So I need your suggestions for the SVG prep and animation tricks?
The morph-SVG approach I am trying right now is good for this type of animation, or you suggest something else?
I really appreciate the time and effort you are doing for me,I will be grateful for this help.

 

Link to comment
Share on other sites

Again, I think this would be easiest if you do all the hard work on the asset prep side.

 

Follow the instructions that I made above but with the three states:

  1. Create the "Aim High." original state.
  2. Convert all of the text to paths.
  3. Merge all of the paths into one path (it will make morphing easier).
  4. Duplicate the merged path twice.
  5. Move the first copy's letters to where they should be (ignoring the rectangles in between letters).
  6. Drag the top left and bottom left points of the M to where they should be to create the effect that you want. Also drag the top right and bottom right of the last H to where you want.
  7. Repeat steps 5-6 for the second duplicated version.
  8. Apply the clip path to the original text.
  9. Put the duplicated versions of the text inside of a <defs> so they're not rendered.

Then you just have to morph between the states :) 

  • Like 2
Link to comment
Share on other sites

Thanks a Ton @ZachSaucier

You are a life saver,

but again this beginner need more help of yours, 
I have created the SVG , the way you guide me above, and results are now 99% what I wanted it, Thanks again,

So 2 things I need your help and guidance on,
 

1. As you suggest just merge the layers and morph between states, but When I am merging the layers with AI, its wrapping all the layers in a G, group element, and as per docs, morphing do not work on whole Group, it works only on D attribute of a Path,
So how to morph between states?

So once I was not able to do this with Whole state, I choose to go one by one, and 

2. I need your more help on clipping, as you can see in the above pen, without clipping, its working fine, the way I want,  
but When I clip it with image, its not working as expected, 
Is it possible to clip it on the go, as I want to show the Blue text in start and then clip it when animation starts,
but The way I am clipping the Original H or M as you suggested, its showing clipped from the very beginning. 
the way I am clipping it

<clipPath id="shape2">
        <polygon id="m-o" class="cls-1" points="207.11 86.61 207.66 86.61 236.29 284.65 262.33 284.65 290.96 86.61 291.43 86.61 291.43 284.65 320.62 284.65 320.62 3.29 275.34 3.29 249.31 181.2 248.76 181.2 223.28 3.29 177.45 3.29 177.45 284.65 207.11 284.65 207.11 86.61" />
        </clipPath>
        <image clip-path="url(#shape2)" xlink:href="../assets/intro-BG-asset.jpg" />


Thanks in advance.



Actually I got an Idea and trying to implement it, for fixing the H in high in the end, and it worked, bold part in 2nd question above is still the pain.
So what I did to solve the last H, is :

gsap.to("#high-sc", { duration: 0.3, opacity: 1, delay: 1.8})

so when the second animation is about to end, this only H element changes its opacity to 1, and showing perfectly,
is this a valid and ok approach? 

Link to comment
Share on other sites

5 hours ago, atulraj89 said:

s you suggest just merge the layers and morph between states, but When I am merging the layers with AI, its wrapping all the layers in a G, group element, and as per docs, morphing do not work on whole Group, it works only on D attribute of a Path,
So how to morph between states?

I said to merge the paths, not group the paths. Merging makes them all into one path.

 

5 hours ago, atulraj89 said:

Is it possible to clip it on the go, as I want to show the Blue text in start and then clip it when animation starts

You mean like fade in the image? Start with it clipped and then fade in the image.

 

5 hours ago, atulraj89 said:

when the second animation is about to end, this only H element changes its opacity to 1, and showing perfectly,
is this a valid and ok approach? 

Seems fine. You might want to make use of GSAP's timelines to sequence things more easily.

  • Like 2
Link to comment
Share on other sites

Hey @ZachSaucier, Thanks a ton,

Everything now working as expected, 
as you suggested to use GSAP's Timeline to sequence things more easily.
I have tried this, but I am stuck with syntax, when I using Timeline, each and every item going as per TL, which Mean, first M is animating and once it complete the animation, then the h starts animating,
But I want a set of GSAP animation to run once and then the second once,

For Example, when I am converting the below code to TL based, every line is executing after the previous one completes, And yes this is the use of TL.

// animate M in aim for first effect
      gsap.to("#m-o", { duration: 2, morphSVG: "#m-fc" })
      // animate high for first effect
      gsap.to("#h-o", { duration: 2, morphSVG: "#h-fc" })
      gsap.to("#hi-o", { duration: 2, morphSVG: "#hi-fc" })
      gsap.to("#hig-o", { duration: 2, morphSVG: "#hig-fc" })
      gsap.to("#high-o", { duration: 2, morphSVG: "#high-fc" })
      gsap.to("#dot-1-o", { duration: 2, morphSVG: "#dot1-fc" })


But I want this whole animation run at once, and then the second part of my animation, for which I am using delay for now,

 

 gsap.to("#a-o", { duration: 2, morphSVG: "#a-sc", delay: 2})
      gsap.to("#ai-o", { duration: 2, morphSVG: "#i-sc", delay: 2})
      gsap.to("#m-o", { duration: 2, morphSVG: "#m-sc", delay: 2})    
      // animate high for second effect
      gsap.to("#h-o", { duration: 2, morphSVG: "#h-sc", delay: 2})
      gsap.to("#hi-o", { duration: 2, morphSVG: "#hi-sc", delay: 2})
      gsap.to("#hig-o", { duration: 2, morphSVG: "#hig-sc", delay: 2})
      gsap.to("#high-o", { duration: 2, morphSVG: "#high-sc", delay: 2})


how to use it in TL, so that the upper code will run and then the below part, which is using delay for now. 

 

Link to comment
Share on other sites

27 minutes ago, atulraj89 said:

Any path if you can suggest me to learn GSAP in and out?

I always suggest that people start with the Getting Started article (going through it thoroughly😞

 

 

From there I suggest the most common mistakes article:

 

 

Then I suggest the article on writing animation code efficiently.

 

Past that, it really just takes practice and solving issues as you come across them. You could hang around these forums trying to answer questions as well. You can read about how one of our moderators, @PointC, did that to learn in this post:

 

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