Jump to content
Search Community

Getting started

Stefan_ test
Moderator Tag

Go to solution Solved by Jonathan,

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

Hi everyone, 
 
i am new to GreenSock an have issues including it into my work. It seems that the script is not recognized or i have done a basic mistake. Either way can anybody help me get this running. I have a basic <div> and just wont to animate the opacity with GreenSock to see if it is working. 
<!DOCTYPE html>
<head>

   <style type="text/css">
        
       .demo {
           
            position: fixed;
            width: 50px;
            height: 50px;
            top: 50%;
            left: 50%;
            background-color: black;
            opacity: 1;
        
       }
    
    </style>
      
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>     
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/TweenMax.min.js"></script>
    
    <script>
    
    TweenLite.to(".demo", 2, {opacity: 0});
    
    </script>
    
</head>

<body>
        <div class="demo"></div>
</body>
</html>

I can include jQuery over the CDN link just fine but greensock seems not to work. 

 

I am using Brackets 1.7 and Chrome Version 52.0.2743.116 (64-bit) on a Mac.

 

Link to comment
Share on other sites

  • Solution

Hello Stefan_, and welcome to the GreenSock Forum!

 

What it looks like is happening is that your code is running before the DOM (HTML markup) is ready.

 

So you can try two things!

 

1) add your custom code at the bottom of the page before the ending body tag, so it only runs when the element your targeting to animate is ready

<!DOCTYPE html>
<head>

   <style type="text/css">
        
       .demo {
           
            position: fixed;
            width: 50px;
            height: 50px;
            top: 50%;
            left: 50%;
            background-color: black;
            opacity: 1;
        
       }
    
    </style>

</head>

<body>

<div class="demo"></div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>     
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/TweenMax.min.js"></script>

<script>
TweenLite.to(".demo", 2, {opacity: 0});
</script>

</body>
</html>

2) Or you can add a jQuery ready(0 event since your already using jQuery

<!DOCTYPE html>
<head>

   <style type="text/css">
        
       .demo {
           
            position: fixed;
            width: 50px;
            height: 50px;
            top: 50%;
            left: 50%;
            background-color: black;
            opacity: 1;
        
       }
    
    </style>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>     
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/TweenMax.min.js"></script>

<script>
jQuery(document).ready(function(){

     TweenLite.to(".demo", 2, {opacity: 0});

});
</script>

</head>

<body>

<div class="demo"></div>

</body>
</html>

But it is best to have all JS script tags in the bottom of the page before the ending body tag so your code only runs when the DOM is ready

 

Hope this helps! If not then please create a demo example through codepen so we can test your code live.

 

 

Thanks! :)

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