The problem you are having here:
The external links to the libraries on codepen are not linked to correctly. Or you haven’t linked to them at all.
When you click the cog wheel in the JavaSript tab you see external libraries listed there
https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.2/TweenMax.min.js
https://codepen.io/mimikos/pen/GvpJYQ
https://codepen.io/mimikos/pen/rzOOgG
Do you link to these in your code with a <script>
tag?
If not, you should do it!
Then, codepen can actually interpret the links to the libraries through context. If you add an external pen with the pen URL in the JS settings, codepen automatically knows that it should be the JS file and imports the appropriate file with the respective filename extensions like listed here: https://blog.codepen.io/documentation/api/url-extensions/
You for yourself have to do this manually. So the HTML you should add to your code is
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.2/TweenMax.min.js"></script>
<script src="https://codepen.io/mimikos/pen/GvpJYQ.js"></script>
<script src="https://codepen.io/mimikos/pen/rzOOgG.js"></script>
But
It is extremely dangerous to link to external code like this. The JS code could change anytime in the future. This could lead to failure and/or (even worse) massive security holes. It’s better to download the code and save to your webserver and import these
- Background Noise: https://codepen.io/mimikos/pen/GvpJYQ.js save as js/background-noise.js
- GSAP Old Movie Style: https://codepen.io/mimikos/pen/rzOOgG.js save as js/old-movie-style.js
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.2/TweenMax.min.js"></script>
<script src="js/background-noise.js"></script>
<script src="js/old-movie-style.js"></script>
1
solved Need help fixing “property value expected” in CSS (Beginner/amateur) [closed]