Use values stored in variables with jQuery.Keyframes-CodePudding

I want to change my animations using jQuery and found this helpful tutorial. This works -

 $.keyframe.define([{
     name: 'slidein',
           
        from:   {'margin-left': '100%'},
        to:   {'margin-left': '10%'}
       }]);

But instead of providing a fixed percentage or px value, I want to use a variable which has a px or percentage value stored in it. I have tried all the below and none worked

   // to:   {'margin-left': bigSlide.width}
   // to:   {'margin-left': 'bigSlide.width'}
   // to:   {'margin-left': calc(bigSlide.width)}
   // to:   {'margin-left': 'calc(bigSlide.width)'}
   // to:   {'margin-left': (100px 630px)}
   // to:   {'margin-left': calc(100px 630px)},
   // to:   {'margin-left':'calc(100vw - 800px)'}

}]);

I tried options such as calc(100px 630px) to just see if I could get calc working.

CodePudding user response：

You need to add a value in the form - to: {'margin-left': bigSlide.width 'px'}. Use concatenation.

CodePudding user response：

Try wrapping your variable in a template literal like this:

\`${variableName}\`

This will make it read as a string with whatever value is in the variable.