Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
miccodan

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

Recommended Posts

<!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.

Link to comment
Share on other sites

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.

  • Like 2
Link to comment
Share on other sites

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

 

:)

Link to comment
Share on other sites

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

:)

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.
×