Jump to content
Search Community

Former Flasher now Javascripter with tons of questions

Bitcrusher test
Moderator Tag

Go to solution Solved by ohem,

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

Like many I ended up needing a crash course on javascript after the browsers vs. adobe was launched.  While I am quite familiar with running GS with actionscript I'm finding that doing the same isn't transitioning over as easily as I thought, generating a ton of questions and hair-pulling.

 

So the company I work for has an expanding banner product that uses javascript (primarily) in a separate file, nothing on the page or inline.  Layout is all CSS + DIVs.  While trying to set up even some super rudimentary animations I'm finding that either the function doesn't run or there are errors.

 

Questions are...

 

+ Possible to set functions in javascript, or do I need to use jquery?   I tried to do a simple bit of animation and so far no dice =

 

 

HTML Page

 

<script src="gs/TweenMax.min.js"></script>

<div id='300x250BannerCopy'>banner copy to move?</div>

 

CSS File

#300x250BannerCopy {
width:200px;
height:46px;
background-color:#FF8500;
padding:10px;
font-family:Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size:17px;
font-weight:bold;
color:#fff;
position: relative;
  display: block;
}
 
and in a .js file
 
function 300x250AnimateBanner(){
var copyOne = document.getElementById('300x250BannerContainer');
TweenMax.to(copyOne, 1, {left:'400px'});
}
 
300x250AnimateBanner();
 
which I would have expected to move the div over but nothing happens.  I went through a number of pages plus tried to do some searches online to see if I could find anything else that might help but nothing really pointed to how to handle running TweenLite or Max through javascript. 
 
Also tried to do TweenMax.to('#300x250BannerContainer', 1, {left:'400px'}); but no results.  Running TweenMax / Lite in Flash was quite a bit easier...
 
Would I need to use the CSS plugin for this instead?  Which I tried but that didn't really do anything either.
 
Any guidance or suggestions would be greatly appreciated!

 

Link to comment
Share on other sites

Try this:

See the Pen wKMeEM by ohem (@ohem) on CodePen

 

I think the main issue was that you were starting your div ID with a number: https://css-tricks.com/ids-cannot-start-with-a-number/

 

Your function also works fine if you name it AnimateBanner instead of 300x250AnimateBanner: 

See the Pen pjgWPX by ohem (@ohem) on CodePen

 

https://mathiasbynens.be/notes/javascript-identifiers

 

 

An identifier must start with $, _, or any character in the Unicode categories “Uppercase letter (Lu)”“Lowercase letter (Ll)”“Titlecase letter (Lt)”“Modifier letter (Lm)”“Other letter (Lo)”, or “Letter number (Nl)”.

 

The rest of the string can contain the same characters, plus any U+200C zero width non-joinercharacters, U+200D zero width joiner characters, and characters in the Unicode categories“Non-spacing mark (Mn)”“Spacing combining mark (Mc)”“Decimal digit number (Nd)”, or“Connector punctuation (Pc)”.

 

  • Like 3
Link to comment
Share on other sites

Hello, welcome!

 

Just to add a semi-pro tip, on top of what Ohem has already answered.

 

If you are Tweening using the id of the object and you know you won't be using the variable anywhere else, you don't even need to refer it as '#idName', you can pass the id name as an object and TweenMax will find it without the need of any other external selector engine (it has its own). So, you can just write idName, without the quotes and without the #.

 

Like this:

See the Pen zvrWqz by dipscom (@dipscom) on CodePen

Link to comment
Share on other sites

Thanks!

 

The actual name of the DIV and code was stripped out due to legal reasons (I work in the medical industry), so normally it would start off with some letters pertaining to the campaign versus numbers.  Looking over the code that you both had passed over looked about right so the other thing I might be running into would be any other javascript that is killing the actual tween.  There are a number of API functions from the company we use to serve out the ads that could be the problem.

Link to comment
Share on other sites

as a follow-up, more weirdness.  I tried the codes from everyone to see if there might've been something that I was missing but no luck.  I then decided to roll it back, stripped out all javascript in my .js file outside of the basic animation function and again, nothing.  One thing that I did run into yesterday and again today was an error that pops up in the console

 

Uncaught Cannot tween a null object

TweenMax.js 6539

 

The odd thing is that line in the code is for TweenLite.  The version I'm running was

 

 * VERSION: 1.18.0
 * DATE: 2015-09-05
 
which I had just downloaded.
 
so, to expand on the code that I have...
 
 
HTML page:
<head>
<title></title>
<link rel="stylesheet" href="css/pr300x250.css" />
<script type="text/javascript" src="js/pr300x250.js"></script>
<script type="text/javascript" src="gs/easing/EasePack.js"></script>
<script type="text/javascript" src="gs/plugins/CSSPlugin.js"></script>
<script type="text/javascript" src="gs/TweenMax.js"></script>
 
</head>
 
<body>
<div id='pr300x250BannerCopy'>banner copy to move?</div>
</body>
 
