Jump to content
Search Community

Absolute beginner move div to right

kevinwaterson test

By kevinwaterson
in GSAP

Moderator Tag
 Share
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

Jonathan test

Jonathan

Posted
Posted

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

Jonathan

Posted
Posted

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

Jonathan

Posted
Posted

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 

https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.2/TweenMax.min.js

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

Carl

Posted
  • Solution
Posted

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

 

<html>
<head>


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




</head>
<body>


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

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:

 

H7PUJri.png

 

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

  • Recently Browsing   0 members

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