Clip-path with SVGmorph

[jakob zabala]

I am having trouble figuring out how to reveal the text and photo with the morph svg as a clip path. I just need the lower part of the svg to reveal the text/image. 

 

I tried using an inset clip path but it did not work well. Is there any good examples of svg morphing clip path?

 

Thanks!

See the Pen LYxQomy by jaykobz (@jaykobz) on CodePen.

[PointC]

Are you trying to have the yellow(ish) path reveal the image and become the background for the text? So it's always visible?

 

Keep in mind that a mask or clip-path won't render. Take this little example.

 

See the Pen PoWRwWz by PointC (@PointC) on CodePen.

 

The circle in the clipPath animates its r attribute to reveal the text. The purple circle is a separate element and animates at the same time as the clipPath circle, but we never actually see the green circle in the clipPath. If the morph paths are to be visible and serve as the clipPath or mask, you'll need extra copies in the <defs><clipPath> or <mask>. 

 

Does that make sense?

 

Happy tweening.

 

[jakob zabala]

Yes this makes sense. 

 

I understand I need to have a new copy of svg to also do the clipping.

 

I am trying to have the div with the image and the copy hidden and as the lime box expands, the text and image reveal at the same morph.

 

I am trying to achieve this with a rectangle that animates at the same time.

 

I am finding clip path confusing, I am still looking on the internet for good explanations. 

One of the main issues is getting the rectangle to scale at the same aspect ratio, I am using the a width of 50vw, but don't know how to get the clipping adhere to this. (doing it with an svg with viewbox is proving difficult to achieve especially getting the positioning all lined up correctly) So I am trying to go the route of creating a rectangle.

 

How do I position the clip path? do I need to make an SVG that inside has the image and text and clip path and then animate it?

[PointC]

oh... I see. I thought the morph was supposed to reveal the image and text. You're using a separate clip-path for the reveal.  Got it.

 

Yeah, timing it the way you have it set up now will be tricky. Your popout height is not the same as the morphing elements. Check out this fork with an outline around that div. 

 

See the Pen b9334b594eb60c8d0afce5052ec126cc by PointC (@PointC) on CodePen.

 

Any chance of putting this whole thing a parent SVG? It would be super simple if that's the case.

 

[jakob zabala]

Yes we are on the same page!

 

Yes I was unsure weather I could place the image/text within the main SVG!

 

So how would you recommend I do the clip path once the image/text is in the same svg? how does that step make the process easier?

 Create a separate path that is the clip path? and have a timeline that morphs the clip path and lime shape at the same time?

 

Let me know if this question makes sense!  

[PointC]

1 hour ago, jakob zabala said:

how does that step make the process easier?

When everything is "under one roof" I find it so much easier since all the elements scale nicely together.

 

I'd recommend a simple rectangle in a clipPath which expands its height attribute at the same speed as the path morph. Here's a quick starter for you.

See the Pen 6ab4a2fbf5620f43c8894ea05eee9221 by PointC (@PointC) on CodePen.

 

You can add the text to same group as the image so it's all revealed by the animating rectangle in the clipPath. You'll need to resize that rectangle to make it all pixel perfect. It's often easiest to pull it out of the clipPath and place it at the bottom of the SVG (so it's on top) for visual sizing purposes. Once you have the size right, pop it back into the clipPath and you're good to go.

 

Make sense? Happy tweening.

 

[jakob zabala]

WOW! You went above and beyond, as always...! Not only did you create what I have been trying to make for the past few days, but now I understand so so much more about how clip paths and also svgs for that matter work on the web, thank you so much for imparting your wisdom as always! (side note also from your articles!)

 

Two questions

1.how did you get that value for the viewbox"0 0 730 500" (and the height for that matter)

 

2. I am anticipating how this would work when I have multiple of these svgs stacking vertically. I reckon i use position: absolute and in the timeline for each expansion push all svgs below by x amount. I will cross this bridge when I get there I guess!

 

