atulraj89 Posted July 16, 2020 Share Posted July 16, 2020 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 H , I want to show an image into the alphabet and like this: 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 More sharing options...
ZachSaucier Posted July 16, 2020 Share Posted July 16, 2020 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: Setting up the H at the far left of the SVG. Convert it to a path if it's not already. 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). Applying the clip path to the original H. 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. 3 Link to comment Share on other sites More sharing options...
atulraj89 Posted July 17, 2020 Author Share Posted July 17, 2020 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 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 More sharing options...
atulraj89 Posted July 17, 2020 Author Share Posted July 17, 2020 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) then it will change to this with in a span of 2 or 3 second animation, and once it will go to the end of the screen, it will shrink from its left, and become this 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 More sharing options...
ZachSaucier Posted July 17, 2020 Share Posted July 17, 2020 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: Create the "Aim High." original state. Convert all of the text to paths. Merge all of the paths into one path (it will make morphing easier). Duplicate the merged path twice. Move the first copy's letters to where they should be (ignoring the rectangles in between letters). 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. Repeat steps 5-6 for the second duplicated version. Apply the clip path to the original text. 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 2 Link to comment Share on other sites More sharing options...
atulraj89 Posted July 20, 2020 Author Share Posted July 20, 2020 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 More sharing options...
ZachSaucier Posted July 20, 2020 Share Posted July 20, 2020 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. 2 Link to comment Share on other sites More sharing options...
atulraj89 Posted July 21, 2020 Author Share Posted July 21, 2020 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 More sharing options...
ZachSaucier Posted July 21, 2020 Share Posted July 21, 2020 You should use the position parameter: 2 Link to comment Share on other sites More sharing options...
atulraj89 Posted July 21, 2020 Author Share Posted July 21, 2020 Just watched it, Thanks a lot for the support, Love this community, Any path if you can suggest me to learn GSAP in and out? 1 Link to comment Share on other sites More sharing options...
ZachSaucier Posted July 21, 2020 Share Posted July 21, 2020 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: 3 Link to comment Share on other sites More sharing options...
mikel Posted July 21, 2020 Share Posted July 21, 2020 Hey @atulraj89, Another option: You can also use a mix of morphs and moves and two overlays to cover the clipPath. See the Pen KKVbzmz by mikeK (@mikeK) on CodePen Happy tweening ... Mikel 2 Link to comment Share on other sites More sharing options...
atulraj89 Posted July 22, 2020 Author Share Posted July 22, 2020 Hello, @mikel Its nice idea, Thanks for it. @ZachSaucier Thanks for the learning path above. Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now