Adjust the button's width as the text changes to create a dynamic animation

Question

Adjust the button's width as the text changes to create a dynamic animation

I'm trying to create an animation effect where the width of a button changes whenever the text inside it is updated. I've attempted using useRef on the button itself to grab its clientWidth and then applying that value to a CSS variable in order to adjust the width dynamically.

However, I'm encountering an issue where although the width is being set correctly, the animation isn't working as expected. Strangely, if I manually adjust the width in Chrome Developer Tools, the animation works fine. But when I revert back to using the CSS variable and update the inner text, the animation fails to trigger.

.button {
width: var(--buttonwidth);
transition: width 2s ease-in-out;
}

// Update css variable when button text changes
  useEffect(() => {
    const buttonInnerWidth = buttonRef.current.clientWidth;
    document.documentElement.style.setProperty(
      '--buttonWidth',
      `${buttonInnerWidth}px`
    );
    console.log(buttonInnerWidth);
  }, [children]);

Does anyone have a more effective solution to achieve this animation effect?

javascript html css reactjs

Answer 1

Answer №1

Here is a demonstration showcasing how the button width changes when clicked. You have the freedom to modify this event listener to suit your preferences.

Check out the sample code below:

$(document).ready(function(){
$("button").css({"width":$("button").text().length*10});
  $("button").click(function(){
    var str = " activated ";
    var strWidth = str.length*10;
    $(this).css({"width":strWidth}).text(str);
  });
});

button{
height: 40px;
transition: 0.4s;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button>press</button>

Answer 2

Here is a demonstration showcasing how the button width changes when clicked. You have the freedom to modify this event listener to suit your preferences.

Check out the sample code below:

$(document).ready(function(){
$("button").css({"width":$("button").text().length*10});
  $("button").click(function(){
    var str = " activated ";
    var strWidth = str.length*10;
    $(this).css({"width":strWidth}).text(str);
  });
});

button{
height: 40px;
transition: 0.4s;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button>press</button>

Answer 3

Answer №2

Here is an alternative method. It's very similar to what Hooman Namazi proposed, but with a slightly different approach. Take a look:

jQuery(function ($) {
$("button").css({"width":$("button").text().length*10});
    var text = ['first text', 'this is second text', 'and this one is third', 'Hi, I am forth'];
    //used to determine which is the next text to be displayed
    var counter = 0;
    var $button = $('button');
    //repeat the passed function at the specified interval - it is in milliseconds
    setInterval(function () {
        //display the text and increment the counter to point to next text item
        $changeText = $button.text(text[counter++]);
        $button.css({"width":$("button").text().length*10});
        //if it is the last text item in the array point back to the first item
        if (counter >= text.length) {
            counter = 0;
        }
    }, 2000);
})

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}
button {
  background: #0084ff;
  border: none;
  border-radius: 5px;
  padding: 8px 14px;
  font-size: 15px;
  color: #fff;
  transition: 0.5s;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button>first text</button>

Answer 4

Here is an alternative method. It's very similar to what Hooman Namazi proposed, but with a slightly different approach. Take a look:

jQuery(function ($) {
$("button").css({"width":$("button").text().length*10});
    var text = ['first text', 'this is second text', 'and this one is third', 'Hi, I am forth'];
    //used to determine which is the next text to be displayed
    var counter = 0;
    var $button = $('button');
    //repeat the passed function at the specified interval - it is in milliseconds
    setInterval(function () {
        //display the text and increment the counter to point to next text item
        $changeText = $button.text(text[counter++]);
        $button.css({"width":$("button").text().length*10});
        //if it is the last text item in the array point back to the first item
        if (counter >= text.length) {
            counter = 0;
        }
    }, 2000);
})

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}
button {
  background: #0084ff;
  border: none;
  border-radius: 5px;
  padding: 8px 14px;
  font-size: 15px;
  color: #fff;
  transition: 0.5s;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button>first text</button>

Answer 5

Answer №3

Avoiding the use of JS was important for me in this situation due to performance concerns. Constantly checking the width of text inside a button can be inefficient. Instead, I opted to set the width to auto and adjust the max-width when the text changes within the button.

While this solution is not ideal for lengthy text, it functions well for my particular needs! :)

Check out the CSS code below:

.button {
   width: auto;
   white-space: nowrap;
   max-width: 15rem;
   transition: max-width 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95);

   &.loading {
     max-width: 30rem;
    }
}

Answer 6

Avoiding the use of JS was important for me in this situation due to performance concerns. Constantly checking the width of text inside a button can be inefficient. Instead, I opted to set the width to auto and adjust the max-width when the text changes within the button.

While this solution is not ideal for lengthy text, it functions well for my particular needs! :)

Check out the CSS code below:

.button {
   width: auto;
   white-space: nowrap;
   max-width: 15rem;
   transition: max-width 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95);

   &.loading {
     max-width: 30rem;
    }
}

Adjust the button's width as the text changes to create a dynamic animation

Answer №1

Answer №2

Answer №3

Similar questions

Tips for developing a nested array of objects using a JavaScript loop

The contrast between FormData and jQuery's serialize() method: Exploring the distinctions

Convert a form into plain text utilizing CSS with minimal usage of jQuery or Javascript

Determining the duration since generating a unique objectid in mongodb

Transmit information from a comprehensive form using AJAX technology

Error: The jQuery TableSorter Plugin is unable to access property '1' as it is undefined

How can I generate a bounding box with CSS?

Is there a way to make the first Image Element within the div automatically clickable?

Guide to mocking the 'git-simple' branchLocal function using jest.mock

Mastering the art of reading rows in ASP.NET using Java Script

Center and align pictures within a stationary container

Adding a CSV file to Mui-Datatables for data upload

IE8 not displaying background-image in Zen Subtheme of Drupal 7

Align the center of a grid div that does not contain any items

Formulate a targeted search request according to the selected radio button option

Setting up a plan for executing Javascript server side scripts

What seems to be the issue with loading this particular file into my JavaScript code?

Preventing jQuery plugin from overriding default settings

How can one utilize Codemirror code folding while avoiding the use of "[ ]"?

Tips on utilizing media queries to optimize website layout for mobile devices