Jump to content



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

Hello all,


I am brand new to GSAP. I am trying to get my fir "to" method working with an object (ball). I was following the official GASP Newbie video. I have tried every way to link to the interpreter files that I can think of. I am trying to do it all on one page. here is my link. note it is a little messy from trying so many options. can someone tell me what I am doing wrong?




Here is the PEN: /dyna1118/pen/RRoPgR


Thanks in advance.

Link to comment
Share on other sites

Hi and welcome to the GreenSock forums.


It looks like you are loading a few files you don't need which are causing some errors. 

In addition, you can not animate the css left or top properties unless those elements have css of position:relative.

(it seems you figured this out in your pen. good!)


Please look at this pen from our Jump Start collection:




This pen is loading TweenLite and CSSPlugin but loading just TweenMax would be fine too.


There is something very strange about the Pen you provided. For some reason the css is not being applied to the element. I tried swapping the img for an h1 with id of logo and tried to give #logo the css of color:green and that didn't even work.


I created a new pen with your code and that worked. Very strange.


Look here:



Thanks again for posting here. Sorry you hit a few snags out of the gate. I think you will find that the rest should be pretty fun;)

  • Like 2
Link to comment
Share on other sites

Hi dyna1118 :)


Your pen wasn't applying the CSS because there was a stray <style> tag in the 'Stuff for the Head' panel. You had this:

<script src='http://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.2/TweenMax.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js'></script><style> // this was the problem
<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.4/plugins/CSSPlugin.min.js"></script>

The easiest way to load JavaScript on CodePen is to click the little gear icon on that panel and load what you need from there. You also don't need to load the CSS plugin as it's already loaded with TweenMax.


Happy tweening.


  • Like 2
Link to comment
Share on other sites

Nice detective work, Craig!

I thought I was going nuts. ;)

Link to comment
Share on other sites

Thanks guys. I got it working and mixed it with sprite sheet, so I'm very happy. I'm on my way and will see you guys around the form. I will join when I get some money. Money is hard to come by because I hate sales, but now maybe in a while I will be able to flash up my site with animations. Her is my first tween:



Thanks Again.



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