Gregor3637

Hello. I`m quite new to "SplitText Text Animation" in GS. I watched few of the tutorials and searched the web for some examples, but didnt find what I wanted. Basically what I want is to hide each letter after certain time simultaneously. I have attached a simple Codepen example that shows the effect I`m trying to get. Yet I want to accomplish this effect for every letter/char in a word/sentence. Is this possible ?

Well thank you again. It is working fine and your solution is far far simpler and readable from the code I provided.

Well sadly Im trying it and it doesnt want to work,.... I created a new Topic addressing this issue and another question in here (link). If you have any spear time (and nerves)

Hello again. I decided to create a new Topic here for my problem (link here), so I dont pollute the JS Forum (more than I have so far). I also wanted share a solution and ask if its the right way of doing it. So let me start with the problem from the previous Topic. ------------------ part 1 - the problem ---------------- The problem is that the code (listed below) is working fine for JavaScript, but when I try to do the same thing with AS3... I fail (maybe the problem is in me). Here is what I have : var rectangle:Shape = new Shape; rectangle.graphics.beginFill(0xFF0000); rectangle.graphics.drawRect(0, 0, 100,100); rectangle.graphics.endFill(); var myMovieClip:MovieClip = new MovieClip(); myMovieClip.addChild(rectangle); this.addChild(myMovieClip) myMovieClip.y = stage.stageHeight * 0.5 - myMovieClip.height * 0.5; var tl = new TimelineMax({repeat:1, yoyo:true}); tl.to(myMovieClip, 5, {x:500, ease:Linear.easeNone}) .to(myMovieClip, 2.5, { scaleX:2, scaleY:2, repeat:1, yoyo:true, ease:Linear.easeNone }, 0); (I know that myMovieClip is unnecessary but to be sure that the problem doesnt come from something like "the problem is that the provided displayObject doesnt have a Timeline". PS: I also tried addressing rectangle directly, but nothing changes) After some time and reading, I finally got to a working solution with this code : var tl:TimelineMax = new TimelineMax({repeat:1, yoyo:true}); tl.to( myMovieClip, 5, { x:500, ease:Linear.easeNone } ) .to(myMovieClip, 2.5, { scaleX:2, scaleY:2, repeat:1, yoyo:true, ease:Linear.easeNone }, 0 ) .to(myMovieClip, 2.5, { scaleX:1, scaleY:1, repeat:1, yoyo:true, ease:Linear.easeNone }, 2.5 ); yet..... It seems like its not the right way of doing it (I may be wrong ... and it is indeed the right way) Am I missing something? ------------------ part 2 - is this solution good? ---------------- After a while I decided that I want to change the animation effect a little bit. Let me list the whole process again, so its clear what Im trying to do. (the only change from the previous post (link here)is in step 2.2) 1 - move Object from point A to point B 1.1 - at p.A, Object has scale = 1; 1.2 - at p.AB/2 (when you reach half the distance) the Object also needs to be scaled UP by x2 (which scale transition needs to be fluent and too)(i.e. if with scale '1' it has width = '100', then when we scale it up by '2', it has to have width = '200') 1.3 - at p.B Object has scale = 1; 2 - move Object from point B to point A (revert the above) 2.1 - at p.B Object has scale = 1; 2.2 - at p.AB/2 (when you reach half the distance) the Object also needs to be scaled DOWN by x2 (which scale transition needs to be fluent and too)(i.e. if with scale '1' it has width = '100', then when we scale it down by '2' it has to have width = '50') 2.3 - at p.A, Object has scale = 1; the code that I have for this animation is this: var rectangle:Shape = new Shape; rectangle.graphics.beginFill(0xFF0000); rectangle.graphics.drawRect(0, 0, 100,100); rectangle.graphics.endFill(); var myMovieClip:MovieClip = new MovieClip(); myMovieClip.addChild(rectangle); this.addChild(myMovieClip) myMovieClip.y = stage.stageHeight * 0.5 - myMovieClip.height * 0.5; var duration:Number = 5; TweenMax.to(myMovieClip, duration, { x:500, repeat:1, yoyo:true, ease:Linear.easeNone } ); var scaleFactor:Number = 2; TweenMax.to(myMovieClip, duration/2, { scaleX:scaleFactor, scaleY:scaleFactor, repeat:1, yoyo:true, onComplete: changeScaleFactor, ease:Linear.easeNone }); function changeScaleFactor() { scaleFactor = 0.5; TweenMax.to(myMovieClip, duration/2, { scaleX:scaleFactor, scaleY:scaleFactor, repeat:1, yoyo:true, ease:Linear.easeNone }); } As you see..... I only use TweenMax for the animations. Any help or suggestions(with a little provided code if it is possible) for a better solution would be gladly and highly appreciated.

