Jump to content
GreenSock

SoL2Squiz

Getting Started (Main.JS seems to be not working?)

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 guys,

 

I used to do basic linear (non-programming) animation in flash and bumped into GreenSock 2 days ago. I am seriously thinking of learning this form of animation but I'm having difficulty starting, mainly because I have no background in programming whatsoever.

 

Situation:
I saw the video and tried to duplicate what was said there but I immediately got hit by an error in my MAIN.JS (which I created from scratch using DREAMWEAVER) is this not right? I cannot move on from there and cannot figure out what's wrong with my file.

 

I attached a screenshot of how I structured my files in one folder and  for your reference my "index.htm" code is down below.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>My First GreenSock Animation</title>
</head>


<body>
<div>
<img  class="logo" src="imgs/bubble-crystalclear.png" />
</div>


<!--CDN links for TweenLite, CSSPlugin, and EasePack-->
<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/TweenMax.min.js"></script>
<script src="js/main.js"></script>


</body>
</html>
 
 
Thank you!

post-41756-0-35057100-1454637258_thumb.png

  • Like 1
Link to comment
Share on other sites

Hi SoL2Squiz,

 

Welcome to the forums. Glad you posted here.

 

if you are going to animate the left property of an object you need to make sure that it has a css position.

.logo {
  position:relative;
}

There is a little caption about that in the video but its easy to miss it. We strongly recommend animating x / y instead for performance reasons.

 

If that css doesn't fix it, please zip your files and post them here. We will take a look.

 

Happy Tweening!

  • Like 1
Link to comment
Share on other sites

Hi SoL2Squiz,

 

Welcome to the forums. Glad you posted here.

 

if you are going to animate the left property of an object you need to make sure that it has a css position.

.logo {
  position:relative;
}

There is a little caption about that in the video but its easy to miss it. We strongly recommend animating x / y instead for performance reasons.

 

If that css doesn't fix it, please zip your files and post them here. We will take a look.

 

Happy Tweening!

 

 

Thank you for replying to my post. I'll take another look at this and see if it works.

Link to comment
Share on other sites

Hi,

 

I'm not sure where it went wrong but I still cannot make the graphic move/tween.

 

@carl

 

Here's the zip file of my file.

 

greensock-js 2.zip

Link to comment
Share on other sites

in my "main.js" file, it says this:

 

invalid character '\u8220'

 

the think is, i created the "main.js" file using Dreamweaver 6, is this an issue?

Link to comment
Share on other sites

  • Solution

That character is invalid because your not using a real quote for UTF-8. And it is getting parsed wrong in the browsers JS parser. You probably have to set Dreamweaver default character set to use UTF-8. It looks like you probably copied those quotes from Microsoft word or from someplace with a different character set.

 

In your main.js you have this:

TweenMax.to(“.logo”, 2, {left:600});

Notice the double quotes are slanted.. that is not proper syntax for quotes. You need to use the quotes that are straight like this

// you need to use the upright double quotation mark
TweenMax.to(".logo", 2, {left:600});

Also you should use Carls suggestion from above and not animate the left property but use x (translateX) instead, so do this:

TweenMax.to(".logo", 2, {x:600});

As a rule of thumb, it best not to animate the position offsets top, bottom, left, or right. This is due to those properties not being able to animate on a sub-pixel level. And they wont animate on the GPU for hardware acceleration. Animating CSS position offsets will cause jank, jitter, jumps, and force layout changes of the page which can cause bad and not smooth animations.

 

So you should change left to use x (translateX)

 

Here is an article by GreenSocks Jack on using CSS transforms x and y over animating position offsets.

 

https://css-tricks.com/myth-busting-css-animations-vs-javascript/

 

Just keep in mind CSS position offsets (top, left, bottom, and right) are only good for setting the initial position of your elements. But when you animate your elements you want to use CSS transforms like x and y instead of left and top.

 

:)

  • Like 6
Link to comment
Share on other sites

thank you so much!!! that was a NOOB MISTAKE but thank you!!!

  • Like 2
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.
×