Jump to content
Search Community

gsap not working at all with no errors in console

piyush test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

<!DOCTYPE html>
	<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>
	    <h1><strong>Green<span>Sock</span></strong> - TweenLite</h1>
<div id="box">
  <div class="boxSmall"></div>
  <div class="boxSmall boxTiny"></div>

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

function update(){

function complete(){

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

Link to comment
Share on other sites

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.




  • Like 3
Link to comment
Share on other sites

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. 

  • Like 5
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...