venizia03 Posted February 8, 2020 Share Posted February 8, 2020 Hi, I am trying to reproduce a kind of bubble effect (like on this site: https://rand-d.com/). Is it possible to do it with gsap? Right now, I have my 2 circles in svg and I applied a rotation effect on it. Not really the same result as on the example website lol Thx! See the Pen BaNydWJ by venizia03 (@venizia03) on CodePen Link to comment Share on other sites More sharing options...
ZachSaucier Posted February 8, 2020 Share Posted February 8, 2020 Hey vinizia and welcome. The effect on the website is done using WebGL. I'm not familiar enough with WebGL to suggest a specific approach. Given you could create an effect like this somewhat easily using SVG with morphing (we have a handy MorphSVGPlugin that could help you), maybe they are rendering a changing SVG with WebGL? Or maybe WebGL has something does some image clipping with a generated path that I'm not familiar with. Maybe @Zadvorsky could chime in since he has more experienced in the related field? 2 Link to comment Share on other sites More sharing options...
OSUblake Posted February 8, 2020 Share Posted February 8, 2020 As @ZachSaucier said, using the MorphSVGPlugin is a good option. Definitely the easiest solution in my opinion. But you can always do it the old fashioned way using math. See the Pen vdzjyg by osublake (@osublake) on CodePen 3 Link to comment Share on other sites More sharing options...
mikel Posted February 8, 2020 Share Posted February 8, 2020 Year, using the MorphSVGPlugin is a good option. See the Pen Pyejvv by mikeK (@mikeK) on CodePen Happy morphing ... Mikel 5 Link to comment Share on other sites More sharing options...
venizia03 Posted February 8, 2020 Author Share Posted February 8, 2020 Hi All and thx for your help I have updated my code pen with the old fashion solution provided by @OSUblake and this is doing exactly what I wanted. 3 Link to comment Share on other sites More sharing options...
mkamarga Posted October 8, 2020 Share Posted October 8, 2020 On 2/9/2020 at 1:06 AM, mikel said: Year, using the MorphSVGPlugin is a good option. Happy morphing ... Mikel Hi Mikel, thanks for the pen, it is so helpful! Wondering how do i make the path / clip path responsive to window resizing? Many thanks! Link to comment Share on other sites More sharing options...
mikel Posted October 8, 2020 Share Posted October 8, 2020 Hey @mkamarga, Welcome to the GreenSock Forum. The SVG #morph is aligned to the window height (height: 100vh) to fit perfectly into the CodePen here. Try instead of width: 100%. Happy morphing ... Mikel 2 Link to comment Share on other sites More sharing options...
mkamarga Posted October 8, 2020 Share Posted October 8, 2020 11 minutes ago, mikel said: Hey @mkamarga, Welcome to the GreenSock Forum. The SVG #morph is aligned to the window height (height: 100vh) to fit perfectly into the CodePen here. Try instead of width: 100%. Happy morphing ... Mikel Thanks for the reply mikel, i tried changing the width to 100%, but it doesnt show. here is my pen so you can see what im trying to do. i am trying to get the animation in the center of the screen and when the window resize it should resize too... would this be possible with this markup? See the Pen bGpQBKM by mkamarga (@mkamarga) on CodePen Link to comment Share on other sites More sharing options...
mikel Posted October 8, 2020 Share Posted October 8, 2020 Hey @mkamarga, If the viewBox attribute is present and the width and height are set to 100%, all modern browsers adapt the graphic to the space available in the comprehensive container. Here a perfect tutorial of Sara Soueidan See the Pen MWeWLzx by mikeK (@mikeK) on CodePen Happy morphing ... Mikel 3 Link to comment Share on other sites More sharing options...
mkamarga Posted October 8, 2020 Share Posted October 8, 2020 20 minutes ago, mikel said: Hey @mkamarga, If the viewBox attribute is present and the width and height are set to 100%, all modern browsers adapt the graphic to the space available in the comprehensive container. Here a perfect tutorial of Sara Soueidan Happy morphing ... Mikel hey Mikel ah okay!, so by applying viewbox dimension, and set the #morph to width 100% and height 100% it will be contained and responsive. thank you so much for pointing me to the right direction, will have a play and keep you posted! cheers! mick 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