Background reveal with svg blob

[Punchify Me 3 Likes (Newbie)]

I am trying to achieve an effect similar to the background reveal with mouse movement as seen here : https://www.luckyfolks.fr/. 

 

I am not really sure how and where to start. The svg code for the blob is:   

 

<svg version="1.1" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 1920 980" style="enable-background:new 0 0 1920 980;" xml:space="preserve">
<style type="text/css">
.st0{fill:#FFC845;}
</style>
<g>
<path class="st0" d="M0,0v980h1920V0H0z M1646.8,396.1c-0.3,4.1-1.7,8.3-2.2,12.4c-1.4,12.3-4.4,24.4-7,36.3
c-0.9,4-1.8,7.9-2.9,11.9c-1,3.9-2.1,7.9-3.3,11.8c-1.8,5.9-3.7,11.7-5.8,17.5c-0.7,1.9-1.4,3.9-2.2,5.8c-1.5,3.8-3,7.7-4.7,11.5
s-3.3,7.6-5.1,11.4c-4.5,9.5-9.4,19-14.9,28.4c-5.4,9.2-27.5,44.9-38,56.3c-1.8,2-3.7,3.9-5.6,5.8c-3.8,3.8-7.7,7.5-11.7,11.1
c-8,7.1-16.5,13.7-25.3,19.8c-8.8,6.1-18,11.8-27.5,17.1c-14.2,7.9-29,14.9-44.1,21.3c-7.6,3.2-15.2,6.2-22.9,9.1
c-2.6,1-5.1,1.9-7.7,2.8c-12.9,4.6-25.9,8.9-38.8,13c-7.7,2.4-15.5,4.8-23.1,7c-5.1,1.5-10.2,3-15.2,4.5c-2.5,0.7-5,1.5-7.5,2.2
c-76.3,22.3-128,13.5-217.6,12.6c-3.1,0-6.2-0.1-9.3-0.2s-6.2-0.3-9.3-0.6c-31.2-2.4-63.4-9.9-92.6-22.2c-2.9-1.2-5.8-2.5-8.7-3.8
c-2.9-1.3-5.7-2.7-8.5-4.1c-2.8-1.4-5.6-2.9-8.3-4.4s-5.4-3.1-8-4.7c-2-1.2-4.1-2.7-6.2-4.3c-9.2-7.1-19.1-17.4-25.4-24.2
c-48.9-52.7-60-92-54.2-162.4c4.7-57.5,18-115.3,49.4-164.3c1.5-2.3,20.5-31.5,30.3-38.4c15.1-10.6,32.4-18,46.8-29.5
c2.4-1.9,4.7-4,6.9-6.1c2.2-2.1,4.4-4.3,6.4-6.6s4.2-4.6,6.2-6.9c1.4-1.5,2.7-3.1,4.1-4.6c3.4-3.8,6.9-7.6,10.6-11.2
c11.6-11.1,24.7-20.5,38.8-28.1c5.3-2.8,10.7-5.4,16.3-7.7c1.9-0.8,3.7-1.5,5.6-2.2c5.7-2.1,11.5-4,17.4-5.5c2-0.5,3.9-1,5.9-1.5
c4.5-1.1,9-2.1,13.2-3c2.8-0.6,5.6-1.3,8.4-1.9c2.7-0.6,5.4-1.2,8.1-1.8c1.3-0.3,2.6-0.6,3.9-0.8c2.6-0.6,5.1-1.1,7.6-1.6
c3.7-0.8,7.4-1.5,10.9-2.2c4.7-0.9,9.3-1.8,13.8-2.6s8.8-1.6,13.1-2.3c2.1-0.3,4.3-0.7,6.4-1c5.3-0.8,10.4-1.5,15.6-2.1
c2.1-0.2,4.1-0.5,6.1-0.7c1-0.1,2-0.2,3.1-0.3c3.1-0.3,6.1-0.6,9.2-0.9c1-0.1,2.1-0.2,3.1-0.3c3.1-0.2,6.2-0.5,9.4-0.6
c2.1-0.1,4.2-0.2,6.3-0.3c2.1-0.1,4.3-0.2,6.5-0.3c2.2-0.1,4.4-0.2,6.6-0.2c2.2-0.1,4.5-0.1,6.8-0.2c20.6-0.4,43.7-0.1,72.5,0.7
c3,0.1,6,0.2,9,0.3c6,0.2,12.1,0.6,18.2,1c3.1,0.2,6.1,0.4,9.2,0.7c7.7,0.6,15.3,1.4,23,2.5c4.6,0.6,9.2,1.3,13.8,2
c1.5,0.3,3,0.5,4.6,0.8c4.6,0.8,9.1,1.7,13.6,2.7c1.5,0.3,3,0.7,4.5,1c4.5,1,9,2.2,13.4,3.4c5.9,1.6,11.8,3.4,17.5,5.4
c2.9,1,5.7,2,8.6,3.1c2.8,1.1,5.6,2.2,8.4,3.4c55.3,23.7,98.2,78.6,127.3,129.1c1.3,2.3,10.6,19.1,16.2,36.7
C1650.5,366.1,1648,381.6,1646.8,396.1z"/>
</g>
</svg>

I would highly appreciate any tips and help on this. Thank you. 

[GreenSock 17,854 Likes (Superhero)]

Looks like you could use MorphSVG (especially since you're "Shockingly Green" ✅ ) to morph between two or more blobby shapes, and then wire up some mouse-following logic. It's not really something I can build for you, but the effect is totally doable.

 

Happy tweening!

[mikel 4,769 Likes (Superhero)]

 

Hey @Punchify Me,

 

This could be an option ...

 

See the Pen gOmbJYv?editors=1010 by mikeK (@mikeK) on CodePen

 

Happy morphing ...

Mikel

 

[Cassie 4,830 Likes (Superhero)]

I *just* added this blog post to the GSAP learning resources.

It may help!

https://tympanus.net/codrops/2021/05/04/dynamic-css-masks-with-custom-properties-and-gsap/

Also, I wrote this article on getting values from mouse movement and plugging them into animation

https://www.cassie.codes/posts/making-a-lil-me-part-1/

[Punchify Me 3 Likes (Newbie)]

Many thanks to all of you! I now have a good base to start with!

[OSUblake 18,451 Likes (Superhero)]

On 5/8/2021 at 7:43 AM, Cassie said:

Also, I wrote this article on getting values from mouse movement and plugging them into animation

 

Love your animations!

 

Here's another way to get mouse coordinates inside an svg.

 

See the Pen 383a987e80f497e08b94dd6c3684841a by osublake (@osublake) on CodePen

 

That technique will work with any element inside an svg.

 

See the Pen e2f39748b642d0fb90321b7ae7575cf7 by osublake (@osublake) on CodePen

 

 

[Punchify Me 3 Likes (Newbie)]

Hello, 

 

Many thanks for your comments. I have managed to make it work.

 

But I still have a slight problem in that the mouse cursor seems to be not aligned with the clipPath. The movement also seems to be a bit jerky. Here is a reduced case CodePen: 

 

See the Pen wvJKpEe by sunshinetainted (@sunshinetainted) on CodePen

 

 

 

[Cassie 4,830 Likes (Superhero)]

Ok, so the main issue here is that things get pretty tricksy when you're dealing with SVG vs HTML coordinate systems.

You're currently using Blake's demo for getting mouse co-ords within an SVG to move the clip path around in the SVG, but also using that clipPath to clip an HTML element in your CSS. This is why the clip path isn't clipping where you expect it to.

Now, I'm not saying this is impossible - and someone better at maths than me may have an answer for you. but. I have some easier solutions for you.

1) Keep it all in the SVG. Mask an image within the svg with a clipPath and set the SVG position absolute in the background. Blake's demo works perfectly for this.

See the Pen 3672f50adb278127be6b40b16c99beec?editors=1111&search_term=colours#0 by cassie-codes (@cassie-codes) on CodePen

pros - you can do morphing on the path because it's in the DOM
cons - it just masks the background not the content

2) Read this article I posted. 
This is specifically about masking content (with masks, not clip path) as there are shared CSS properties you can use for positioning with masks.

