Hello Webflowers,
I am planning to use this effect for one of my personal projects but the effect which is being produced in webflow is not similar to the codepen result the things is the ripples are not accurately being generated based on the mouse direction.
Any webflow ninja @Vincent @webdev @mikeyevin can give me some insights please
Thanks in advance
Sachu
Here is my site Read-Only: LINK
(how to share your site Read-Only link)
This is my quick attempt to recreate the effect. Feel free to use it in your project.
https://directional-ripple-button.webflow.io/
Here’s the read only link:
https://preview.webflow.com/preview/directional-ripple-button?utm_medium=preview_link&utm_source=designer&utm_content=directional-ripple-button&preview=6a66aaa4ddb13379ed1136bbfefa7bc6&mode=preview
Have a great day,
Marius
Hey @MariusJurtz Thanks for taking your time in recreating the effect but I just wanted to know what mistake I have done as in my attempt in recreating it,The direction aware is not working but the mouse enter and span activation is working the only thing is it is not creating the perfect ripple as the codepen example.
Hey @sachi_rao,
I was way too excited trying to recreate the effect so I forgot to read your initial post carefully. 
Right now I’m out of time to take a deeper look to your script. Maybe I have some time later the day.
Best,
Marius
Your read-only link is not working Bru!
Strange. You can go to the showcase and clone it from there:
Woah 
I had this creative block couldn’t think outside code and this was doable natively on webflow. Thanks for this @MariusJurtz you are awesome.
However the code version has very smooth animation which brings that delightfulness as you can see here I wanted to achieve this level of effect.
Hey @MariusJurtz I’ve got the code version to workPublished linkread-only(Direction Aware Button Ripple Effects Using CSS3 & Vanilla Javascript) but the exact same code with different structure is not working as intended
not-working read-only
not working published version
If you are free please do have a look at the structure and guide me.
