Share Posted May 7, 2021 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. Link to comment Share on other sites More sharing options...
Share Posted May 8, 2021 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! 2 Link to comment Share on other sites More sharing options...
Share Posted May 8, 2021 Hey @Punchify Me, This could be an option ... See the Pen gOmbJYv?editors=1010 by mikeK (@mikeK) on CodePen Happy morphing ... Mikel 4 Link to comment Share on other sites More sharing options...
Share Posted May 8, 2021 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 animationhttps://www.cassie.codes/posts/making-a-lil-me-part-1/ 6 Link to comment Share on other sites More sharing options...
Author Share Posted May 10, 2021 Many thanks to all of you! I now have a good base to start with! 1 Link to comment Share on other sites More sharing options...
Share Posted May 10, 2021 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 4 Link to comment Share on other sites More sharing options...
Author Share Posted May 11, 2021 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 Link to comment Share on other sites More sharing options...
Share Posted May 11, 2021 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/ 4 Link to comment Share on other sites More sharing options...
Author Share Posted May 11, 2021 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 1 Link to comment Share on other sites More sharing options...
Share Posted May 11, 2021 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! Link to comment Share on other sites More sharing options...
Share Posted May 11, 2021 Some little tweaks See the Pen 201f90e21321f37ed6decb2a4b39a982 by cassie-codes (@cassie-codes) on CodePen Link to comment Share on other sites More sharing options...
Author Share Posted May 11, 2021 @Cassiethanks a ton. But you see, the mask does not 'go'/cover the bottom of the 'welcome on board' section. Link to comment Share on other sites More sharing options...
Share Posted May 11, 2021 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! 1 Link to comment Share on other sites More sharing options...
Author Share Posted May 11, 2021 I figured, you had used innerwidth in calculating yMask, corrected it thanks a ton!! 1 Link to comment Share on other sites More sharing options...
Share Posted May 11, 2021 Ah yeah! That would do it! Link to comment Share on other sites More sharing options...
Share Posted May 11, 2021 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 Link to comment Share on other sites More sharing options...
Share Posted May 11, 2021 @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. 2 1 Link to comment Share on other sites More sharing options...
Share Posted May 11, 2021 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. 1 Link to comment Share on other sites More sharing options...
Share Posted May 11, 2021 ai.mp4 centering with align and then dragging it up into the corner until the intersect marks it as center. 2 Link to comment Share on other sites More sharing options...
Share Posted May 11, 2021 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. 🤷♂️ Link to comment Share on other sites More sharing options...
Share Posted May 11, 2021 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> 3 1 Link to comment Share on other sites More sharing options...
Share Posted May 11, 2021 ohhhhh I get it. sorry, duh. Link to comment Share on other sites More sharing options...
Share Posted May 11, 2021 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!!! Link to comment Share on other sites More sharing options...
Share Posted May 11, 2021 save as is such a handy option. 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