Jump to content
Search Community

pfash

Members
  • Posts

    45
  • Joined

  • Last visited

Recent Profile Visitors

1,842 profile views

pfash's Achievements

  1. Yes, Shaun. That's exactly what I wanted. Thanks a lot.
  2. 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!
  3. pfash

    pausing a timeline

    Thanks, Carl. That helps a lot.
  4. pfash

    pausing a timeline

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

    pausing a timeline

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

    pausing a timeline

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

    pausing a timeline

    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();
  8. pfash

    Bubble effect?

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

    Bubble effect?

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

    Bubble effect?

    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.)
  11. pfash

    Bubble effect?

    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
  12. Thanks, PointC. Opens a new world of possibilities! Thanks also for the link to those resources.
  13. 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!
  14. 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.
×
×
  • Create New...