Share Posted February 24, 2022 Hi, do you thing is possible to achieve the same with draggable? And how detect the right side of the viewport, instead of the left one? (So the oppositive as it's working now?). I also did the yellow one in plain js, that mimic the same way of the Cuberto one (purple) works , but even in this case I can't make it start from the right side.I tried a second attempt rotating the element, but the svg morph from left till 100% of the right, so the code is totally wrong. Step will be: 1) on desktop when mouse goes to the really right edge wobble the svg and make it appear/follow mouse, then by draggable/click, reveal the section. I'm 100% sure that the master in svgs @Cassie can help me 🥰 See the Pen zYPRgKV by DedaloD (@DedaloD) on CodePen See the Pen LYGQOBo by pizza3 (@pizza3) on CodePen 1 Link to comment Share on other sites More sharing options...
Share Posted February 24, 2022 It's definitely possible with Draggable, but you still need to set it up correctly. This thread might be a good starting point for learning how to interact with a curve. 1 Link to comment Share on other sites More sharing options...
Author Share Posted February 24, 2022 On that topic all demos are about lines 😶 (even your demo with maaany lines is amazing) See the Pen mdVWbwp by GreenSock (@GreenSock) on CodePen Is the same for a arc / bezel? Also how to start draggable from right side? starting point x=100? Something like that? And how to attach the yoyo on dragging? Any demo for the bounce? Link to comment Share on other sites More sharing options...
Author Share Posted February 24, 2022 Still dont know why everything I'm finding is left to right.. and not the opposite See the Pen emjwvP by suez (@suez) on CodePen Even this one which seems easier then other Link to comment Share on other sites More sharing options...
Solution Solution Share Posted February 24, 2022 45 minutes ago, Dennyno said: On that topic all demos are about lines Yes, but you can combine lines to make shapes 😉 See the Pen PoOBaqW by GreenSock (@GreenSock) on CodePen You just need to understand how SVG path commands work. https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths https://css-tricks.com/svg-path-syntax-illustrated-guide/ I have can show you more advanced curves later, but start simple, like my line demo and only use mouse events. We can incorporate Draggable later as it's just going to complicate stuff right now. 1 1 Link to comment Share on other sites More sharing options...
Share Posted February 24, 2022 Hey, I like it as a morph animation. Sorry if the path design isn't optimal. Should / could be a carrot. See the Pen vYWajxw?editors=0010 by mikeK (@mikeK) on CodePen Happy morphing by onpointermove ... Mikel 2 Link to comment Share on other sites More sharing options...
Author Share Posted February 24, 2022 1 hour ago, mikel said: Hey, I like it as a morph animation. Sorry if the path design isn't optimal. Should / could be a carrot. Happy morphing by onpointermove ... Mikel Being me a noob on svg animations this is a starting point (as also Blake's ones), even the final effect should work a bit different... but I got to start somewhere 😅 I can even work with just divs and plain css, but the angle between the square div and the circle one, won't be as smooth as svgs are and also the wooble/jelly/liquid effect is not so easy to achieve... Also kindly note that your demo doesnt work on mobile, (strange, using pointermove I thought it'd work on mobile too) Link to comment Share on other sites More sharing options...
Share Posted February 24, 2022 25 minutes ago, Dennyno said: Also kindly note that your demo doesnt work on mobile, (strange, using pointermove I thought it'd work on mobile too) You probably have to add a touch-action to the SVG. touch-action: none; 40 minutes ago, Dennyno said: but I got to start somewhere 😅 Yes, fork my demo and get started 😉 I'm trying to teach you how to fish, so just start with a basic shape for now. The curves/wobbly stuff will be the final touches, which I'll show you how to do when you get to that point. See the Pen qBVyMLv by GreenSock (@GreenSock) on CodePen 1 Link to comment Share on other sites More sharing options...
Author Share Posted February 24, 2022 47 minutes ago, OSUblake said: You probably have to add a touch-action to the SVG. touch-action: none; Yes, fork my demo and get started 😉 I'm trying to teach you how to fish, so just start with a basic shape for now. The curves/wobbly stuff will be the final touches, which I'll show you how to do when you get to that point. Yes, thank you. Slowly slowly I will end on something like this: https://www.hellomonday.com/ which is also awesome and fluid as I may need Link to comment Share on other sites More sharing options...
Share Posted February 25, 2022 I'm just trying to get you to learn how to work with paths as copy and pasting isn't a good solution. I have numerous examples of fluid/wavy like stuff on this forum, like these... And I just found an old canvas demo I never finished. See the Pen podZBvb by osublake (@osublake) on CodePen 5 Link to comment Share on other sites More sharing options...
Author Share Posted February 25, 2022 Yes, thanks! I got also to undertand how draggable works.. double studies. lol I forked this See the Pen jOavNde by DedaloD (@DedaloD) on CodePen but I got errors. What's the problem there? And let's suppose that I need that only if the user drag a bit an element near/close/before the orange section, it translates to the screen. Actually it trigger itself. Thanks for clarifying Link to comment Share on other sites More sharing options...
Author Share Posted February 25, 2022 5 minutes ago, Dennyno said: Yes, thanks! I got also to undertand how draggable works.. double studies. lol I forked this but I got errors. What's the problem there? And let's suppose that I need that only if the user drag a bit an element near/close/before the orange section, it translates to the screen. Actually it trigger itself. Thanks for clarifying Like here: See the Pen xxPaVJx by DedaloD (@DedaloD) on CodePen I need the whole element hidden till I drag or click on the drag-me button... Link to comment Share on other sites More sharing options...
Share Posted February 25, 2022 You just need to adjust the CSS. And you probably forked an old pen, which was using the _gsTransform. Inside a Draggable function you can just use this.x or by using gsap.getProperty. See the Pen LYOJbVK by GreenSock (@GreenSock) on CodePen 1 Link to comment Share on other sites More sharing options...
Author Share Posted March 24, 2022 #UPDATE Hi all, this is 90% the desired result. I just cant understand still, how to achieve the 2nd liquid svg on enter and while closing seen on https://www.hellomonday.com/ sidebar. I was able to get only the circular one, but the main effect is achieved with the liquid shape. Any good man? See the Pen GRyrOdM by DedaloD (@DedaloD) on CodePen Link to comment Share on other sites More sharing options...
Share Posted March 24, 2022 Hey @Dennyno, Try it step by step. See the Pen QWOBXBL by mikeK (@mikeK) on CodePen Happy opening ... Mikel 2 Link to comment Share on other sites More sharing options...
Author Share Posted March 24, 2022 Thanks a lot @mikel Link to comment Share on other sites More sharing options...
Author Share Posted July 9, 2022 On 2/25/2022 at 7:56 PM, OSUblake said: You just need to adjust the CSS. And you probably forked an old pen, which was using the _gsTransform. Inside a Draggable function you can just use this.x or by using gsap.getProperty. I forgot to thank u too @OSUblake 1 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