GSAP is not working locally (But working in Codepen)

sujith · June 2, 2021

Someone help me with this.

I am trying GSAP for the first time and its not working.

I used GSAP cdn , but its not working. But when i copy the same code and add GSAP cdn in codepen, it is working there.

pls help!!!!

HTML :


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Sample</title>
    <link rel="stylesheet" href="style.css">
    <meta name="viewport" content="width=device-width, initial-scale=1">

<link href="https://fonts.googleapis.com/css?family=Bubblegum+Sans|Nova+Mono|Roboto+Condensed" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.1/gsap.min.js"></script>
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="script.js"></script>

	
  </head>
  <body>

  	<nav>
  		<ul>
  			<li><a href="#" class="active">Home</a></li>
  			<li><a href="#">About</a></li>
  			<li><a href="#">Projects</a></li>
  			<li><a href="#">Content</a></li>
  		</ul>
  		<div id="icon">
  			<i class="fa fa-bars"></i>
  		</div>
  	</nav>

  	<div class="container">
  		
          <div class="final__layers">
            
            <img src="phone.svg" alt="back layer" class="phone">
            <img src="content.svg" alt="mid layer" class="content">
            <img src="image.svg" alt="top layer" class="image">
           
          </div>


          <div class="cont" id="ckkk">
          	<h2>Heading</h2>
          	<p>para</p>
          </div>

    </div>


  </body>
</html>

*{
	padding: 0;
	margin: 0;
	text-decoration: none;
	list-style: none;
}

body{
	font-family: sans-serif;
}

nav{
	background-color: black;
	position: sticky;
	top: 0;
	height: 50px;
	max-width: 100%;
}

nav ul{
	float: left;
	margin-left: 40px;
	text-align: center;
} 

nav li{
	display: inline-block;
	margin: 0 8px;
	line-height: 50px;

}

nav a{
	color: white;
	font-size: 15px;
	text-transform: uppercase;
	border: 1px solid transparent;
	padding: 5px 10px;
	border-radius: 3px;

}

a.active, a:hover{
	border: 1px solid white;
	transition: .5s;
}

nav #icon{
	color: white;
	font-size: 30px;
	float: left;
	margin-left: 40px;
	line-height: 50px;
	cursor: pointer;
	display: none;
}



.container{
	text-align: center;
	position: relative;


}

.final__layers {

	position: absolute;
  padding: 70px;
  min-height: 200px;
  max-width: 100px;
  text-align: center;
  grid-area: svg;

}

.final__layers img {
  position: absolute;
  max-width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  z-index: -1;

}

.final__layers img.content{
	padding-left: 70px;
	padding-top: 60px;
	height: 250px;

}

.final__layers img.image{
	padding-left: 20px;
	padding-top: 60px;
	height: 250px;

}


.final__layers img.phone {
		transform: perspective(1200px) rotateX(50deg) rotateY(20deg) rotateZ(-25deg) translateX(35px) translateY(0px) translateZ(120px);

	animation: anim 5s infinite ease-out;
  
}

.final__layers img.image,img.content {
		transform: perspective(1200px) rotateX(50deg) rotateY(20deg) rotateZ(-25deg) translateX(35px) translateY(0px) translateZ(160px);
 	animation: animm 5s infinite ease-out; 
}
/*.final__layers img.content {
		transform: perspective(1200px) rotateX(50deg) rotateY(20deg) rotateZ(-25deg) translateX(35px) translateY(0px) translateZ(180px);
animation: animmm 5s infinite ease-out; 
}
*/

@keyframes anim{

	0%{
		transform: perspective(1200px) rotateX(50deg) rotateY(20deg) rotateZ(-25deg) translateX(35px) translateY(0px) translateZ(120px);
	}

	50%{
		  transform: perspective(1200px) rotateX(50deg) rotateY(20deg) rotateZ(-25deg) translateX(35px) translateY(0px) translateZ(100px);
	}
	100%{
		transform: perspective(1200px) rotateX(50deg) rotateY(20deg) rotateZ(-25deg) translateX(35px) translateY(0px) translateZ(120px);
	}
}

@keyframes animm{

	0%{
		transform: perspective(1200px) rotateX(50deg) rotateY(20deg) rotateZ(-25deg) translateX(35px) translateY(0px) translateZ(130px);
	}

	50%{
		  transform: perspective(1200px) rotateX(50deg) rotateY(20deg) rotateZ(-25deg) translateX(35px) translateY(0px) translateZ(140px);
	}
	100%{
		transform: perspective(1200px) rotateX(50deg) rotateY(20deg) rotateZ(-25deg) translateX(35px) translateY(0px) translateZ(130px);
	}
}

@keyframes animmm{

	0%{
		transform: perspective(1200px) rotateX(50deg) rotateY(20deg) rotateZ(-25deg) translateX(35px) translateY(0px) translateZ(180px);
	}

	50%{
		  transform: perspective(1200px) rotateX(50deg) rotateY(20deg) rotateZ(-25deg) translateX(35px) translateY(0px) translateZ(200px);
	}
	100%{
		transform: perspective(1200px) rotateX(50deg) rotateY(20deg) rotateZ(-25deg) translateX(35px) translateY(0px) translateZ(180px);
	}
}


.cont{
	position: absolute;
	grid-area: text;
	right: 150px;
	top: 50px;

}


@media screen and (max-width: 909px) {
	nav #icon{
		display: block;
	}
	
	nav ul{
		position: fixed;
		width: 100%;
		height: 100%;
		background-color: black;
		opacity: 0.8;
		text-align: center;
		margin-left: 0;
		top:-100%;
		z-index: 2;
	}
	nav li{
		display: block;
		line-height: 50px;
	}
	a.active, a:hover{
		border: none;
		color: #3399ff;	
	}

	nav ul.show{
		top: 50px;
		transition: .2s;
	}

.cont{
	position: absolute;
	grid-area: text;
	right: 10px;
	top: 50px;

}


}

JS:

// "to" tween (animate to provided values)
gsap.to(".cont", { // selector text, Array, or object
  x: 100, // any properties (not limited to CSS)
  backgroundColor: "red", // camelCase
  duration: 1, // seconds

});


	$(document).ready(function(){
		$('#icon').click(function(){
			$('ul').toggleClass('show');
		});
	});

When i inspect in the google chrome, it consoles this.

Carl · June 2, 2021

Hi and welcome to the GreenSock forums,

It sounds like you are running your javascript BEFORE the DOM is accessible.

Either put your tween code inside the jQuery document ready OR just make sure your script is right before the closing </body> tag.

<script>

gsap.to(".cont", { // selector text, Array, or object
  x: 100, // any properties (not limited to CSS)
  backgroundColor: "red", // camelCase
  duration: 1, // seconds

});

</script>

</body>

or if you code is in that external file, load it right before the closing body (not in the head)

<script src="script.js"></script>

</body>

sujith · June 2, 2021

Hey @Carl thanks a lot, it worked!!!.

Notifications

Messages

GSAP is not working locally (But working in Codepen)

Recommended Posts

sujith

Link to comment

Share on other sites

Carl

Link to comment

Share on other sites

sujith

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Recently Browsing 0 members