pros - nice way to deal with content masking as well
cons - I don't think this technique will allow you to morph that shape - I'd have to tinker about, I might have a play around later and see if there's a way to reference an SVG mask that's in the DOM rather than use a data URI.
 

On 5/8/2021 at 12:43 PM, Cassie said:

https://tympanus.net/codrops/2021/05/04/dynamic-css-masks-with-custom-properties-and-gsap/

 

[Punchify Me 3 Likes (Newbie)]

Hi @Cassie

 

Many thanks, I tried with the mask-image property, which is my preferred solution as I have to show content and I don't necessarily need to morph the shape. I have tried the mask-image approach in your article, modified to take into consideration the technical constraints. 

 

However I still have a lag between the mouse position and the mask, and I am unable to cover the edges (top and bottom) of the section with the mask. I am sure it has to do with my calculations, but I cannot seem to get it right. 

 

here is a new pen : 

See the Pen rNyOdoG by sunshinetainted (@sunshinetainted) on CodePen

[Cassie 4,830 Likes (Superhero)]

It's not to do with calculations, this is just a markup issue. It's not masking the top section because the top section is outside of the div that has the mask applied to it.

The 'lag' is because you're using a gsap.to tween with a default duration of 0.5, so the tween is being eased into place, you can use gsap.setinstead if you need it to feel more immediate - or even gsap.quickSetter() for a more performant solution.

Good job getting it working!
 

[Cassie 4,830 Likes (Superhero)]

