fastraxpos

Yes I could do this, but I've gotten it to work with a from() animation. We have many things involved in our structure, for example we store the zoom states to have a certain X, Y factored by our zoom level, and our original layer objects contain 100% zoom level based values. There is too much involved here for this to be using a fromTo(), but not saying it couldn't work. I've made a mock codepen with an original rotation, original opacity using data-orig-rotation, data-orig-opacity tags on the element, as we don't have our framework baked into the code pen. Thank you for your help and guidance in getting this to work. At least practice makes perfect, so I'm getting more and more fluent in the library after posting all these different posts http://codepen.io/jbevan2007/pen/dWOYpp?editors=0011 This is working well in our codepen, with the set() function called when we need to reset the elements.

In our case, fromTo won't really work because we use from() to bring us back to the original location. So we pass an X or Y outside our canvas (center white area) and it transitions back to it's original position. If we were to change it, we'd need to pass in the starting location, and the current location for each of our elements. Also we'd need to pass our rotation as well. I actually used some of your suggestions, removing the need for parseTransform = true. This now works, with the changes below. In our resetTimelineElements function, I now simply use something like below: var layerObj = FTXCanvas.getLayerById(layerId); TweenLite.set(processedLayer.element, { x: 0, y: 0, rotation: layerObj.rotation.angle || 0, scale: 1, skewX: 0, skewY: 0, opacity: layerObj.opacity || 1 }); We store the entire layer's settings including X, Y, opacity, rotation (angles and radians) and many other attributes so we can easily obtain the rotation and opacity. We use left/top for positioning, so resetting x/y to 0 is fine as well. This works well, and we run it prior to running the new processed animation timeline, without changing the order (shown below) - reset elements - kill timeline - clear timeline

Note: Our goal here is to repeat the animation consistently, in all cases. We use this as a preview of animation which will show in store TV advertisements. So each time we rotate our slideshow image or video, we will need to "reset" this animation so on next iteration of loop it plays properly, in the same fashion. This is more importantly used in our preview screen (as video examples show) so that the user can modify + adjust settings each time they need to, and the preview will play back their changes.

I created 2 code pen demos, one matching each video and the issue we're facing. In the first one below, this symbolizes what we have with rotated elements, using parseTransform. I'm able to repeat the animation multiple times, and if I click play again before, during or after the tween is being animated, it works and replays properly; http://codepen.io/jbevan2007/pen/mmrjVw?editors=0011 - Relates to the working, rotated video example If I look at this example, we get the exact opposite. I have 2 elements with no transforms, and not rotated by default. I play this, and it works. However I have to let the animation fully complete before I can replay it. If I stop it before the tween starts (when it's outside box and hidden) or during the animation, the elements do not show again. I've tried with a basic matrix like this : matrix(1, 0, 0, 1, 0, 0) as well, which is a non-rotated matrix http://codepen.io/jbevan2007/pen/wdzxMm?editors=1001 - Relates to the non-working, non-rotated video example You can see that pressing the first example multiple times (even very rapid) still repeats the animation properly, while the second example does not have this same effect, which is our desired effect.

I'll spend some time creating a code pen for this... Give me a bit to do this. Also, I was using 1.19.0 with the issue, and I just tested after updating to 1.19.1 and still the same result.

One of my team members thought the working video was difficult to see, so here is a new copy of the "working" version with rotation. I can restart the timeline anywhere and have the proper effect. https://drive.google.com/file/d/0B1t3kDzocOAUb0xzN2F3ZkdYOFE/view

Hello, We're faced with some strange issues, and have been for a long while. We are trying to implement entrance effects with our software, so using immediateRender = true we can start our animations off screen, and bring them onto the screen using from() animations. For exit, we use to() animations. Our animations consist of rotation in, sliding in from X/Y positions, etc. I've made two sample videos, but making a codepen with this issue is difficult to replicate and we have lots of code involved in making this work. I figured maybe I could get someone's help in figuring this out, by looking at the videos below. If not, I can try to replicate in code pen. Issues: With rotation on 2 layer elements in our software, we can repeat the animation infinitely with no issues. I added parseTransform = true to all of our tweens so that they parse existing CSS. If we animate the rotated elements, and restart before or after the tween starts, it has no issues. I can even successfully click the restart animation to rebuild as many times as I'd like, as fast as I want and it has absolutely no issues. In the second case, when elements have no prior transform they are breaking or not appearing on screen. We've tried using clearProps 'all' or specifically 'transform' and even X, Y by themselves, but these end up breaking our already rotated elements. So we found the following articles which led us in the direction of parseTransform property, which did work when using rotation perfectly as seen in the video (With Previous Rotation) https://greensock.com/forums/topic/10735-transform-scale-is-broken-when-invoked-twice/ https://greensock.com/docs/#/HTML5/Plugins/CSSPlugin/ The results are below. We want this to work similar to the first video, but I cannot for the life of me figure it out. Note: I kill timeline, clear timeline on each restart of the timeline, in case any properties such as timing sliders, or animation names have changed. I also have a function resetTimelineElements which loops through all elements from previous animation, and I stored the cssText, transform properties of the elements, and re-assigns them back to the elements. VIDEOS ----------------------------- With Previous Rotation https://drive.google.com/file/d/0B1t3kDzocOAUSGZUM3FQS1doSXM/view Without Previous Rotation https://drive.google.com/file/d/0B1t3kDzocOAUZ0FoSkM2dktCdEk/view If needed, I can do a video call with someone to go over the code usage, etc. Thanks

