pfash

Thanks Rodrigo, Will do.

Yes, Shaun. That's exactly what I wanted. Thanks a lot.

Hi All, Me again. I'm trying to get my head around the TimelineMax way of animating: What I want to do seems simple: milestone_1 scales up, pauses for 0.3 sec while milestone_2 scales up. While milestone_2 pauses for 0.3 sec, milestone_1 scales back down then milestone_2 scales back down. (Many elements chained together like this should result in a wave-like progression.) How do I do this? I've tried different methods, to no avail. Below is one attempt that doesn't work. The result of code below is: milestone_1 scales up, then milestone_2 scales up, then milestone_2 scales down then milestone_1 scales down. Not good. (Btw: I'm writing this code into my script window in Animate CC, so using EaselJS syntax.) //DOESN'T WORK RIGHT: var tl2 = new TimelineMax({ yoyo: true, repeat: 1 }); tl2.to( this.milestone_1, 1.2, {scaleY: 2, scaleX: 2} ) .to( {}, 0, {} ); // Dummy tween. Seems like can't make the delay less than 1 sec. Even if set that number to 0, still seems like about a sec delay after scale up. tl2.to( this.milestone_2, 1.2, {scaleY: 2, scaleX: 2} ) .to( {}, 0, {} ); A secondary issue is what seems like a limit to how short of a delay I can set. Seems like I can't get a shorter than about a sec delay. Codepen: (I can also post my test FLA if anyone has Animate CC and wants that.) I also have a general question that would help me get on a 'learning curve': For the types of questions above (overlapping tweens and shortening the length of a delay), where would I find the answers? (What terms would I search for, presumably on the Greensock site?) Thanks much!

Thanks, Carl. That helps a lot.

You're correct, Carl. First 2 lines work but last doesn't. I changed my code to: TweenLite.defaultEase = Elastic.easeInOut tl1 = new TimelineMax({repeat: -1}); tl1.to( this.myInstanceName, 3.5, {scaleY: 2, scaleX: 2 } ) .to( this.myInstanceName, 3.5, {scaleY: 1, scaleX: 1}, "+=2"); ...and it works. Much appreciated! I have two related but broader questions. (Let me know if I should create a different post.) : 1.) Obviously, my unfamiliarity with the terms and basic syntax is the problem. I've run into this quite a bit. When I need a solution (need to make my animation do something) I can't just look for the plain, vanilla javaScript that does that thing and put it in my Animate CC scripting window. That works sometimes but seems like, for certain things, I need to adapt that syntax. -For example, it sounds like, if I'm working with Greensock TweenMax timelines, I can't just use the syntax that I see on this site I need to use an 'EaselJS object version' of that syntax, right? Do I find that syntax at: http://www.createjs.com/docs/easeljs/classes/DisplayObject.html or somewhere else? 2.) In general, it seems like the Greensock TweenMax functionality is to be used for, what I'd call 'script-based animation' (IOW: movement of elements that is driven by the script while the play head stays on frame 1.) ...rather than 'timeline-based animation' that takes place over multiple frames (while the play head moves). Is that true? Is one type of approach (script-based vs. timeline-based) any more effective than the other when synchronizing sound to movement? Thanks again, Carl.

Hi, I'm doing something wrong here. Just trying to use the first option above (code for the red ball) to get 'myInstanceName' to do the scale up, pause and then scale down thing. As indicated, I'm publishing an HTML Canvas project with Animate CC ...and writing this in the script window: ////THIS WORKS tl_mytimeline = new TimelineMax({paused:true, reversed:true}); TweenLite.defaultEase = Elastic.easeInOut; tl_mytimeline.to(this.myInstanceName, 3.5,{scaleX:2,scaleY:2, },0); tl_mytimeline.play(); ////WHY DOESN'T THIS WORK? TweenLite.defaultEase = Elastic.easeInOut tl1 = new TimelineMax({repeat: -1}); tl1.to( this.myInstanceName, 3.5, {scale: 2} ) .to( this.myInstanceName, 3.5, {scale: 1}, "+=2"); Thanks for your help.

Thanks much, Shaun and Jack. That's what I needed. ps. I noticed that after a few minutes the 3rd div (blue ball) seems to get out of sync with the others even tho they start at the same time.

Hi All, I'm brand new to timelines so please assume this is a very basic answer: I want myElement to scale up then there's a 2 sec wait (where nothing happens) and that scaling up reverses. So simple. Yet I'm floundering. What would that look like? I'm writing this code into Animate CC to be exported as a Canvas project, by the way. Here's my code: tl_mytimeline = new TimelineMax({paused:true, reversed:true}); TweenLite.defaultEase = Elastic.easeInOut; tl_mytimeline.to(this.myElement, 3.5,{scaleX:2,scaleY:2, },0); //need a 2 second pause here //now reverse the above scaling up tl_mytimeline.play();

Those first two examples look related to what I'm trying to achieve. I'll look into PIXI.js Thanks PointC

Thanks Jack, I'm working on a HTML5<canvas> project. I'll look for OSUblake.

