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

Error detected in d3.js Stacked chart transformation

Execute a function when the selected option changes

Validating multiple input fields using Javascript

Using HTML5, the <section> element can inherit styling from the

Getting the Input Label properly aligned in Material UI

Can anyone help me create a multilingual web application using ReactJS, Flux, NodeJS, and Postgres?

Sending data from an AngularJS frontend to a Laravel backend using an HTTP

Explore a React application that employs Firebase Authentication within a JavaScript environment

What could be causing the Bootstrap navbar to not toggle when the button is clicked?

development session not persisting on local server (localhost:4200)

Combine activities from a dynamic array of Observables

Aligning text and lists using Bootstrap on both desktop and mobile devices

React Hook is failing to trigger an update

What is the method to set an element's height equivalent to the height of the entire screen?

Adding the ability to export CSV files from Bootstrap Table to an Angular 15 project

Preventing the page from auto-refreshing upon button click

Can you identify the type of component being passed in a Higher Order Component?

What is the best way to position my content next to my sticky sidebar for optimal visibility?

What is the best way to trigger an ajax request when a user selects a tab?

Both FireFox and Chrome are currently experiencing issues with video chat functionality through WEBRTC