Using CSS classes as jQuery variables
<p>To my understanding, in <code>jQuery</code> you can set a variable then use it later down the line.</p>

<pre><code>var x = 2;
function add() {
    x = x + 2;
}
</code></pre>

<p>In my code, I have a <code>CSS</code> class as a variable.</p>

<pre><code>var scroll = $('.verticalScrollBar');
function changeScrollBar() {
    ...
    TweenMax.set(scroll, {css:{height:scrollBarHeight+'%'}});
    ...
}
</code></pre>

<p>However, this does not seem to work. Initially, I thought it might have been a problem with <code>GSAP TweenMax</code> so I tried the following code.</p>

<pre><code>function changeScrollBar() {
    ...
    TweenMax.set($('.verticalScrollBar'), {css:{height:scrollBarHeight+'%'}});
    ...
}
</code></pre>

<p>To my surprise this did work. So my question is why does the line of code <code>TweenMax.set($('.verticalScrollBar'), {css:{height:scrollBarHeight+'%'}});</code> work but this line of code <code>TweenMax.set(scroll, {css:{height:scrollBarHeight+'%'}});</code> does not?</p>

<p>Working example <a href="https://jsfiddle.net/Vusa360/t3xjh6jv/4/" rel="nofollow">JSFiddle</a></p>

<p>Broken example <a href="https://jsfiddle.net/Vusa360/t3xjh6jv/2/" rel="nofollow">JSFiddle</a></p>