He copiado el [código de un Codepen][1] para crear un PopUp animado.

La caja con el texto aparece y se forma, y cuando la tocamos, desaparece de nuevo con la misma animación que al aparecer.

El problema es que no se interpretarlo y cuando lo creo en local, no funciona la animación de la caja del PopUp. Quiero añadir a un sitio de WordPress me diente un bloque y no se muestra.
Primeramente, estoy haciendo pruebas en un sitio web que estoy haciendo localmente en mi PC.

Pero en local no funciona, solo se muestra el texto del `<h1>`, el resto de texto lo muestra en el fondo, a otro nivel que el `<h1>`.

Pueden ejecutar el ejemplo, que parece funcionar, pero en Pantalla completa, no funciona.

He traído las mismas link que tiene el Codepen, pero no funciona de ningún modo.
¿que estoy haciendo mal?
¿como hacer que funcione todo el texto por igual?

Este el código exacto que tengo, únicamente he añadido el `<h2>`y  también el contenido del  `<p>`
No logro entender por que no funciona la animación y porque no se muestra todos los textos al mismo nivel.


**EDITO:**

Ya obtuve una respuesta que me ayudo.
debo añadir que seria necesario adaptar el código a todo tipo de dispositivos.
A pesar de la respuesta, implemente los cambios sugerido y  sigue mostrando error y no funciona la animación del PopUp.
La consola Google muestra:

    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>');
    };


<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

    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);

<!-- language: lang-css -->

    #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;
    }

<!-- language: lang-html -->

    <body>
    <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>
         <script src="popup-vacaciones-copia.js"></script>
         </body>

<!-- end snippet -->


  [1]: https://codepen.io/DreySkee/pen/qBMZbb