I have copied the code from a Codepen to create an animated PopUp.

The box with the text appears and forms, and when we touch it, it disappears again with the same animation as when it appeared.

The problem is that it cannot be interpreted and when I create it locally, the animation of the PopUp box does not work. I want to add a block to a WordPress site and it doesn’t show up. Firstly, I am testing a website that I am doing locally on my PC.

But it doesn’t work locally, only the text of <h1> is shown, the rest of the text is shown in the background, at a different level than <h1>.

You can run the example, which seems to work, but in Full Screen, it doesn’t work.

I have brought the same links that the Codepen has, but it does not work in any way. what am I doing wrong? How to make all the text work equally?

This is the exact code I have, I have only added the <h2> and also the content of the <p> I cannot understand why the animation does not work and why all the texts are not displayed at the same level.

Despite the response, implement the suggested changes and it still shows an error and the PopUp animation does not work. The Google console shows:

Failed to load resource: net::ERR_FILE_NOT_FOUND

.js:8 Uncaught ReferenceError: $ is not defined

for (var i = pieces - 1; i >= 0; i--) {
  $('#popup').prepend('<div class="piece" style="width:'+pieceW+'px; height:'+pieceH+'px"></div>');
};

#wrap {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background-color: #333;
    overflow: hidden;
}

#popup {
    position: absolute;
    width: 300px;
    height: auto;
    top: 50%; left: 50%;
    margin-left: -150px; margin-top: -100px; 

    -webkit-perspective: 800px;
    -webkit-perspective-origin: 50% 50px;
   perspective: 800px;
   perspective-origin: 50% 50px;    
}

.piece {
    background: rgba(95,144,222,0.5);
    float: left;
}

#popup h1 {
    position: absolute;
    text-align: center;
    width: 100%;
    height: 40px;
    top: 50%; margin-top: -20px;    
    font-family: 'Noto Sans', sans-serif;
    color: #ccc;
}

.reverse {
    position: absolute;
    top: 30px;
    left: 50%;
    margin-left: -30px;
    font-family: 'Noto Sans', sans-serif;
    color: #ccc;
    cursor: pointer;
}

  <div id="wrap">
    <div id="popup">
        <h1>Bienvenidos de nuevo</h1>
        <h2>Hoy traemos cosas nuevas</h2>
        <p>Disculpa la espera </pp>
        <p>¡¡Nos vemos pronto con muchas sorpresas!!</p>
    </div>  
</div>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>
var pieces = 70,
    speed = 1,
    pieceW = 30,
    pieceH = 30;


for (var i = pieces - 1; i >= 0; i--) {
  $('#popup').prepend('<div class="piece" style="width:'+pieceW+'px; height:'+pieceH+'px"></div>');
};

function breakGlass(from){
  if (from === "reverse"){
    $('.piece').each(function(){
      TweenLite.to($(this), speed, {x:0, y:0, rotationX:0, rotationY:0, opacity: 1, z: 0});
      TweenLite.to($('#popup h1'),0.2,{opacity:1, delay: speed});
    });
    return;
  }

  if(!from){
    TweenLite.to($('#popup h1'),0.2,{opacity:0});
  } else {
    TweenLite.from($('#popup h1'),0.5,{opacity:0, delay: speed});
  }

  $('.piece').each(function(){
    var distX = getRandomArbitrary(-250, 250),  
        distY = getRandomArbitrary(-250, 250),
        rotY  = getRandomArbitrary(-720, 720),
        rotX  = getRandomArbitrary(-720, 720),
        z = getRandomArbitrary(-500, 500);

    if(!from){
      TweenLite.to($(this), speed, {x:distX, y:distY, rotationX:rotX, rotationY:rotY, opacity: 0, z: z});   
    } else {
      TweenLite.from($(this), speed, {x:distX, y:distY, rotationX:rotX, rotationY:rotY, opacity: 0, z: z}); 
    }               
  });   
}

function getRandomArbitrary(min, max) {
  return Math.random() * (max - min) + min;
}


$('.piece, h1').click(function(){
  breakGlass(); 
}); 
$('.reverse').click(function(){
  breakGlass('reverse');    
}); 

breakGlass(true);

I have changed CSS styles several times, without success.
I have also added some links to the libraries:

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>