Jump to content
Search Community

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

miccodan test

By miccodan
in GSAP

Moderator Tag
 Share

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

miccodan test

miccodan

Posted
Posted 
<!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
Jonathan test

Jonathan

Posted
Posted

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
miccodan test

miccodan

Posted
  • Author
Posted

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
 Share
Go to topic listing

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...