Thanks Jonathan. Those are very nice...but no that's not the page. I'll keep looking but, in any case: Can I create that bubble/bulge effect using GSAP? (My final product is an <HTML5 canvas>. I've been using Animate CC + GSAP very successfully thus far.)

Hello All, I'm just learning the potential of GSAP and would greatly appreciate a resource: A couple months ago I came across a comprehensive demo page somewhere that shows many transform effects that can be achieved with GSAP...You can go down the page and mouseover/click to see what that effect looks like. I've been looking but can't find that now. Anyone know where something like that is? Also: I need a "bubble" effect for a bitmap. I've attached an image that approximates this: Just a slow bulging of the image from the center. Is there a tween effect for that I can use in the same way that use the Elastic effect?: TweenLite.defaultEase = Elastic.easeInOut; Thanks much! For some reason the image wouldn't attach. Here it is: http://samirihhcom.ipage.com/images/bubbleDemo2.png

Thanks, PointC. Opens a new world of possibilities! Thanks also for the link to those resources.

Hi All, Likely this is a simple answer but I'm unfamilar and just not using the correct terms when searching: I want two movie clips to tween at the same time. The code below just makes the movie clips tween one right after the other..not simultaneously. tl = new TimelineMax({paused:true, reversed:true}); TweenLite.defaultEase = Elastic.easeInOut; tl.to(stage.movieClip1, 1.3,{scaleX:1.3,scaleY:1.3, x: '+=30'}).to (stage.movieClip2, 1.3,{scaleX:1.5,scaleY:1.5, y: '-=60', x: '+=40'}); Thanks much!

NOTE: stage.myMovieClip.myCloseButton.addEvenlistener(.... In the dot syntax path above "myMovieClip" and "myCloseButton" must both be the Instance name of the movie clip (The name of the version that sits upon the stage)...not the name of the movie clip.

Wait! I had a typo in that last test. Yes your syntax works. stage.myMovieClip.myCloseButton.addEvenlistener(.... Thanks so much, Oliver16Years! I will now quit banging my head.

Thanks, Oliver16Years. That makes sense...but doesn't seem to work for me: I put this in the main timeline script: var stage = this; stage.child_MC.closeButton_instance.addEventListener("click", reverseTweenChildMC.bind(this)); Any Animate CC user's help is greatly appreciated. I'm sure it's some simple syntax that I need. I've been searching but probably am not using the correct terms. I'll read that easleJS page. Thanks FYI: When I include the above addEventListener line to the main timeline's script, the other tweens in that timeline that normally work, won't anymore. As if including an addEventListener line that refers to an instance (closeButton_instance) that isn't located in the main timeline (it's located in the child_MC) kills interactivity.

Yes, that's what I'd rather do, Oliver16Years. But if I keep all code in the main timeline I need to communicate between the main timeline and the child movie clip, right? My intent: I need to tween (scale and position) two MCs together: the child MC and its 'close' button. (The user will click on the small dashboard image and it scales up along with its 'close' button located in that same MC. User can then click on that close button to tween everything back to original size and position.) In Shaun Gorneau's helpful example: http://codepen.io/sgorneau/pen/qrpxMy he has both elements in the same DIV and the JS just tweens the whole DIV...like a parenting situation. That's how it's done in a web page... So, I'm assuming,but please correct me, that the way to do the same thing in a GSAP + Animate framework (HTML5 <canvas>) is to put all the elements into a child MC...and tween that MC. That looks good but how do I get the code in the main script, like the event handler that listens for clicks on the Close button in the child MC? IOW: How do you make this line (below) work when you move the close button into the child MC? var stage = this; stage.CloseButton.addEventListener("click", ScaleDownDashboard.bind(this)); //Add event listener to the Close button Thanks much!

...and sorry about misspelling your name.

Hi All, I'm a newbie so I welcome corrections to my assumptions. I am using Animate CC 2017 to build an HTML5 <canvas> final product. In my main movie script I'm using the GSAP timeline functionality to scale up and down a movie clip (ImageA_MC): var tl = new TimelineMax({paused:true, reversed:true}); TweenLite.defaultEase = Elastic.easeInOut; //type of tween tl.to(stage.ImageA_MC, 1.3,{scaleX:3.1,scaleY:3.1, x: '+=250', y: '-=60'}); I like this timeline method because I can include many different tween actions and then just play and reverse everything with: tl.play(); or tl.reverse(); However, I'm running into a problem when I want to call "tl.play(); or tl.reverse();" from a child movie clip. Ideally, I'd like to create the TimelineMax timeline and identify the tween properties ...all in the main movie script and then control those tweens from the child MC. (For example, you click on the Close button located in ImageA_MC's timeline and it closes the ImageA_MC itself.) How would the "tl.play(); or tl.reverse();" be written in the child movie clip's script so it controls the TimelineMax timeline that was created in the main movie script? Thanks much!

Thanks Shawn, Exactly what I was asking for.

Hi All, I'm new to GSAP. This is just a syntax question, I think: I have two images that need to be scaled up and positioned on the screen simeltaneously (using a timeline)...as if they were attached or parented. My attempts to do this result in one of the images moving at a slightly different rate which is not what I need. Below doesn't work as written ...but should give you an idea what I need to do: var tl = new TimelineMax({paused:true, reversed:true}); TweenLite.defaultEase = Elastic.easeInOut; tl.to(stage.ImageA (and ImageB), 1.3, {scaleX:3,scaleY:3, x: '+=263', y: '-=50'}); //These images need to scale up and move exactly in tandem as if attached. Any help appreciated!

"you should only apply that TweenLite.selector line inside the generated html file that animate cc outputs. jQuery would not work inside Animate CC." Thanks Jonathan. I'll keep that in mind.

Ohem, that's what it was. baby steps. Thanks much!

I tried that. Doesn't work in my FLA. So, in the frame script I put: canvas.addEventListener("click", click.bind(this)); function click() { TweenMax.from(state2_MC, .75,{scale:.75, opacity:1, ease:Quad.easeInOut}); } I'm pretty sure I'm making some basic and fundamental mistake that will be easy to identify. I posted my stripped-down FLA (55 kb) here: http://bigbendhc.org/theUplink/codeDemos/My%20MON_HDV-Template/ Can someone please look at it and tell me why the image (state2_MC) doesn't scale up upon click? Thanks much