Thanks!

[PointC]

12 minutes ago, jakob zabala said:

how did you get that value for the viewbox"0 0 730 500" (and the height for that matter)

I just eyeballed it. ?

 

I always recommend using a background rectangle for all exports so you don't get any position or viewBox surprises. More in this tutorial.

https://www.motiontricks.com/use-background-rectangle-with-svg-exports/

 

13 minutes ago, jakob zabala said:

I am anticipating how this would work when I have multiple of these svgs stacking vertically.

Yeah - if they are all the same size, you could easily calculate which one is opened and move the ones below it accordingly.

 

Happy tweening.

 

[jakob zabala]

Hey @PointC!

 

Quick question:

 

I have converted all my other vector graphics into svg elements the way you showed me! ...(now they actually scale!)

 

I am stuck with this example, the positioning of this new path I created in AI is all wrong within my svg, is there a way of positioning this path?

The top of <path id="linepathC" is meant to intersect at the middle of the bottom of the ellipse.

 

Or do I need to re import the entire graphic from AI?

 

See the Pen xxgjYLx?editors=1010 by jaykobz (@jaykobz) on CodePen.

 

[PointC]

You can fix it in AI and re-import if you like. (I'd do that, but that's just me. YMMV) Or you can transform the position of the line in your CSS or with GSAP. Here's the GSAP way.

 

gsap.set("#linepathC", { y: 70, x:-540 });

I just eyeballed that based on your description. You can certainly move it to your liking.

 

Happy tweening.

 

[jakob zabala]

Okay! thanks for the advice!

[jakob zabala]

@PointC

 

Another question regarding SVG elements.

Suppose I give my page perspective and wanted to animate an <image> that is within the SVG in the z axis, is this possible?

 

const tlpop1 = gsap.timeline({ ease: 'none', paused:'true' });
    tlpop1.to("image",{duration: 0.2, z:100 })


const popout11954 = document.querySelector('image');
      popout11954.addEventListener("mouseenter", () => {
        tlpop1.play();
          });
      popout11954.addEventListener("mouseleave", () => {
          tlpop1.timeScale(0.85).reverse();
          });

See the Pen MWJVbZW?editors=1010 by jaykobz (@jaykobz) on CodePen.

 

 

If what I am asking doesn't make sense please let me know! thanks!

[PointC]

SVGs don't support 3D transforms on child elements. You can use them on the SVG itself or a parent div.  If you just want to have the z animation, you can probably achieve the same thing by scaling the element.

 

Happy tweening.

 

[jakob zabala]

aaa yes! this makes sense, I wanted to ask before spending loads of time trying to get it work! thank you!

[jakob zabala]

hey @PointC!

 

hope all is well! i am having issues with these two SVGs. The Viewboxes are causing overlapping problems at smaller screen widths.

 

I have tried different things like makeing the width height and viewbox smaller within the same ratio and scaling up the width on bigger screens doesn't work.

 

The only solution I have is changing viewbox attributes in JS window.matchMedia, but this doesn't work that well and is quite messy.

 

Is there a better solution to this?

 

thanks

 

 

See the Pen QWdVKrw?editors=0010 by jaykobz (@jaykobz) on CodePen.

 

[PointC]

Looks like you're changing the width in multiple media queries, but not changing the height. That seems to be locked in at 685. I think adding height: auto in your CSS here should fix things:

.mainmmmdrop {
  position: absolute;
  right: 100px;
  overflow: visible;
  opacity: 1;
  height: auto;
}

You also have some invalid CSS in your 825px media query.

@media all and (max-width: 825px) {
  .mainmmmdrop {
    max-width: 90vw;
    width: 1000;
    height: 685:
  }
}

Setting the width and height there shouldn't even be necessary since you have those attributes already in place on the SVG.

 

Another option here would be to place all the elements in the same SVG rather than multiple SVGs. That way everything scales nicely together, but that's entirely up to you. It should work fine this way if you allow the height to change rather than being locked in at 685.

 