</html>

 

 

CSS didn't change and the .js file (now) just has

 

// JavaScript Document
 
 
var copyOne = document.getElementById('pr300x250BannerCopy');
 
function AnimateBanner(){
TweenMax.to(copyOne, 1, {left:'400px', repeat:-1, repeatDelay:1, yoyo:true});
}
 
AnimateBanner();
 
So pretty stripped down and yet, when I pop this into chrome (locally) nothing happens.  Dreamweaver throws a warning/error that TweenMax is not defined in the .js file and I still get the error mentioned above.
 
To add to the bit o' frustration, I had moved the code to the html page and just dropped it into a script tag...and it worked.  So how can I get this to work using a separate .js file?  
 
thanks!
Link to comment
Share on other sites

It  looks like you are loading your custom js file before TweenMax gets loaded.

<script type="text/javascript" src="js/pr300x250.js"></script>
<script type="text/javascript" src="gs/easing/EasePack.js"></script>
<script type="text/javascript" src="gs/plugins/CSSPlugin.js"></script>
<script type="text/javascript" src="gs/TweenMax.js"></script>
You can't reference any GSAP tools (TweenLite, TweenMax, TimelineLite, etc) until after TweenMax.js is loaded. Also keep in mind that TweenMax includes CSSPlugin and EasePack... so do not load those separately. try this in your <head>
 
<script src="http://speed.pointroll.com/PointRoll/Media/Asset/Pointroll_HTML_Code_Repository/209670/prTrk.js"></script>
<script type="text/javascript" src="gs/TweenMax.js"></script>
<script type="text/javascript" src="js/pr300x250.js"></script>
Link to comment
Share on other sites

Jumping in here because I have extensive history with building pushdowns and expandable ads via Rich Media vendors, Pointroll and Doubleclick in the Flash days. There were idiosyncrasies in one or the other. The DCRM Flash templates were easier to break with other actionscript. But I had a Google map subSWF break a Flash Filmstrip ad in the Pointroll API.

 

Has Pointroll provided any HTML5 expandable templates, because specs for expandables involve frequency caps. It has only been 4 months since my Pointroll days, and if they had HTML5 in the works they were awful quiet about it.

 

Are you uploading these to AdPortal yourself or are your issues entirely local? Pointroll Flash expandables did not work outside of AdPortal. Doubleclick Flash expandables did work locally.

 

If your function works on the page, why load it as an external file?

Link to comment
Share on other sites

 

It  looks like you are loading your custom js file before TweenMax gets loaded.

<script type="text/javascript" src="js/pr300x250.js"></script>
<script type="text/javascript" src="gs/easing/EasePack.js"></script>
<script type="text/javascript" src="gs/plugins/CSSPlugin.js"></script>
<script type="text/javascript" src="gs/TweenMax.js"></script>
You can't reference any GSAP tools (TweenLite, TweenMax, TimelineLite, etc) until after TweenMax.js is loaded. Also keep in mind that TweenMax includes CSSPlugin and EasePack... so do not load those separately. try this in your <head>
 
<script src="http://speed.pointroll.com/PointRoll/Media/Asset/Pointroll_HTML_Code_Repository/209670/prTrk.js"></script>
<script type="text/javascript" src="gs/TweenMax.js"></script>
<script type="text/javascript" src="js/pr300x250.js"></script>

 

 

I had thought about that and tried it, the animations still wouldn't trigger.  This worked fine on the HTML page, though.  Sorta odd how this isn't really panning out.  The really odd thing is I went through and stripped out all other code in the .js and also the HTML so that it was just the div and the animation code in the .js - and it didn't work.  Works perfectly when I have this on the HTML page.

 

Somnamblst - right, it's pointroll and they were a bit particular about running any code on the page, so most of the code was moved over to all be in a .js file.  Right now they are still in the works with how to handle everything and unfortunately there isn't something available like the creative manager (app), so things are moving slowly.

Link to comment
Share on other sites

  • Solution

I had thought about that and tried it, the animations still wouldn't trigger.  This worked fine on the HTML page, though.  Sorta odd how this isn't really panning out.  The really odd thing is I went through and stripped out all other code in the .js and also the HTML so that it was just the div and the animation code in the .js - and it didn't work.  Works perfectly when I have this on the HTML page.

 

Somnamblst - right, it's pointroll and they were a bit particular about running any code on the page, so most of the code was moved over to all be in a .js file.  Right now they are still in the works with how to handle everything and unfortunately there isn't something available like the creative manager (app), so things are moving slowly.

Are you sure the path is correct to your JS files? I recreated everything and it seems to work fine. 

 

Example attached.

test_update.zip

  • Like 3
Link to comment
Share on other sites

Oh good gravy.  So the one thing that I didn't try doing was moving the script references below the divs, I kept it in the <head>.  Once I moved that down everything fired up!  AND...that is why I should stay away from coding, go back to being an art director.  Thanks ohem!!!!!!

  • 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.
×
×
  • Create New...