Friebel

Thanks Carl. I understand. I'm creating a simpler version in a CodePen at the moment...

Hi Jonathan, I just edited my post with the parts you asked. Hopefully it helps

Thanks for your answer Jack. I appreciate it. I can really recommend using Typescript! It's briljant and one can write OO-classes like C# or Actionscript again!

What I'm after is playing the TimelineMax from the current position to another time/label. I figured the tweenTo() method is exactly what I want. But for some reason it's not moving the timelines playhead and blocks other timeline-functions. What I'm creating A parallax scroller with some deph layers. A timeline contains the full range of x-positions for all layers, so if I change the position of the timeline-playhead the parallaxscroller scrolls (each layer on it's own range/depth). If the playhead is at position 0 the scroller is at full left. If the playhead is at position [duration] the scroller is at full right of the horizontal axis. Then I bind the playhead-position to the mouseover of a HTML5 canvas (using EaselJS), so that the mouseposition controls the scroller. This is what I have First I declare a paused timeline with the full range for the scroller: var tlParallax = new TimelineMax({paused:true}); tlParallax .fromTo(sky, duration, { x:0, ease:Sine.easeIn }, { x: -240 * 0.05, ease:Sine.easeOut }, 0) .fromTo(moon, duration, { x:0, ease:Sine.easeIn }, { x: -240 * 0.1, ease:Sine.easeOut }, 0) .fromTo(housesBack, duration, { x:0, ease:Sine.easeIn }, { x:-240 * 0.4, ease:Sine.easeOut }, 0) .fromTo(housesFront, duration, { x:0, ease:Sine.easeIn }, { x:-240 * 0.6, ease:Sine.easeOut }, 0) .fromTo(street, duration, { x:0, ease:Sine.easeIn }, { x:-240 * 1.0, ease:Sine.easeOut }, 0) .addLabel('treeInView', 10); In the canvas mouseover event (using easelJS) I put: function onStageMouseMove(event) { tlParallax.seek(event.stageX); } ...so the timeline then seeks the right time in the timeline, wich sets the right positions for each parallax-layer. To have one part scroll into view, no matter where the parallax scroller is, I have a button with the following code underneath the canvas: tlParallax.tweenTo('treeInView'); The problem The parallax scroll is working fine and seeks on mouseover. But once the button with the tweenTo is clicked the timeline fully stops working and doesn't tween to the wanted position. What about that? What I've tried: * When I replace 'tweenTo' with 'seek' it's working fine, but then I'm missing the smooth tween I'm after. * There cannot be a conflict between the seek() function inside the mouseOver event and the clickfunction of the button, because the button is outside the canvas and the mouseover only triggers inside the canvas. * Both tweenTo a label as tweenTo a position have the same result * I tried putting the timeline on paused: false, but it didn't help * I also replaced seek() with gotoAndStop(), without any luck - Am I missing something here? For customers sake I can't place the code here, sorry. Hopefully somebody can still give me some advise. Thanks!

