Jump to content
Search Community

Liquid Slider - to Draggable

Dennyno test
Moderator Tag

Go to solution Solved by OSUblake,

Recommended Posts

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

  • Like 1
Link to comment
Share on other sites

  • Solution
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.

 

  • Like 1
  • Thanks 1
Link to comment
Share on other sites

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

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

 

  • Like 1
Link to comment
Share on other sites

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

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

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

  • 4 weeks later...
  • 3 months later...

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...