Thank you for the clean solution dear sir but ....Well I guess I have to spill out my secret evil plan now . The question is regarding a AS3 (Flash) project and Im not quite sure you can do chaining in the way you did here. ( tl.to(..........).to(.....) ) ....I might be terrible wrong or Im not doing something quite right. I asked the question here because of : ​- the JavaScript part of the forum is far more answered (has more attention to it) then the AS3 part - the two languages are very similar and I also have a little bit of experience with JavaScript (but not as much as to use freely chaining), so I was hoping it to be just "copy/Paste" Sorry for the inconvenience Will it be possible if you provided an AS3 solution ? if its not to much to ask . PS: the good part is ... that if someone stumbles upon this problem in JavaScript, there will be an answer already

Hello. I have this Object (a regular cube) that I need to move from point A to point B and while doing that I need to change its scale properties. Let me show you what I mean. And the task gets even worse when I need to revert the animation after that. What I mean is : 1 - move Object from point A to point B 1.1 - at p.A, Object has scale = 1; 1.2 - at p.AB/2 (when you reach half the distance) the Object also needs to be scaled x2 (which scale transition needs to be fluent and too) 1.3 - at p.B Object has scale = 1; 2 - move Object from point B to point A (revert the above) 2.1 - at p.B Object has scale = 1; 2.2 - at p.AB/2 (when you reach half the distance) the Object also needs to be scaled x2 (which scale transition needs to be fluent and too) 2.3 - at p.A, Object has scale = 1; I was thinking of using: TweenMax.to(object, duration, {x:B, onUpdate: fluentlyScale }); where fluentlyScale is a function that will handle subsection steps .2 (at p.AB/2 the Object also needs to be scaled x2), but .... how do I tell it when the object has reached the middle point in which the scale has start decreasing. I also thought of an option where I use more then one TweenMax function, something like this TweenMax.to(object, duration/2, {scaleX:2, scaleY:2, repeat: 1, yoyo: true}); TweenMax.to(object, duration, {x:B, onComplete: reverseEffect, repeat: 1, yoyo: true, }); function reverseEffect() { TweenMax.to(object, duration/2, {scaleX:2, scaleY:2, repeat: 1, yoyo: true}); } but.... first: It doesnt quite look like the right way and second: when will the onComplete trigger? after the repeat and yoyo effect have been applied or before that ? i.e. onComplete will trigger when Object has reached point B or when it has returned to its point of origin (pointA). Any help will be gladly appreciated.

Well.......... I have no idea what I did between the time I tested it and the time I posted the question, because I can assure ;D that it did not work at all. Now I`m testing it and .... it actually does what it should do .... strange . Sorry for this post and for the late answer. Cheers. PS: Do I have to set this Forum Question as solved or you ? or it actually does not need to be checked at all.

Hello. I would like to know if it is possible to give the TweenLite.to parameter 'onComplete' an anonymous function to be executed. Something like this: TweenLite.to(myObject, 1, {alpha:0, onComplete:function() { trace("something happens here"); someCounter += 1; } }); ?? or is there a way to do something close ?