I'd like to change to programming in Typescript, because it's a typed script and although Javascript can do everything, I'd like to work with better intellisense, more familiar OO and stuff. It's great I figured to use external libraries in Javascript, I need definition files to get the intellisense working. On DefinitelyTyped there happens to be an Greensock definition file for Typescript. (https://github.com/borisyankov/DefinitelyTyped/tree/master/greensock) Is this the right place to get the Typescript definitions for the GSAP (i.o.w. is it created by Greensock), or is there a more 'official' source for this somewhere, created by Greensock? I'd like to have the real thing, that keeps up with the updates Would be great if there is some file updated by Greensock somewhere, 'cause Greensock and Typescript are a killer combination I'd say Thanks!

I appreciate you taking the time to help Rodrigo. Indeed, Timeline is a better solution. I'm new to codepen and I thought I could only have 1 external library loaded in codepen, so I picked Tweenmax and did it the quick way. So to round it up: what I want is a little complex at the moment. So I'll use other ways to archive it. And maybe, maybe there will be custom ease feature in the future! Thanks again

No need to rush, a day only has 24 hours. It was indeed meant to vote You guys definitely áre convincingly dedicated, and it shows! Greensock is clever and stable, so I'm happy with everything you come up with next. I saw Draggable.... briljant and everything is so very well structured! It's hard to find things that aren't well thought of in the framework. But nice to know you are for hire too. Good to know. Keep it up! I wonder what you guys come up with next

Another request here!! Would love to use it

First of all @Jack: I love Greensock and it makes me smile everyday since I first saw it. Everything is working great and the tweens áre landing exactly on their endpositions. @Rodrigro: I really appreciate your help, thanks for that. But that's not what I'm after. I got the feeling I'm not expressing myself the way I would like to. Probably my English is the problem It's not that I can't create what I want. It's that I get this situation more often, so I'm looking for a better, more efficiënt solution to create this transition, without painting extra pixels, without losing the nice Back easingeffect and without having to tweak for minutes because of staggered tweens. Next to this, some of the graphics I'd like to move in are actually spritesheets, so little animations on itself. And then it's a lot more work to paint extra pixels. example You're right. It's easier with an example, so I created an simpler version of it in codepen here (in reality the colored blocks are things like scissors, pens, talking characters etc.): http://codepen.io/maarten77/pen/zGECd - The red box shows the movement with Back.easeInOut --> I wánt to have the Back easeIn, but not the Back easeOut because of the overshoot at the end showing the empty space underneath. So this is not what I'm after - The green box shows an alternative without overshoot. Here sine wave. But then I lose the nice Cartoony back easing effect - The blue box is more or less the effect I'd like to achive: So first having a Back easeIn, switching to another tween for having a Sine easeOut. got the solution with that? Last situation would be the thing I'm after. But...: - How do you know where exactly to transite between both tweens (curvetypes)? - How do you know at what speed exactly the first tween ends, so the second one should begin with? And how can that speed be translated into a timevalue for TweenMax? As you can see, my last animation (blue box) is not really smooth. Probably if I keep on tweaking it it will be ok, but it seems very time consuming to me. But I could also be totaly wrong and missing something here? Please correct me if I'm wrong... Maybe what I want is not possible or hard to achive... but I can hardly believe it. There should be an easier way I'd say. Or am I missing something really silly here?

Exactly Rhernando. That's what I mean. Because time is looming (like the Greensock homepages says ), sometimes it takes too long to add more pixels to a graphic (or it's not allowed by the customer) to prevent the empty space underneath during overshoot. Especially when it's a photographic image. So sometimes I'd rather don't have any overshoot at all. So with those types of graphics I'd rather pick another ending of the curve. Without losing the cartoony starting that elastic or Back has, wich I really like because of the organic and funny feel it adds and adds character to a graphic. I hope it's a little clearer now what I mean.

Thanks Rodrigo and Chrysto. I understand what you are writing and I just read and understand what Jack wrote about it. The reason why I ask this is this situation wich happens to me a lot: situation some graphic is waiting outside at the bottom of the container to move in. Than it 'pops up' from below onto the containers view. I do this by tweening the y-position with the Back-easingtype, 'cause I like the cartoony effect it gets. If I use Back.easeInOut for this, the graphic is going down a bit and then moves up. Great! But then it ends with moving up a little bit higher then the endposition (ofcoarse) and is thereby showing an empty space at the bottom under the graphic, revealing the viewer there is no more graphic on the bottom. I don't want to show that, so I'd like to have another curveending. options I can think of - making the graphic a little bit longer (if that's an image I do that in Photoshop and it takes some time to make up new pixels) - removing the 'out' of the curve, so the curve ends linear (using Back.easeIn) --> but now the animation stops linear, wich looks ugly to me - using TimelineMax instead and have two tweens after each other, one with ease-in type A and one with ease-in type B, so one for the start (Back.easeIn) and one for the end (Sine.easeOut) of the total movement. But this takes a lot more time to tweak and it looks totaly different then what I'm after. Next to that it needs to load the TimelineMax-library for this one movement better option? I wonder how you guys do this. You are all using TimelineMax in these kind of situations? Or a better solution? Another thing I can think of is having a new easing-type: combo, with combinations of ease-types, like combo.BackInSineOut, combi.SineInBackOut. [edit] what I think of now is the custom easing functionality. Then I could make such a curve manually. I believe it is possible in the Flash-version, but not yet implemented in Javascript?! That would be a helpful functionality to accomplish this, I'd say. Thing is, I'm animating all day long, so the faster I can code, the more fun Thanks again!