Happy tweening.

 

[jakob zabala]

Simple fix, thank you! I have never actually used auto height/width. I have tried to use it in other situations for other issues, but it wasn;t the right solution so i completely but that out of my mind! 

 

Yeah making it one entire svg when I start adding more bars will work better! thanks!

[jakob zabala]

@PointC Another one thats got be stuck in the mud!

 

I am in the process of converting my SVGs into single SVGs so that they scale properly and with correct spacing. But in this case, 8 separate letters that also morph is way off: the intro animation is all from the origin of the SVG and the morphSVG part, using manual origin setting is COMPLETELY off(because its from the origin of the entire SVG. Where have I gone wrong? transforming the paths with CSS? and If i recreated this in AI and bring it in with a rectangle I imagine I'd still have the same issues. I haven't tried SVGs inside SVGs... don't know if that is even allowed. Am I better off just all separate SVGs for the letters? I feel this goes against everything you have taught me

 

Above is the working but separate SVG example, below is one single SVG with issues.   

 

See the Pen dyNqEeL?editors=1010 by jaykobz (@jaykobz) on CodePen.

 

See the Pen MWJqdVE by jaykobz (@jaykobz) on CodePen.

[PointC]

You're close.

 

A slight modification in the letter timeline and you'll be good to go. Just use scale:0 in your from tweens rather than a transform.

 

const tlll = gsap.timeline({ delay: 1, defaults: { ease: "none" } });  // default object
tlll.from(
  ".afex",
  {
    ease: "expo",
    duration: 1,
    scale: 0,
    transformOrigin: "center center",
    stagger: {
      each: 0.05,
      from: "random"
    }
  },
  "bloom"
);

Also note the defaults object when you create the timeline. In this case you're overriding the default with the expo, but I noticed a couple other spots where the default settings for some timelines were not in that object.  

 

That should get you morphing. Happy tweening.

 

[jakob zabala]

Unbelievable! again simple fix... I thought I was miles off! 

26 minutes ago, PointC said:

Also note the defaults object when you create the timeline. In this case you're overriding the default with the expo, but I noticed a couple other spots where the default settings for some timelines were not in that object.  

What do you mean by other spots where the default settings were 'not in that object'

 

Are you saying I shouldn't override the defaults? or put all the eases in the default?

[PointC]

1 hour ago, jakob zabala said:

Are you saying I shouldn't override the defaults? or put all the eases in the default?

Nope. Sorry - maybe that was confusing the way I worded it. You can override the defaults on individual tweens all you like. I meant the placement of the defaults when you create the timelines. Example:

//bad
const tlll = gsap.timeline({ delay: 1, ease: "none" });

//good
const tlll = gsap.timeline({ delay: 1, defaults: { ease: "none" } });

The first way won't break the animation or anything like that, but you won't get your linear (none) ease as a default on the child tweens. Any defaults you want to filter down to the tweens need to be in that object. 

 

Make sense?

 

[jakob zabala]

aaa yes! i realise the incorrect syntax! thanks again

 

[jakob zabala]

hey @PointC, I have a small DrawSVG question bothering me. 

 

I have this issue with other animations but this one illustrates the issue well, I solved it in a 'hacky' way but was wondering the correct way of doing this.

 

I am trying to have a small line 10% of the draw svg travel along the path, but I want it to also 'leave' the SVG path. If you uncomment the second to tween this is the 'hacky' way of solving it.

 

See the Pen vYgvXzZ by jaykobz (@jaykobz) on CodePen.

[GreenSock]

You can use the "nowrap" keyword in the latest version of DrawSVGPlugin:

See the Pen d00ae7a5add8896e3a0fdd5c6e5873e5?editors=0010 by GreenSock (@GreenSock) on CodePen.

 

Is that what you're looking for? 

[jakob zabala]

@GreenSock Works like a charm (I had 3.6.0 which didnt work... .1 makes a lot of difference)

 

Thanks