Jump to content
Search Community

Referenced tween does not work in DreamWeaver

AdObeOne test
Moderator Tag

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

After a failed attempt to make a simple word cloud animation in Edge Animate using Greensock, I tried it again today in DreamWeaver using Greensock.

 

I have a dozen divs defined in the html page. Something like this:

 

<div id="apLinkedIn" class="kopGrootFontWit" onclick="fLinkedIn()">LinkedIn</div>

I tried to link the click event using javascript and I also tried jquery, exactly as shown a multiple forums and examples, but that did not work. That's why I did it this way.

 

What is suppost to happen is when a word cloud word is clicked it moves to the upper left corner and text about that topic "tLinkedInTekst" in this case, moves into view. When the word is clicked again the animations are reversed. This code is commented out at the moment.

 

In a linked javascript folder I've got a javascript file with this content:

 

var tLinkedIn = new TweenMax("#apLinkedIn", 0.5, {css:{x:-124, y:-104}, reversed:false});

 

var tRest =  new TweenMax.to(["#apKlantBeleving", "#apCommunityManager", "#apContentAgenda", "#apInternetMonitoring", "#apMailChimp", "#apTooling", "#apPinterest", "#apWebcare", "#apTwitter", "#apFacebook"], 0.5, {css:{autoAlpha:0});

 

var tLinkedInTekst = new TweenMax.to("#apLinkedInTekst", 0.5, {css:{y:-390, autoAlpha:1}});

         

function fLinkedIn () {

  TweenMax.to("#apLinkedIn", 0.5, {css:{x:-124, y:-104}, reversed:false});

  /* if (tLinkedIn.reversed()) {

    tLinkedIn.play();

    tRest.play();

    tLinkedInTekst.play();

  } else {

    tLinkedIn.reverse();

    tRest.reverse();

    tLinkedInTekst.reverse();

  };

*/};

 

I see the clicked word move when I use the single tween command as shown in the file above. But when I try to use the reference to that tween command nothing happens. What is wrong?

 

Thank you in advance for your help.

 

Kind regards,

 

Ad

Link to comment
Share on other sites

Hi again,

 

Its much better for us to see your code working (or even not working) than read an explanation.

 

Without seeing the code running in a browser we can only make some vague assumptions which is why we recommend the CodePen demos (http://forums.greensock.com/topic/9002-read-this-first-how-to-create-a-codepen-demo/)

 

If you watch the video on that page you will see its super easy to get started, we even give you starter demos that you can fork that load jQuery and TweenMax so at the very least we know you are loading the proper versions of everything.

 

If for some reason its not possible to add your code to CodePen, please feel free to upload a simple zip of your files.

 

2 big advantages of CodePen

 

1: multiple team members can easily view,edit and fork your work and return fixed versions that everyone can see. You'll likely get help much faster.

 

2: you can always export zip of any CodePen and have a local version to reference.

 

For instance you could download any of our starter pens and open it up and Dreamweaver and know you are starting with a file that has all the basics covered.

  • Like 1
Link to comment
Share on other sites

Thank you Carl for your response. Using a CodePen wouldn't be a good idea, I think, because it would not be the same context (DreamWeaver CS6) in which the code works.

 

I have attached a zipped file of the stripped down word cloud DreamWeaver CS6 project.

 

Using the tween command directly in the fLinkedIn function makes the "LinkedIn" word move. Using the referenced tween "tLinkedIn" does not make the word move.

 

What is wrong?

 

Thanks for your help,

 

Ad

Link to comment
Share on other sites

Thanks for the files. As soon as I opened them there were errors:

 

Uncaught ReferenceError: TweenMax is not defined

 

This is because you were loading scripts in this order

<script type="text/javascript" src="js/control.js"></script>
<script type="text/javascript" src="js/TweenMax.min.js"></script>

control.js has code that references TweenMax, but since TweenMax isn't loading until AFTER control.js.. it throws errors.

 

The fix here is to swap the order

<script type="text/javascript" src="js/TweenMax.min.js"></script>
<script type="text/javascript" src="js/control.js"></script>
Now TweenMax.js will be loaded and accessible by the time the script in control.js executes.
 
The next problem is that you are running code in control.js that references DOM elements that haven't been created / parsed yet because your scripts are in the head of the document BEFORE the body.
 
One approach to avoid this issue is to simply put your <script> tags before the closing <body> tag
 
<body>
<div id="achtergrond">
<div id="apLinkedIn" class="kopGrootFontWit" onclick="fLinkedIn()">LinkedIn </div>
</div> <!--achtergrond-->


<script type="text/javascript" src="js/TweenMax.min.js"></script>
<script type="text/javascript" src="js/control.js"></script>
</body>

Those scripts won't load and run until the DOM has been parsed. Another technique is to use jQuery ready() or other "wait until the page is loaded and ready" techniques.

 

And once the order of loading issues are resolved there was trouble with your JavaScript

 

var tLinkedIn = TweenMax.to("#apLinkedIn", 0.5, {css:{x:-124, y:-104}, reversed:false});
         
function fLinkedIn () {
tLinkedIn;
};

To control a tween, you must not only reference that tween but call a method on it.

 

simply writing tlLinkedIn won't do anything.

 

You need to do something like

 

tLinkedIn.restart() or tLinkedIn.play() or tlLinkedin.pause() etc. Please see the Jump Start to get an overview of the GSAP syntax: http://www.greensock.com/jump-start-js/

 

--

 

In summary to fix your local files:

  1. swap the order in which your files load
  2. place the script tags at the end of the <body>

 

Here is a CodePen of the JavaScript "working"

 

http://codepen.io/GreenSock/pen/JbfBe

 

(not exactly sure what you need but the linkedin animation will now reverse() when you click on the text)

 

 

 

  • Like 3
Link to comment
Share on other sites

Thank you Carl for this clear answer.

 

Strange that the word moved when I replaced "tLinkedIn;" with the tween command.

 

Sorry about not putting a method after "tLinkedIn", but I removed it, after I tried .play() and .restart().

 

Thanks for the CodePen. I've got it working in DreamWeaver now.

 

I think i'm going to have a lot of fun using Greensock. Thanks for porting it from actionscript to javascript. I used to use actionscript, about 5 years ago. Time to dust off that knowledge and apply it to javascript and Greensock.

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