Jump to content
Search Community

Control an id in Animate CC from GSAP in the HTML file

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

 

We can control the movieClip with an id of box from within Animate CC like this:

 

TweenMax.to(this.box, 2, {x:500, repeat:10, yoyo:true});

 

But if I wanted to control the same movieClip with GSAP from the actual HTML file instead, how can I do that ? I am having trouble targeting the actual element from within the <canvas> I tried canvas.box and stage.box and exportRoot.box, but I can;t seem to target the id of a MovieClip that is inside of my AnimateCC canvas... Does anyone know how to target them ?

Link to comment
Share on other sites

Thanks Davi,

 

Check it out here's a codePen that I put a simple Animate CCC Canvas file into. There is only 1 movieClip named 'box' . But I can't get any control over the element from javascript outside of putting the js inside the FLA. it seems like it is a scope issue

 

See the Pen Oazxxy by celli (@celli) on CodePen

 

Link to comment
Share on other sites

Hi Celli,
See fork below and where I added your code (in the HTML column of CodePen inside the fnStartAnimation function). It's just a copy and paste of your code but you can see around where you should add it. At that point, stuff is all loaded and everything animates just fine. You can make your own function for this particular purpose, just need to make sure the canvas is all set first. 
 

See the Pen PxEJxz by Davi-T (@Davi-T) on CodePen


 

  • Like 2
Link to comment
Share on other sites

Davi, Thanks! Yes, I see it needs to be after the handleComplete() function. that works!

 

I tried to put a function after the HiDPi function but that didn't work... Why does it need to be right after the handleComplete() function ?

I wonder if I could put the functions on a separate .js file

Link to comment
Share on other sites

Well, it's the ticker event specifically, which is updating what you see (yours is using setInterval, but can also use RAF or RAF Synced) ... which is inside the fnStartAnimation function...which is called AFTER the makeResponsive function (your hiDPI function) -- that code is at the bottom of that script tag. So it's an order of execution thing. However, you kinda wanna keep the ticker event within the start function and have that start after the hiDPI function, otherwise you'll see a quick hiccup when the hiDPI function takes effect.

  • Like 1
Link to comment
Share on other sites

  • 1 month later...

Hi Davi, Sorry that I am re-opening this old thread, while I can control with GSAP the element's position in the HTML, to within the Animate CC canvas element. It doesn't seem to work with anything other than position control. I tried opacity, alpha, visibility, display, etc... Check this updated codePen in the HTML function doAfter. Do you know why we can't control any properties other than position?

 

See the Pen Oazxxy by celli (@celli) on CodePen

 

Link to comment
Share on other sites

Hey Celli,

You should be able to control any properties listed here with GSAP or whatever >

https://createjs.com/docs/easeljs/classes/MovieClip.html

 

As for width and height in pixels, it’s done a bit differently using bounds (getBounds, setBounds, frameBounds, etc etc among other methods... just do a Google search).

 

Just take a read through the props you’d like to adjust as they may be a bit different than you may think (ie: alpha is between 0-1, not 0-100).

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