So in your code it only took a second to see you're running .Pause() and .Resume() on the click event of btn2.
$('#btn2').click(function(){
Actions[iCurrAction].Pause();
});
$('#btn2').click(function(){
//alert('C');
Actions[iCurrAction].Resume();
});
Both of these run and so the animation pauses then immediately resumes.
I'm assuming you want the resume to trigger on the click event of btn3, not btn2
Changing the Resume event trigger to btn3 solved your issue and also made the resume button work
$('#btn2').click(function(){
Actions[iCurrAction].Pause();
});
$('#btn3').click(function(){ // changed to #btn3
//alert('C');
Actions[iCurrAction].Resume();
});
The issue in your codepen is that TweenLite does not have CSS support without the CSS plugin.
TweenMax does have the CSS plugin bundled with it and so it works without adding the plugin separately.
As you can see here
See the Pen yJvaYa by craigster1991 (@craigster1991) on CodePen
I've simply added the CSS plugin to the pen and it works as expected.
You can read more about the CSS plugin here: https://greensock.com/CSSPlugin
CraigWheatley's post in Issue with TimelineMax .pause() was marked as the answer