Circle to Pill button animation

Ask the community
1

Hi, I’m trying to create a circle-to-pill button animation (circle in normal state, then expanding in width to a pill shape), with a text in it, but trying to do it with interactions doesn’t work because the circle just turns into an ellipse when the width changes in hover state. Even if I use a square with corner radius the same thing happens which is weird.

I can do it in css easily, but as we already know Editor X’s god ate its css homework, which is also a bit weird…

.box1 {
  bottom: 50%;
  right: 50%;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  background: #48C28b;
  padding: 0.5rem;
  color: white;
  -webkit-transition: all 0.55s;
  transition: all 0.55s;
}

.box1 a {
  font-size: 1em;
  letter-spacing: 1px;
  color: white;
  font-family: sans-serif;
  text-decoration: none;
  position: absolute;
  top: 22px;
  left: 32px;
  opacity: 0;
  -webkit-transition-delay: 2s;
  /* Safari */
  transition-delay: 2s;
  -webkit-transition: all 0.25s;
  transition: all 0.25s;
}

.box1:hover {
  border-radius: 999rem;
  padding: 0.5rem;
  width: 130px;
  height: 30px;
  background: #48C28b;
  color: white;
  -webkit-transition: all 0.55s;
  transition: all 0.55s;
}

.box1:hover a {
  opacity: 1;
  -webkit-transition-delay: 2s;
  /* Safari */
  transition-delay: 2s;
  -webkit-transition: opacity 1s;
  transition: opacity 1s;
}

</style>

<body>
  <div class=box1><a href="#">Learn More</a></div>
</body>

If I put it in an iFrame and use the css - it doesn’t read the site’s styles, so

is a default html header and not the site’s theme, again - very strange… Also, iFrame isn’t a good solution for responsive site buttons.

Just to give an idea, this is how it looks like with the css/iFrame solution.

Any help in making this happen otherwise on Editor X could be greatly appreciated.

Thank you!

1 Like
2

Hey, @toto-schillaci . I am Shani, UX Designer at Editor X. Great example and thanks for your feedback, I will share it with our team :slight_smile: Unfortunately at this time, we do not support changing the layout of an element (height, width etc.) using interactions panel, but rather only transformations like scale and rotate. In your CSS example, the button width changes on hover, and Scale cannot achieve this.

3

This would be a great feature!

4

@amazing I agree :slight_smile: I will share with the team.

5

Thanks for the answer, Shani. Doing it with the interactions panel would be ace! But for the time being - any way to get this done using Velo API?

6

:sunglasses:

7

@toto-schillaci I will check about the API with the Velo team. In the meantime, you can see here a lot of cool hover interactions that don’t require code :slight_smile: https://www.youtube.com/watch?v=HfDKcOskFWs

8

Toda, Shani! :pray:

9

Hey @toto-schillaci ,
there’s no API for changing the size of elements, but there’s a way to do it if built correctly.

Interactions Tool (No Code)
With the interactions tool, set the font size to small in the Initial state and on hover make it larger

Also there’s a way to build it with Velo


Here’s an illustration, above the button, of how I assigned the grid areas for our button to be flexible.
In the middle area I’ve added a container with 100% width, and a text inside(Collapsed on load) that will determine the width when expanded.

And I used the following Velo code
Click to expand, hover out to collapse

$w.onReady(function () {
    $w('#clickTrigger').onClick(() => {
        $w('#text7').expand();
    })
    $w('#clickTrigger').onMouseOut(() => {
        $w('#text7').collapse();
    })
});

https://jtsodik.editorx.io/my-site-6

I would suggest that you add this button to your design library for easy reuse.
Let me know if you have more questions.

10

Hi Jonathan,

Thank you for the answer, and for taking the time to put these examples together.

I followed your video, and used of the buttons there to create something similar to what I needed - it’s number 9 in your Chamber Buttons 1video that Shani sent me. The problem with that solution is that I couldn’t adapt it to the different screen sizes of a responsive site.

As for the examples above - I am trying to replicate what you’ve done with the interactions tool, but I think I’m missing something… I can get the text to scale from small to large, but not the actual box (pill shape). I’m not completely on board about how the hierarchy is constructed.

Thanks again!

11

@toto-schillaci in order for the container to stretch with your content follow these steps:

  1. Set the left grid column to Min/Max, with min being 50px and max max-content, and right column to 1fr

  2. Now place your green container on the left column, dock it to the left set its width to 100%

  3. Place your text element inside, dock it to the left as well, set its width to 100%, and shrink the font size using interactions in the Initial mode (like your already did)

  4. You can also play with the opacity or coloring of the text for the animation to look nice

  5. Now you should have an all-fluid container that will stretch according to the text

12

Thanks, Jonathan - that worked!

I’m still struggling with the responsive part of it. I’d like the circle (and the text inside of it) to change its size according to the breakpoint. Approx. like this:

desktop: 40px
tablet: 30px
mobile: 25px

When I change the size of the container, the left cell of the grid wouldn’t scale down to 30, 25, etc., resulting in a pill shape at the initial state for tablet and mobile.

13

@toto-schillaci this can be fixed by adjusting the Min size of the left column of the grid to match the parent container’s height.
So if your container is 30px of height, the left column should be min: 30px, max: max-content

14

Thank you, Jonathan!