CODEWITHSUNDEEP
javascriptjquerycssgsap
JohnG
JohnG

Reputation: 497

Getting started with GSAP

I'm trying to do my first tween with GSAP, and nothing's happening, even when I've tried to use example code.

I have a php file with the following code:

<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<style>
  #green {
    width: 100px;
    height: 100px;
    background-color: #0D9C02;  
  }
</style>
</head>
<body>
<div id="green"></div>
<script type="text/javascript" src="js/greensock/plugins/CSSPlugin.min.js"></script>
<script type="text/javascript" src="js/greensock/TweenLite.min.js"></script>
<script>
  $(document).ready(function(){
    var logo = document.getElementById("green");
    TweenLite.to(logo, 1, {left:"600px"});
  });
</script>
</body>

All I get though is a static green square. I must be missing something fundamental - but what?? Thanks.

Upvotes: 1

Views: 554

Answers (4)

Diego Casta&#241;o
Diego Casta&#241;o

Reputation: 46

The element needs to have a position value of relative, absolute or fixed to be able to move it tweening the left value. I would further suggest not tweening the left property but the x property. since x and y properties use transform instead it will be better performance.

Upvotes: 0

Ishita
Ishita

Reputation: 36

You need to create a TimeLine first where you can attach your tweens. You can use either TimelineLite or TimelineMax (there is slight difference between two).

Use following code-

<head>
<script src="https://cdn.flashtalking.com/frameworks/js/gsap/1.18.0/TimelineLite.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<style>
  #green {
    width: 100px;
    height: 100px;
    background-color: #0D9C02;  
  }
</style>
</head>
<body>
<div id="green"></div>
<script type="text/javascript" src="js/greensock/plugins/CSSPlugin.min.js"></script>
<script type="text/javascript" src="js/greensock/TweenLite.min.js"></script>
<script>
  $(document).ready(function(){
    theTimeline = new TimelineLite();
    var logo = document.getElementById("green");
    theTimeline.add(new TweenLite.to(logo, 1, {left:"600px"}));
  });
</script>
</body>

Upvotes: 0

answer99
answer99

Reputation: 251

position property in css is missing

Jsfiddle

HTML elements are positioned static by default. The left property has no effect if the element is position:static.

Upvotes: 1

JohnG
JohnG

Reputation: 497

Simple solution: needed position: relative; in the css to work.

Upvotes: 1

Related Questions