<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>GSAP</title>
<style type="text/css">
*{margin: 0; padding: 0; box-sizing: border-box;}
#wrap{background: #eee;}
p{width: 100px; height: 100px; margin-bottom: 300px; border: 2px solid #555; border-radius: 5px;}
p:nth-of-type(1){background: springgreen;}
p:nth-of-type(2){background: teal;}
p:nth-of-type(3){background: salmon;}
p:nth-of-type(4){background: darkturquoise;}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/ScrollTrigger.min.js"></script>
</head>
<body>
<div id="wrap">
<p class="p1">p1</p>
<p class="p2">p2</p>
<p class="p3">p3</p>
<p class="p4">p4</p>
</div>
<script type="text/javascript">
gsap.registerPlugin(ScrollTrigger);
gsap.to('.p2',{
ScrollTrigger:{
trigger: '.p3',
markers:true,
toggleActions:"play none none none"
},
x:300,
y:500,
duration:4
});
</script>
</body>
</html>
This error message appears : gsap.min.js:10 Invalid property ScrollTrigger set to Object Missing plugin? gsap.registerPlugin()