Hi, I would like to set different easing-types in one tween, one for easing IN and one for easing OUT. Is that possible in Greensock? This happens to be a wish I would like to use for some projects. And I'm not sure how to do this at the moment. If it's not possible in the current library (can hardly believe it, come on, it's Gréénsock! ), would it be possible to implement this in the future. For example like this: TweenMax.to($pd, 0.5, { top: 0, easeIn:Back.easeIn, easeOut:Sine.easeOut }); That would be very great!

Thanks! How could I overlook that?? Works great!

I'm sure it's somewhere there, 'cause Greensock has everything, but I cannot seem to find the right way. What I want is to create a timeline containing several animation sequences. Those animation sequences I would like to start seperately and they are not allowed to continue to the next part. To accomplish this I put 'pause-markers' at the end of each animationpart and labels at the start of each new part. Another timeline then gotoAndPlays the right animationpart, wich stops at the 'pause-marker' when the part is finished. Example: var tl_eyes = new TimelineMax( { paused: true }); tl_eyes // ------- OPEN EYES -------- .addLabel('openEyes') .set(leftEye, { alpha : 1}, 'openEyes') .set(rightEye, { alpha : 1}, 'openEyes') .to(leftEye, 0.3, { scaleX: 1, scaleY: 1, ease:Back.easeInOut }) .to(rightEye, 0.3, { scaleX: 1, scaleY: 1, ease:Back.easeInOut }, '-=0.2') .addCallback(function() { tl_eyes.pause(); }) // ------- BLINK MIDDLE -------- .addLabel('blinkMiddle') .to(leftEye, 0.1, { scaleY: 0 }, 'blinkMiddle') .to(rightEye, 0.1, { scaleY: 0 }, 'blinkMiddle') .to(leftEye, 0.2, { scaleY: 1 }, 'blinkMiddleUp') .to(rightEye, 0.2, { scaleY: 1 }, 'blinkMiddleUp') .addCallback(function() { tl_eyes.pause(); }) // ------- LOOK LEFT -------- .addLabel('lookLeft') .to(leftEye, 0.1, { scaleY: 0 }, 'lookLeft') .to(rightEye, 0.1, { scaleY: 0 }, 'lookLeft') .to(leftEye, 0.3, { x: normLeft_X - eyeLookOffsetSmallX }, 'lookLeftMove') .to(rightEye, 0.3, { x: normRight_X - eyeLookOffsetLargeX }, 'lookLeftMove') .to(leftEye, 0.2, { scaleY: 1 }, 'lookLeftOpen-=0.2') .to(rightEye, 0.2, { scaleY: 1 }, 'lookLeftOpen-=0.2'); The current pause-markers I created using .addCallback wich calls a function that pauses the timeline. But I like a cleaner method of doing this, like .pause or something. For some reason I cannot find a method like that. Am I mistaken or overlooking something here? So my question is: What's the right way of put methods inside the timeline wich pauses the timeline? Is there something like pause? And also: Inside the 'pause-markers' I use addCallback wich triggers the pause-method of the timeline by variable. But it's not very clean. Is there a way like 'this' to accomplish the same, 'cause the callback is triggered from within itself? (I know this is a Javascript question, but maybe somebody can point me a direction here). Thanks!! And again: greensock rules!! I'm sure there is a better way for doing this already build in, 'cause Greensock surprises me everytime again

I agree! Very nice job indeed!

Thanks Carl and Jack for your quick and clear response. Probably I'll stick to AE too. But I'm very interested in specialized editors for greensock. I'll watch out for that!

First of all, I loooove Greensock! It really fits my needs in animation, so what I'm looking for rightnow is a visual editor to setup my scenes and make my workflow quicker. For this I'm comparing Adobe Edge Animate v2 and Sencha Animator v1.5. Sencha is a lot cheaper (100 dollar one time spent) over EA (wich is 33 dollar a month!!, although I need Photoshop and Illustrator too and maybe AfterFX... full CCpackage for 83 dollar a month). Use of greensock is possible in both packages and it seems like apart from the output the packages are more or less the same in possibilities. The output is different though: AE has a lot of too-much-output I'd say, but seems to be more javascript based, what I like because of compatibility). I will use it professionaly, so I take a look first before I dive into the deep with a package. So for this I wonder; has any of you guys a perfect workflow in creating animations for the web in HTML5 together with GreensockJS (read: by using a visual editor)? Or do you all create your animations inside an IDE only?