[GSAP CSS Transforms in Adobe Animate?]

Just to check, so when GSAP is animating elements in Canvas (scale, rotation, x, y, alpha, etc.) it is identifying objects and causing Canvas to redraw them in different locations over time. However, it cannot change the colors, stroke width, etc of those elements? I guess then the only solution is to use Animate (Flash)-specific techniques for doing it.

 

Has anyone addressed this issue and found any solutions that work well?

[GSAP CSS Transforms in Adobe Animate?]

Is there a way to use GSAP TweenMax for basic CSS transforms on a movie clip instance in Adobe Animate when you are publishing to Canvas?

 

For example:

 

this.p1thumb.addEventListener("click", myFunctionp1.bind(this));

function myFunctionp1() {

TweenMax.to(this.box, .25, {

boxShadow:"0px 0px 10px 10px rgb(0, 204, 0)"

});

}

 

It does not seem to work. I'm also interested in how you might change stroke widths, colors, etc. dynamically. Any ideas?

[Looking for Easiest Way to Make Project Scale as a Whole]

Thanks for the help. I have created a solution based on my research and I'd like to know if you consider this to be as good an approach as any or if there is something I'm doing wrong that could get me into trouble. Click the buttons on the left to move the square from corner to corner.  The whole project proportionally scales with the page. 

 

Is there a better way, or anything I'm missing?  Thanks.

 

See the Pen JGWJxr by anon (@anon) on CodePen

[Looking for Easiest Way to Make Project Scale as a Whole]

Can anyone point me to a tutorial or codepen demo that shows how to make an entire Greensock project in a div scale uniformly on a resize or load event, preserving aspect ratio and relative positions of all elements within a container div?

 

I've used Greensock within Edge Animate, and it works well.  However, when building a GSAP project from scratch within a container div on a web page, nested elements do not scale with the parent container.  I'm looking for the most efficient approach for achieving this. 

[How to avoid repeating code?]

Thanks Diaco.   I'll repost on the other forum if I need clarification. 

[How to avoid repeating code?]

I'm using  Greensock in Edge Animate. I'm finding myself repeating code blocks to much.  (newbie coder)  Example is below.  Both blocks are identical except for the element names. Does anyone know the technique for dynamically building code blocks and incrementing the element names  (item2 -> item2 -> item3 -> ........)?

 

Draggable.create(sym.$("item1"), { 

onDragEnd:function(e) {

if (this.hitTest(sym.$("bucket_yellow"))) {

sym.additemyellow("item1")

 } else if (this.hitTest(sym.$("bucket_gray"))) {

sym.additemgray("item1")

 } else if (this.hitTest(sym.$("bucket_green"))) {

sym.additemgreen("item1")

 } 

sym.getComposition().getStage().showitem("item2")

}

});

 

 

Draggable.create(sym.$("item2"), { 

onDragEnd:function(e) {

if (this.hitTest(sym.$("bucket_yellow"))) {

sym.additemyellow("item2")

 } else if (this.hitTest(sym.$("bucket_gray"))) {

sym.additemgray("item2")

 } else if (this.hitTest(sym.$("bucket_green"))) {

sym.additemgreen("item2")

 } 

sym.getComposition().getStage().showitem("item3")

}

});

[Edge Animate - How to do hitTest?]

Thanks very much for the code and file warning!  I did not realize that my files were out of date. Will remember to make sure they are all current. 

[Edge Animate - How to do hitTest?]

I'm a newbie, trying to get Edge Animate to perform a hitTest on two elements when one is dropped (see attached). Seems like it should work but I'm stumped.  Any ideas?

 

Draggable.create(sym.$("dragger"), { 

onDragEnd:function() {

alert("dropped");

checktarget()

}

});

 

function checktarget(){

alert("checktarget");

if (sym.$("dragger").hitTest(sym.$("target"))) {

alert("hit");

}

}

 

drag.zip