Leveraging GSAP and Vue by utilizing props to dynamically calculate a maxWidth

I am working on animating buttons in my application using GSAP. The idea is that when a user clicks the button, it should animate the maxWidth of the button. I want this to be dynamic by adding a percentage of the max width set using props. Is it possible to pass the prop maxwidth to the gsap timeline? Currently, it is not working as expected for me.

 props: {
    maxWidth: {
      type: String,
      required: true,
    },
},

 methods: {
    buttonTo(path) {
      let tl = this.$gsap.timeline({
        onComplete: function () {
          navigateToPath();
        },
      });
      tl.to(this.$refs.primaryButton, {
        duration: 0.6,
        ease: 'power2.in',
        maxWidth: `calc(${this.maxWidth} + 5%)`,
      });

      const navigateToPath = () => {
        this.$router.push({ path: path });
      };
    },
  },
javascriptvue.jsnuxt.jsgsap

Answer №1

I've encountered a similar issue in the past, but thankfully it is unrelated to the Vue Lifecycle, so the value remains accessible within methods.

There could be several factors contributing to this problem. One suggestion is to ensure that your prop, "maxWidth," is associated with "px" or another CSS measurement unit. The CSS calc function cannot accept plain numbers within its calculation.

Below is an example utilizing your function:

 props: {
    maxWidth: {
      type: String,
      required: true,
    },
},

 methods: {
    buttonTo(path) {
      let tl = this.$gsap.timeline({
        onComplete: function () {
          pushToPath();
        },
      });
      tl.to(this.$refs.primaryButton, {
        duration: 0.6,
        ease: 'power2.in',
        maxWidth: `calc(${this.maxWidth}px + 5%)`,
      });

      const pushToPath = () => {
        this.$router.push({ path: path });
      };
    },
  },

You may also consider changing your prop to be of type "Number" if the string format is causing issues within the timeline.

If this solution works for you, please inform me!

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Annoying jQuery animation error: struggling to animate smoothly and revert back. Callback function conundrum?!

I'm completely lost with what I have accomplished. My goal was to create an animation where an element slides in from a certain position and then slides back when another element is clicked. To achieve this, I included the second event within the call ...

javascriptjqueryeventsanimationcallback

Keep moving forward in Sailsjs even after sending back a response with res.json();

It will keep running even if the condition is met and the code inside return res.json() gets executed. _.each(rooms, function(room){ if(room.users.length == users.length) { return res.json(room); // <-- returns but execution continues } ...

javascriptnode.jssails.js

Resetting the selected options in AngularJS dropdown lists

Utilizing ng-repeat in my HTML code to iterate over a JavaScript array and displaying it within a selection. I am trying to achieve the functionality of clearing all selected data from these dropdown lists when a button is clicked. Snippet of HTML: <d ...

javascriptangularjshtml

Troubleshooting the issue with dynamically adding form fields in AngularJS

I am currently working on an online course application and facing an issue with adding form fields dynamically to include additional video lectures for each course. When I attempt to click on the "Add Another URL" button, nothing happens. My expectation i ...

javascriptangularjshtmlangularjs-directiveangularjs-scope

Sockets causing a blockage in the Express server

Encountering an issue while setting up an express server with Sockets (using the socketcluster-server module). After sending around 20 http requests, the express server gets blocked, leading to the Sockets (client) reporting a connection depletion. Has an ...

javascriptnode.jssocketsexpresssocketcluster

The Fusion of JavaScript Frameworks

Is it considered poor practice for a seasoned developer to build a web application using multiple JS frameworks? For instance, when incorporating AngularJS into a project, and certain tasks could be more efficiently achieved with JQuery, should one opt fo ...

javascriptjqueryangularjs

JavaScript Object DeclarationCreating Objects in JavaScript

In this scenario, I have the following code snippet. Upon calling the constructor, an object is created. When updating the fields, modifications are made as shown below. It's important to note that direct modification of the Comment() function is not ...

javascriptnode.js

Vue webpack template disregards certain plugins

Can anyone help me troubleshoot an issue with my webpack configuration? I am trying to use the IgnorePlugin plugin to remove locales from moment when building my app, but it's not working when I run "npm run build" for the production build. Any sugges ...

webpackvue.js

Is there a way to extract only the value from the most recent request?

While working with VueJS, I have a handler for changes in an input field that looks like this: inputHandler(url, params){ const p = new Promise((resolve, reject) => { const xhr = new XMLHttpRequest(); xhr.open('POST&ap ...

javascriptvue.js

JavaScript data manipulation: Determining percentage change within a nested JSON structure

Provided is a JSON file structured like this... data =[ { key: "london", values: [ {day: "2020-01-01", city: "london", value: 10}, {day: "2020-01-02", city: "london", value: 20}, {day: " ...

javascriptjsondata-wrangling

Getting an unexpected empty response when submitting a request with a combination of image files and json parameters through postman, nodejs, and express

For my university project, I am developing a RESTful API for an online ticket shop that works across multiple platforms. I am using nodejs and express to create this API. First, I created the model for each event: const mongoose = require('mongoose&ap ...

javascriptnode.jsexpresspostman

Animate the entire paragraph with CSS hover effect

I'm seeking ideas on how to achieve a specific effect without the need to wrap individual lines in inner elements like span or a. Check out this example <div class="m-linkitem"> <h1>Hover Below</h1> <a href="#">Lorem ...

javascriptjqueryhtmlcss

Difficulty of combining forEach with findById in mongoose

I need to create a Node route that adds properties to objects and pushes them onto an array declared outside a forEach loop. I have noticed that while the array appears to be filled with data when I log it within the loop, it somehow becomes empty when I r ...

javascriptnode.jsmongoose

Displaying a clock using PHP

Seeking a way to display server time on my website, I have successfully implemented client-side time using JavaScript. How can I now showcase the server time? Are there any ZendFramework classes that can assist with this? Currently, I am utilizing the fo ...

phpjavascriptjqueryajax

adjust time in jQuery AJAX request when a button is clicked

I have the following code snippet that triggers when a button is clicked. When a user clicks on a button, I want to show a progress bar or waiting image in the browser for 5 seconds. How can I set a timeout and display the progress bar or waiting image wh ...

javascriptjqueryajax

In a jQuery application, the action of adding text from an input field to a div is triggered by clicking a

It's possible this is a duplicate question, but none of the answers I found solved my issue. I'm attempting to create a jQuery script where text entered into a text box is appended to a div when a button is clicked. This is part of a game I' ...

javascriptjqueryhtmlcss

Choose the specific selector following the current selector

Consider this example of code: <script> $(document).ready(function () { $('span').each(function () { $(this).html('<div></div>') ; if ( $(this).attr('id') == 'W0' ...

javascriptjqueryhtmljquery-selectors

Error occurred during the Uglify process: Unable to access the 'kind' property as it is undefined

I developed a project using TypeScript (version 3.9.3) and Node (version 10.16.3), but now I want to minify the code by converting it to JavaScript and running UglifyJS. However, after going through this process, the services that were functioning properly ...

javascriptnode.jstypescriptexpress

Retrieving data from a <div> element within an HTML string using jQuery and AJAX

Having trouble extracting a value from a div within an HTML string. Seeking assistance in identifying the issue. I've attempted various methods to retrieve the data, but none seem to work for me. It appears I may be overlooking something crucial. $( ...

javascriptjqueryhtmlajax

Retrieve all documents from a Firebase User's collection

Recently, I created a Firebase cloud function where my goal is to access every user's internal collection named 'numbers' and examine each document within that collection for some comparisons. Do you have any insights on how I can achieve t ...

javascriptfirebasegoogle-cloud-functions