Jump to content
Search Community

I'm trying to use GSAP ScrollTrigger, but there's an error. Please help me.

ji hoon test
Moderator Tag

Recommended Posts

<!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()

 

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...