gsap not working at all with no errors in console

piyush · March 3, 2016

<!DOCTYPE html>
<html>
    <head>
	<link rel="stylesheet" type="text/css" href="css/style.css">
   <script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.2/TweenMax.min.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
		<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.0.min.js"></script>
		
		
		  <script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
		<script src="js/main.js"></script>
	</head>
	<body>
	    <h1><strong>Green<span>Sock</span></strong> - TweenLite</h1>
<div id="box">
  <div class="boxSmall"></div>
  <div class="boxSmall boxTiny"></div>
</div>
	   
	</body>
</html>

this is my index file

// 1. Create a variable
var $box = $('#box');

// 2. Create a First .to() Tween
// TweenLite.to($box, 0.7, {left: 0, x: 0});

// 3. Create a .from() Tween
// TweenLite.from($box, 2, {x: '-=200px', autoAlpha: 0});

// 4. Create a .set() Tween
//TweenLite.set($box, {x: '-=200px', scale: 0.3});
//TweenLite.set($box, {x: '+=100px', scale: 0.6});
//TweenLite.set($box, {x: '-50%', scale: 1});

// 5. Create a .fromTo() Tween
//TweenLite.fromTo($box, 2, {x: '-=200px'}, {x: 150});

// 6. Easing
TweenLite.fromTo($box, 2, {x: '-=200px'}, {x: 150, ease:Power4.easeInOut, onStart: start, onUpdate: update, onComplete: complete});

TweenLite.to($box, 0.4, {top: '100%', y: '-100%', ease:Bounce.easeOut, delay: 2});
TweenLite.to($box, 0.7, {x: '-=200px', y: '-100%', ease:Back.easeInOut, delay: 3});
TweenLite.to($box, 0.8, {x: '-=200px', y: '-100%', ease:Back.easeInOut, delay: 4.2});
TweenLite.to($box, 2.5, {top: '50%', y: '-50%', ease:Power0.easeNone, delay: 5});
TweenLite.to($box, 2.5, {x: '+=400px', ease:Elastic.easeInOut, delay: 7.7});
TweenLite.to($box, 2.5, {x: '-=400px', rotation: -720, ease: SlowMo.ease.config(0.1, 0.7, false), delay: 10.4});


// 7. Callback functions
function start(){
  console.log('start');
}

function update(){
  console.log('animating');
}

function complete(){
  console.log('end');
}

this is the javascript

html, body {
  height: 100%;
}
body {
  background-color: #262626;
  font-family: 'Open Sans', sans-serif;
  overflow: hidden;
}
h1 {
  font-size: 16px;
  width: 300px;
  color: #838484;
  font-weight: 300;
  text-align: center;
  span {
    color: #89c540;
  }
  strong {
    color: #fff;
  }
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -180px);
  padding: 10px 20px;
  border: 1px solid transparentize(white, .7);
}
#box {
  background-color: #88ce02;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100px;
  height: 100px;
  transform: translate(-50%, -50%);
  z-index: 1;
}

.boxSmall {
  position: absolute;
  background-color: #70a40b;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 25px;
  height: 75px;
  z-index: 2;
}

.boxTiny {
  background-color: #577a14;
  height: 50px;
  bottom: 0;
  right: 0;
  left: auto;
  z-index: 3;
}

and this is the css part

sorry for asking such a silly question in the forum

actually i copied these codes from codepen and pasted in notepad to see the results in browser but no animation plays and also there is no error in console

Jonathan · March 3, 2016

Hello piyush, and Welcome to the GreenSock Forum!

I notice that in the code provided above... you are including 3 separate jQuery core script tags. You should just have one instance of jQuery

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.0.min.js"></script>
<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>

And your animating first the x (translateX) CSS property and then the top CSS property. It is always best to animate x and y versus top and left. CSS transforms will animate on a sub-pixel level, whereas CSS position offsets like top and left will not, and not be very smooth when animating.

It is better to just setup the initial position of your elements with position offsets like top and left. And then animate using transforms like x and y with GSAP. I wouldn't mix or animate both x and left or even y and top. You will get different results cross browser, so I would remove top and left from your to() tweens. And just leave the position offsets like top and left in your css stylesheet. Stick to animating with x and y.

Also GSAP is not dependent on jQuery so you can just pass your selector as a string.. for example you have this $box = $('#box')

TweenLite.to($box, 0.4, {top: '100%', y: '-100%', ease:Bounce.easeOut, delay: 2});

But you can just do this with the GSAP to() target:

// just pass as a simple string without jQuery
TweenLite.to("#box", 0.4, {y: '-100%', ease:Bounce.easeOut, delay: 2});

// or this
var $box = "#box";
TweenLite.to($box, 0.4, {y: '-100%', ease:Bounce.easeOut, delay: 2});

It will be hard to debug your code by just looking at your code.

If possible can you please setup a limited codepen demo example so we can see and test your code live.

Thanks!

GreenSock · March 3, 2016

The other problem seems to be that you're running your animation code BEFORE the elements even exist on the page (notice your <script> tag is above where you define the various <div> elements). So basically when your code runs, it's unable to find the elements and doesn't tween them Put your script tag at the bottom and you should be golden.

Notifications

Messages

gsap not working at all with no errors in console

Warning: Please note

Recommended Posts

piyush

Link to comment

Share on other sites

Jonathan

Link to comment

Share on other sites

GreenSock

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Recently Browsing 0 members