pfash

Thanks, Web Dizajner, I'll check out your templates.

Thanks Carl. Appreciate the update.

OK, Johathan, This is what I tried in the frame script of my FLA: TweenLite.selector = jQuery; stage = this; stage.state1_instance.addEventListener("click", scaleUp.bind(this)); function scaleUp() { TweenMax.from(stage.state2_instance, .75,{scale:.75, opacity:0, ease:Quad.easeInOut}); } I control > test, click on the state 1 image and state 2 does nothing. You wrote: "See if that helps.. if not try just having your tween target without using the jQuery collection wrapper $()" I'm not familiar with those terms. How would that look in my above code? Thanks

fyi: I just submitted the issue to Greensock admin.

Thanks Ohem, I think Greensock should mention that or update or remove those old files from their 'Learning' section of their website. Lots of time spent on that. Appreciate your recommendation.

Sorry, Jonathan, I'm unfamiliar with the language in that article (https://greensock.com/docs/#/HTML5/GSAP/TweenLite/selector/). Is 'YOUR_SELECTOR_ENGINE' a placeholder for some value I need to insert? (If so, how do I know what goes in there?) And do I add that code to the top of my JS code in my FLA's frame script, like this?: TweenLite.selector = YOUR_SELECTOR_ENGINE; TweenLite.selector = jQuery; stage = this; stage.state1_instance.addEventListener("click", scaleUp.bind(this)); function scaleUp() { //alert("function was accessed"); TweenMax.from(stage.state2_instance, .75,{scale:.75, opacity:0, ease:Quad.easeInOut}); } ...or do I add it to my template? (I'm brand new to this.) Thanks much!

Hi All, I think I finally figured out what has been causing my ongoing problems using Cory's "GSAP_Basic.fla" demo. Here's what I've been experiencing: 1.) I unzip his GSAP Animation starter files (https://greensock.com/wp-content/uploads/2016/04/GSAP-AnimateCC-Starter-Files.zip) 2.) inside the GSAP_Basic folder is an html wrapper file that has this JS code in it: <script> var canvas, stage, exportRoot; function init() { // --- write your JS code here --- canvas = document.getElementById("canvas"); exportRoot = new lib.GSAP_Basic(); stage = new createjs.Stage(canvas); stage.addChild(exportRoot); stage.update(); createjs.Ticker.setFPS(lib.properties.fps); createjs.Ticker.addEventListener("tick", stage); } </script> 3.) If I use a browser to view that wrapper I see a functioning GSAP animation. All OK 4.) However, if I open the FLA in that Basic folder and do Control > Test (and don't deselect the 'overwrite html file on publish' box under the advanced tab of the publish settings) then that wrapper html file is replaced with an html file that has this JS code in it: <script> var canvas, stage, exportRoot; function init() { // --- write your JS code here --- canvas = document.getElementById("canvas"); exportRoot = new lib.GSAP_Basic(); stage = new createjs.Stage(canvas); stage.addChild(exportRoot);fnStartAnimation = function() { createjs.Ticker.setFPS(lib.properties.fps); createjs.Ticker.addEventListener("tick", stage); } } </script> ...And the browser preview now only shows a white box with no animating content. This happened repeatedly. It's as if the custom template in that FLA is not right and it's generating an html wrapper that has the wrong JS code in it (compare code in green above). I'm a beginner so maybe I'm misunderstanding this. Any insights? Thanks much.

Thanks, Davi. Earlier I did try"this" and stage in front of state2_instance without success. I'll look over Cory's demo files.

Thanks for your reply, Dipscom. That FLA posted above is a stripped down demo that only contains content pertaining to my question. Here's the link again: http://bigbendhc.org/theUplink/codeDemos/My%20MON_HDV-Template/ -That sends you to an index page with a link to download the fla. Let me know if you want me to provide that in another way. The simplified question is: ----------------------------- Why does: TweenMax.from( $(nameOfImage), .75,{scale:.75, opacity:0, ease:Quad.easeInOut}); ...work here in CodePen: http://codepen.io/pfash/pen/pRXeEX ...but not in the frame script of that fla linked immediately above? Here is the frame script code: stage = this; this.state1_instance.addEventListener("click", scaleUp.bind(this)); function scaleUp() { TweenMax.from(state2_instance, .75,{scale:.75, opacity:0, ease:Quad.easeInOut}); } Thanks!

Thanks for the reply, Davi. TweenMax is called from the html wrapper (generated from a template in Animate). So, in the head of the html wrapper, you'd see: ---------------------------------- <title>$TITLE</title> <!-- write your code here --> <!--MY LOAD TWEENMAX CODE LINE--> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.2/TweenMax.min.js"></script> <script src="http://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script> ---------------------------------- Also, this is the JS code located in the first frame of the timeline (on the JS layer) in Animate: ---------------------------------- stage = this; stage.state1_instance.addEventListener("click", scaleUp.bind(this)); function scaleUp() { TweenMax.from(stage.state2_instance, .75,{scale: .75, opacity:1, ease:Quad.easeInOut}); } ---------------------------------- So, I'm expecting that you click on state1_instance and state2_instance scales up. Nope. Any ideas? Thanks

Maybe I should simplify the question: Why does: TweenMax.from( $('#homeImg'), .75,{scale:.75, opacity:0, ease:Quad.easeInOut}); ...work here: http://codepen.io/pfash/pen/pRXeEX but not in my function (in the frame script) of my fla posted here: http://bigbendhc.org/theUplink/codeDemos/My%20MON_HDV-Template/ ? Probably I'm making some painfully obvious mistake. Any help greatly appreciated. Paul

Hi All, I'm brand new to GSAP, Animate CC and this forum and I greatly appreciate this learning resource and any help you can offer. I'm posting to this forum because I understand many of you are using GSAP + Animate like I am. I need to play, then reverse tweens using clicks (one click plays tweens and the next reverses them). Not sure if this is TMI but here's my code that currently does the first part of that. (Don't laugh.) That code works in my Animate frame script. But I posted to the GSAP forum to get help reversing those tweens upon click. PointC created this helpful codepen (http://codepen.io/PointC/pen/bgyoMg/) that accomplishes exactly what I want to do...but I haven't been able to get his JS code to work in my Animate frame script like the above. One issue: He's using a div to receive the clicks ...which makes sense but I don't know how to achieve that when using Animate. Do I just let the stage receive the clicks? Aside from that, PointC's JS code works in a web page but seems not to work in my Animate frame script (due to my lack of knowledge about how to adapt it for Animate). Any insights? I can post my .fla file if needed. Thanks much!

very nice, PointC. Thanks so much for your time.

Hi All, Beginner here. I'm hacking code given to me on this forum by PointC. I need to know how to reverse the scaling/cross-dissolving in my codpen demo: http://codepen.io/pfash/pen/aprmxq ...by clicking on the red box a second time. IOW: you click on the red box once to have it dissolve into the blue box and scale up...and then you click on the red box again and it all goes in reverse. That second part is my question. NOTE: This demo is supposed to have the red box on top of the blue box (so the red color smoothly transitions into blue) but I didn't have time to figure that out for this codepen demo and it's not critical to my question. Another concern: the scaling up (zooming larger) and cross-dissolving is not as smooth as I expected it'd be. You can see the blue box flash a bit. Any ideas why? Thanks much!

Yes, Thanks PointC. That works...and yes I'd like it to go back to original state when user clicks again (go in reverse). So it sounds like a timeline is necessary. I'll learn about code pen so I can provide better info upfront. Appreciate your help.

Thanks PointC and Carl. Digging into GSAP now.

Thanks, Dipscom. I want to use GSAP because I hear it's most efficient. I was able to accomplish what I need to do by putting GSAP cross-dissolve code into the frame script in Animate CC....and loading the TweenMax in the html wrapper. Thanks for the tip about the Banner Animation section, as well.

Hi, I'm brand new to GSAP. Learning a lot. I want to, at the same time, scale up and cross-dissolve two images when the user clicks on the first state of the image. I did this similar effect with JS and CSS here: http://bigbendhc.org/theUplink/karane-health-care-administration/ -mouseover or click on the arrow below his face. =================== Now I'm trying to do this effect using GSAP. I have scaled up the first state image up by doing this: ...But now I want to cross dissolve from myImage_state1 to myImage_state2 while the images are scaling up. Seems simple but not sure how to fit that into the function. Thanks much!

Hello, Pretty sure this has been addressed before but I'm so new to this, I'm not recognizing it in the archive: I need to cross dissolve one dashboard image into another when user clicks on hotspots. I've done this here (with JS and CSS In this individual web page): http://bigbendhc.org/theUplink/codeDemos/responsiveCrossfadeMultipleImgsAndZoom.html ...but I now need to do this all within the Animate CC and GSAP framework. (I've heard that Animate + GSAP is a better way to build this app.) I've gone through Corey Hudson's tutorials (https://greensock.com/animatecc-quickstart and https://greensock.com/animatecc-templates) but now I need help to pull it all together: Do I use GASP tween code to do the cross-dissolving? Which code do I use? Where does that code go (into the JS layer in the timeline in the Animate file...or does it go into the HTML wrapper? Do I create the hotspots in the HTML wrapper? Do I build the cross-dissolve and the hotspots interactivity in the AnimateCC program? As you can tell by these questions, I'm floundering. If you just want to refer me to another tutorial that will help me take it a step further that's fine. Thanks for any help!

Hi All, I'm new to Greenstock and to Javascript. I've been doing some corss-dissolving and swapping/zooming of bitmaps on our site with a combo of JS and CSS but the (much more advanced) developer helping me recommended that, to accomplish the type of new animations I am planning (zooming bitmaps that have animated loops playing on top of them and animations triggered by queues in a soundtrack), I should use GSAP. I've looked over some of the GSAP web pages and am impressed. My 2 newbie questions are: If I use the free version of GSAP, to build my whole app and then Greenstock goes away...do I have to rebuild the whole site? Does it look like I can achieve the level of animation described above using the free part of GSAP? (We are a NPO with no money to spend on this.) Thanks much!