Can someone kindly assist me with why my code wont work.

December 21, 2013

<!DOCTYPE html>
<html>
<head>
    <title>tween-test</title>
    <meta charset="utf-8" content="text/html">
    <script src="js/video.js" type="text/javascript"></script>
    <script src="js/TweenMax.js" type="text/javascript"></script>
    <script src="js/jquery.gsap.js" type="text/javascript"></script>
    <script src="js/CSSPlugin.js" type="text/javascript"></script>
</head>
<body>
<style type="text/css">
 body
 {
     background-image:url('images/bg_main.jpg');
 }
</style>

<p>
<span id="test-1">C</span> <span id="test-2">O</span> <span id="test-3">T</span> <span id="test-4">Y</span>
</p>
<script type="text/javascript">
    $(function(){
       var testing;
        testing = $("#test-1");
        TweenMax.from(testing, 4,{css:{
            top:"-300px"
        }});

    });
</script>
</body>
</html>

I am VERY new, so it is probably something really basic, but I can not figure it out for the life of me. Thanks in advance.

December 21, 2013

Hello and Welcome to the GreenSock forums.

In order to do a positional change (top / left) the element that is being tweened must have its position set in the css (most commonly absolute or relative) as shown here:

http://codepen.io/GreenSock/pen/dgmia

you should do:

#test-1{
 position:relative;
}

let us know if that helps.

December 21, 2013

hello.. Carl beat me to it..

also looks like in your code above that your including the script CSSPlugin.js.. so since you are including TweenMax.js script, you dont need to include CSSPlugin.js ..

TweenMax includes all the goodies.. TweenLite, TimelineLite, TimelineMax, CSSPlugin, and much more for convenience.

http://api.greensock.com/js/com/greensock/TweenMax.html

December 22, 2013

Thanks a bunch, It works awesome!

Hello and Welcome to the GreenSock forums.

In order to do a positional change (top / left) the element that is being tweened must have its position set in the css (most commonly absolute or relative) as shown here:

See the Pen dgmia by GreenSock (@GreenSock) on CodePen.

you should do:
#test-1{
 position:relative;
}
let us know if that helps.

hello.. Carl beat me to it..

also looks like in your code above that your including the script CSSPlugin.js.. so since you are including TweenMax.js script, you dont need to include CSSPlugin.js ..

TweenMax includes all the goodies.. TweenLite, TimelineLite, TimelineMax, CSSPlugin, and much more for convenience.

http://api.greensock.com/js/com/greensock/TweenMax.html

Notifications

Messages

Can someone kindly assist me with why my code wont work.

Warning: Please note

Recommended Posts

miccodan

Carl

Jonathan

miccodan

Create an account or sign in to comment

Create an account

Sign in

Recently Browsing 0 members