Jump to content
Search Community

Absolute beginner move div to right

kevinwaterson test
Moderator Tag

Go to solution Solved by Carl,

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 kevinwaterson, and Welcome to the GreenSock Forum


It is not translating to the right due to a typo in your target selector.


See the Pen dMdwjz by jonathan (@jonathan) on CodePen


You have this #yId missing the m:

tl.to("#yId", 1, {x:500})

but it should be this since the <div> your targeting has an id of #myId

tl.to("#myId", 1, {x:500})


  • Like 1
Link to comment
Share on other sites

Make sure you are using the latest version of GSAP that has a version number.

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.2/TweenMax.min.js"></script>

Also if you are using a script link that has latest in it like below.. be careful..

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>

Because for some reason the CDN is not updating the latest script link with the latest version number of GSAP.



  • Like 1
Link to comment
Share on other sites

What is the GSAP TweenMax script url you are using locally?


In my working codepen from above i am using the TweenMax 1.18.2 


Also make sure that anytime you animate any DOM element. That you should and must have CSS position absolute or relative if you want your element to animate properly.


I also suggest you read up on the GSAP Docs. They should give some useful tips on using GSAP:


TweenMax: http://greensock.com/docs/#/HTML5/GSAP/TweenMax/

TimelineMax: http://greensock.com/docs/#/HTML5/GSAP/TimelineMax/

TimelineLite: http://greensock.com/docs/#/HTML5/GSAP/TimelineLite/

CSSPlugin: http://greensock.com/docs/#/HTML5/Plugins/CSSPlugin/



  • Like 1
Link to comment
Share on other sites

  • Solution

Hi Kevin,


Welcome to the GreenSock forums.


I think the problem is that you are loading main.js BEFORE the element you are trying to animate is available in the DOM.

To get around this the easiest / safest thing to do is to load your custom animation script right before the closing body tag like



<!--CDN link for  TweenMax-->
<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.2/TweenMax.min.js"></script>
<link rel="stylesheet" href="/css/style.css">


<div id="container">
        <div id="myId">This is not a love song</div>
<script src="/js/main.js"></script>

The reason it worked on CodePen is because CodePen automatically places  anything you write in the JS panel in a similar spot. Take a look in Dev Tools when you run your pen:




This is not a love song ;)

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