Some little tweaks

See the Pen 201f90e21321f37ed6decb2a4b39a982 by cassie-codes (@cassie-codes) on CodePen

[Punchify Me 3 Likes (Newbie)]

@Cassiethanks a ton. But you see, the mask does not 'go'/cover the bottom of the 'welcome on board' section. 

[Cassie 4,830 Likes (Superhero)]

That bottom section isn't in the codepen I attached. I just kept the top section in as an example.

The example I shared is showing a solution, it isn't 'the final' solution. You'll still need to tweak bits and extrapolate what you need!
 

[Punchify Me 3 Likes (Newbie)]

I figured, you had used innerwidth in calculating yMask, corrected it thanks a ton!!

[Cassie 4,830 Likes (Superhero)]

Ah yeah! That would do it!

[OSUblake 18,451 Likes (Superhero)]

Just trying to figure stuff out for future reference. Does anyone know how to export an SVG so that the shape is centered at 0,0? Meaning most of the coordinates will be negative because they lie outside the svg. This would make it really easer to center stuff, like to the mouse cursor, especially if morphing will be involved as the dimensions of the shape might change.

 

 

 

 

cc @PointC

 

[akapowl 5,005 Likes (Superhero)]

@OSUblake

 

You mean like this?

 

See the Pen 3c5e4d178aee95a05efa8f3e4478e4c9 by akapowl (@akapowl) on CodePen

 

That's made with Inkscape.

 

Document and viewBox are set to width and height of the blue 'canvas' element, then I positioned the grey rectangle by snapping the center-points of its path's segments to the path of the blue 'canvas' element and then I used Inkscape's 'align and distribute' dialogue to center the blob up in the grey rectangle. Saved as .svg and as always with Inkscape threw the .svg file into SVG-OMG.

[OSUblake 18,451 Likes (Superhero)]

46 minutes ago, akapowl said:

You mean like this?

 

Yesss!!!

 

See the Pen 5648de67fb458da3752fa9168a80f8f6 by osublake (@osublake) on CodePen

 

Although now I want to know if there's an easy way to do that in Illustrator. If not, Inkscape is free.

 

[Cassie 4,830 Likes (Superhero)]

centering with align and then dragging it up into the corner until the intersect marks it as center.

[OSUblake 18,451 Likes (Superhero)]

1 minute ago, Cassie said:

centering with align and then dragging it up into the corner until the intersect marks it as center.

 

Right, but the view box changes and the coordinates aren't negative. At least that's how it is when I export. 🤷‍♂️

 

 

[PointC 14,102 Likes (Superhero)]

In this case you can't export and get the correct viewBox from AI. You'll get some funky coordinates for a box that encloses all the shapes. You need to Save As SVG.

 

Straight Export:

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="548.5px" height="544.2px" viewBox="0 0 548.5 544.2" style="overflow:visible;enable-background:new 0 0 548.5 544.2;" xml:space="preserve">
  <style type="text/css">
    .st0 {
      fill: #B3B3B3;
    }

    .st1 {
      fill: #3FA9F5;
    }
  </style>
  <rect x="48.5" y="44.2" class="st0" width="500" height="500" />

  <path class="st1" d="M24.2,46.2C33.6,44.9,28,8.8,41.3,1.5C55.4-6.1,95,16.1,96.9,47.6c0.9,14.9-6.6,32.8-20.4,39.4
    c-7.2,3.4-21,0-48.5-7.1C6.8,74.5,2.7,72,0.9,67.6C-3,57.8,6.2,42.4,14.2,41.9C19,41.6,20.7,46.7,24.2,46.2z" />
</svg>

Save As

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 500 500" style="enable-background:new 0 0 500 500;" xml:space="preserve" width="500" height="500">
  <style type="text/css">
    .st0 {
      fill: #B3B3B3;
    }
    .st1 {
      fill: #3FA9F5;
    }
  </style>
  <rect class="st0" width="500" height="500" />
  <path class="st1" d="M-24.3,2c9.4-1.3,3.7-37.4,17.1-44.7C6.9-50.4,46.5-28.1,48.4,3.4c0.9,14.9-6.6,32.8-20.4,39.4
        c-7.2,3.4-21,0-48.5-7.1c-21.2-5.5-25.3-7.9-27.1-12.4c-3.9-9.8,5.2-25.2,13.3-25.7C-29.5-2.6-27.8,2.5-24.3,2z" />

</svg>

 

[Cassie 4,830 Likes (Superhero)]

ohhhhh I get it. sorry, duh.

[OSUblake 18,451 Likes (Superhero)]

3 minutes ago, PointC said:

In this case you can't export and get the correct viewBox from AI. You'll get some funky coordinates for a box that encloses all the shapes. You need to Save As SVG.

 

Thanks!!!

[Cassie 4,830 Likes (Superhero)]

save as is such a handy option.