Hello, I've instructed the member to post the above issue in this post. I've confirmed that by using the suggestion in OSUblake's post was the actual fix. Our animation plays now, with no issue. I did keep the overwrite = "none" property in our object however however these tweens always affect different objects. Tween A would update one of our layers to produce entrance effect. And Tween B updates another layer on the screen. (Each layer is a DOM element) I'd be interested in displaying our implementation at some point, I know it's been mentioned in a few of my other posts. However it's a privately accessed piece of software for Digital Signage. There are some quirks I would like to dish out, and the best way to figure these out would be to see the issues occurring naturally in our UI. Again, thank you for your awesome support.

I tried the method render() with no success. I tried running it with TweenLite.render() with no tween specific action, and I also tried it in my loop with tween.render() before playing. There is no issue, I am really trying to just see what my overall options are. Right now the set up I have is fine and it will work for our needs. I was just trying to see if I could pre-schedule my animation timeline each time a user saves animation settings for timing, animation name, duration (speed) and a few other settings such as easing, exit animations, etc. I like the idea of the entire screen beginning in the preview without the elements that are transitioning in, and they come in based on timings so it's a more true preview of their design. These are being used on Digital Signage TVs, so I could make the actual player work right now with the set up I've gotten based on this post. I was really focusing on preview mode, so I think I will just implement the animation timeline on the fly, including playing directly as it's created. This may be my best option. Thank you guys for all your help. I'm loving the libraries, and so far it's filled every need I've had with the help of your insight.

Hello, I changed the code I used and chained a method to my local class, so I could run some logic before playing the animation I used code similar to the below code: var tweens = this.data.timelineTweens; for(var i = 0; i < tweens.length; i++) { TweenLite.set(tweens[i], {immediateRender: true}) } However, this is not actually applying to the tweens in the list. If I manually run the function on index 0 in my array of tweens, it shows the result with the immediateRender: true but other properties are missing. This does not seem to work. I tried doing it with elements but it did not work either. Am I structuring this incorrectly? Let me know, thanks!

That is what I have now, I run the entire function which plays the animation right as it creates the timeline and adds all necessary tweens. But I was just checking if it was possible to prepare the timeline, without playing and have this effect still. If that answer is no, then I will work around this and use the method you suggested (which I already have working) Is it possible that I can use the set() function, in a loop on all tweens prior to playing an animation? Will this property be honored if so? Thanks, Justin

Hmm, You were correct about transforms not applying when using cssText. I saw this in the cssText response, when first querying my element. I thought if I simply mass replaced this value, it would work nicely to reset it back while also giving me a speed increase from less browser reflow/repaint being required.. Using seek(0).clear() resets the timeline nicely and fixes my first issue. I've tried pause(0).clear() and various other ways, but in conjunction with the immediateRender, and paused: true flags, it works as expected. Now the only missing piece to my questions is can I change the flag for immediateRender when I want to play. Its nice how it is now, but if possible I'd like to still have the elements go to their starting position, but only when I trigger play(). This way I can have the screen empty & without the elements being animated so it appears to be a true entrance. The goal in my application is for the user to alter their settings, fine tuning and making changes, while we prepare new animation settings behind the scenes essentially making the play() button work fast and efficient. So using this prepare function, we will be rescheduling & changing animation settings constantly. Thanks, Justin

Hello, Thanks for the quick response! With paused: true, and using immediateRender: false on each of the tweens definitely lets me prepare my animations before playing them. Can I somehow set these all to true when I actually call play? Because I do want them to begin off screen, but only when I'm actually calling play. So this worked great though. It did exactly what I wanted, except when triggering play and starting off screen on demand, as mentioned above. Can this be done? For question #1 If you look at the code pen, click the first button once. Let it play until it exits and an alert box comes up. (button is Run Animation) Once that occurs, close the alert and click the button again. Do you see how this effect is trapped to the outside left of the grey box? It is not replaying again once I use from() and then to() on same element. The way I use to reset it, is cssText (which I capture when I first prepare animation) Does this help clarify? Thanks, Justin

Hello, I'm having two issues right now, which I cannot figure out. Issue #1 I have an animation in my CodePen using the first button, and when it finishes it's animation cycle it reverts the cssText back to it's original position. This is for a "preview" animation set up in my software. This will essentially revert back to the original position, so the user can modify their design layers, animation settings, etc, before playing their animation again. However, on the second run of this animation it seems the translated position is not working properly or some sort of caching mechanism is not recognizing the reverted cssText. It gets stuck to the left of the box where it was on exit. To give more details on this, my design software works based off finished designs, and once a design is finished the user can choose to have things enter the screen at different timings (as well as optionally exit after) I provide entrance, exit animations and in this case it rotates in from left, and rotates back out to the left. If you need more clarification, let me know. Issue #2 I'm having an issue with setting up a timeline without automatically playing. I've added the flag "paused: true" in the TimelineMax options, but what this does is begin positions for the element where the TimelineMax.from() defines, rather than keeping the element in it's ending position until we trigger play to run. I use a chained method in my code prepareAnimationTimeline() which should add all the timings, animation tweens together but returns the timeline object back ready to play, while not moving my elements. I use it like this: prepareAnimationTimeline().play() However if I do not call play, with paused: true, it will simply move my elements off screen in their starting positions for my entrance animations. (TimelineMax.from()) Is there any way to achieve what I'm looking for, where I keep elements on the screen and "prepare" my animation timeline in the fashion I mentioned above? Thanks, Justin

I think you actually answered my question in your last sentence. I saw the position page in search but I assumed it was positioning in terms of x, y, z, and not timing. I just watched your video and I see the 4th parameter (position) lets me define a start time for each animation I want to run. I'll let you know when I've implemented and have the result. Sorry for not providing a code pen, I have too many functions I don't want shared in this case, so let me get back to you. Thanks, Justin