Jump to content
Search Community

GSAP and Edge Animator

vdheyning 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

Hi There, 

 

I am sorry to be asking this most basic of questions, I come from Flash, and need to switch to Edge, I was perfectly good at copy-paste in AS3, but hardly understood what I was doing, which mattered not as things always worked anyway. I never needed to venture beyond a basic slideshow or a simple portfolio site.

 

Now Edge, I tried pasting this into the code editor on the stage

 

<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>var letterA = sym.$('AA2');

 
<script>
window.onload = function(){
    var logo = document.getElementById("logo");
    TweenLite.to(logo, 1, {left:"632px"});
}
</script>
 
Nothing happens. I just don't know how to start to get things going. Once I get it started, I'll be back at copy paste, and all will be well again.
 
I know it's like asking how do you hold a pencil, but I can't seem to figure it out.
 
Thanks!
 

 

Link to comment
Share on other sites

Hi,

 

The thing is that Edge Animate has some of it's own methods in order to make the scripts works.

 

I used just a little bit of edge just to try it out and for personal reasons (I prefer the old fashion way) I drifted away from it, but you can certainly achieve some amazing things with it, just check Chris Gannon's blog and you'll see what  I mean.

 

In the mean time you could google for some tutorials on how getting started with edge and this post in Chris' blog as a reference on how to use GSAP with edge. Also check this category from the blog in order to get a better idea of the many things you can do:

 

http://chrisgannon.wordpress.com/category/adobe-edge/

 

Best,

Rodrigo.

Link to comment
Share on other sites

Hi!

 

Prior to writing my topic I did look at chris Gannon's site, unfortunately I would have to pay to download a file, the cost doesn't worry me, just belonging to yet another site doesn't appeal to me.

I also tried pasting the code inot a blank dreamweaver page, I have a logo called logo,

 

<script src="http://cdnjs.cloudfl...TweenMax.min.js"></script>var letterA = sym.$('AA2');

 
<script>
window.onload = function(){
    var logo = document.getElementById("logo");
    TweenLite.to(logo, 1, {left:"632px"});
}
</script>
 
 
and again, nothing happens. I just don't know how to start, I like the codepen in the get started, I can see the different files, (HTML, CSS, JS) I just don't know how to replicate it on my desktop.
 
I know I'm missing something here, maybe I should juts go back to flash...
 
Thanks! Fam
Link to comment
Share on other sites

Hi,

 

Check the CSS position property of the element, in order to work with GSAP it should be relative, absolute or fixed.

 

Also in the code you're using in dreamweaver remove the edge script, that could also be causing some trouble.

var letterA = sym.$('AA2');

In order to get the files of a codepen you can download them by clicking in the "share" button, you'll see a "Export .zip" button and with those assets you'll be able to test and modify those files in your desktop.

 

Also take a look at the jump start guide, you'll find all those samples in Codepen as well.

 

Best

Rodrigo.

  • Like 1
Link to comment
Share on other sites

  • 2 weeks later...

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