Jump to content


  • Posts

  • Joined

  • Last visited

Posts posted by fastraxpos

  1. 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 :)


    See the Pen dWOYpp?editors=0011 by jbevan2007 (@jbevan2007) on CodePen


    This is working well in our codepen, with the set() function called when we need to reset the elements.

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

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

  4. 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;


    See the Pen mmrjVw?editors=0011 by jbevan2007 (@jbevan2007) on CodePen

    - 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


    See the Pen wdzxMm?editors=1001 by jbevan2007 (@jbevan2007) on CodePen

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

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





    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.




    With Previous Rotation


    Without Previous Rotation



    If needed, I can do a video call with someone to go over the code usage, etc.



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

    • Like 1
  7. 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.

  8. 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!

  9. 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?




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




  11. 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?




  12. 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:




    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?




    See the Pen GrmjKx by jbevan2007 (@jbevan2007) on CodePen

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



    • Like 1
  14. Hello,


    I have no code pen URL for this question, because I don't know if I can get this in there without importing most of my animation framework, etc. This is really a question of how to accomplish this in your framework.


    Background Details

    I have a configuration file in PHP which provides the details for each Tween animation, and I've specified friendly names in my code to give me details of the animation. I'll post an example of one of the animations in the end of this post so you can see the fields, structure I provide.


    I have a JSON object below which represents how I format my object before passing it to my functions to animate.


    This array above is sorted by Entrance and Exit animations, and in each of these I have indexes by MS timings from 0 - 10000 (0-10s)


    I obtain the animation details using the name, and it returns in a structure like below, which I use to produce my single animation on one element nicely.

             "ease":"Elastic.easeOut.config(.85, 0.4)"

    So with these 2 pieces, I run my animation for a single layer using TimelineMax and then I loop through the series of the animation keeping the first index using timeline.from() with my parameters, while any other index in the series array is using timeline.to()


    My question is this:


    Knowing when each of the animations are going to begin, using the MS indexes in my above format, can I "schedule" the tweens to play when the MS is reached in the 0-10s interval?


    How would I implement this using purely your framework? I would essentially add a from/to for each animation series item, whenever the animation is called and it's timing matches the current point in the 0-10s interval.


    I'm trying to utilize this similar to the example on your CodePen : so that I can control pause, play, and the timing range for the animation as a whole (for all my elements being animated)


    Let me know if you need further clarification.




    See the Pen zinsg by GreenSock (@GreenSock) on CodePen

  15. Hello,


    After testing, everything seems to work well. I've re-implemented all of my animations with this logic, and reduced my code a bit. Basically I am using from -> to in my previous versions. I just realized that using from actually brings you back to the origin point.


    I'm going to mess around with this a bit more, but it seems very promising.


    Thank you for all your help, and sorry for the confusion!



    • Like 2
  16. I just gave that a try, in the CodePen and had some success.


    I'll test with further implementation, but if I do it like this it works:

      // Set Default Rotation
      tl.set(rotatedEl, {rotation: "+=360"});
      tl.from(rotatedEl, .4, {
        x:        -550,
        opacity:  0,
        rotation: "-=360"

    I will give this some tests and let you know. I have some ideas now, using relative rotation changes. This may work well.




  17. Yes that is correct. I'd like the square to be at it's starting rotation of 45 degrees at the end of the animation. However when running the animation with rotation in any fashion, it replaces this with the values I pass.


    As mentioned, I even tried to set inner elements in second/third example, which should not affect the original (parent) layer's animation. This has to be dynamic, so that any value of rotation can work with it.


    If I want a rotation in from left, clockwise I have to do 0 - 360 for the effect to roll in this way. If I change the last animation to 45, it doesn't render right.


    Does this clarify?

  18. Hello,


    I've changed the SVG in the CodePen to a square. It's set at a 45 degree angle right now.


    Our layers can rotate, or stay without any rotation based on the designer's preference. Our rotation is the only transform we apply which affects the matrix, so the default matrix and the matrix after reset is how our layer will end up after being designed, resized, colors changed, etc.


    The issue is when we  try to apply rotation effects like slideInLeftRotate, the animation should come in from the left on a straight horizontal path, while rotating back to it's original position. If you look at the effect after clicking the first button "Run Animation using Outer Element" twice, it will perform the animation as expected. It comes from direct left (on a straight, horizontal path)


    However when the element is rotated by resetting the original transform with the reset button, it is not maintaining the 45 degree angle we have after the animation runs.. It will either reset it, or come in from a different direction like the top left, instead of directly from the left side.


    I've tried the following 3 scenarios to make this animation work, while maintaining our original rotation after animation completes but no luck.


    I've tried outer elements, inner elements but there is no way to make this work that I am aware of. I was hoping there was some way to make this work, programmatically as we have rotations of different types, from the right, etc.


    Let me know if you understand now.



  19. Hello,


    I've set up a demo CodePen below, which was set up with an element (similar to our Design application's element structure) with an already defined rotation matrix on the parent element we are transforming.


    CodePen URL:


    We've added various transitions such as slideInLeft, slideInLeftRotate, and others which provide entrance and exit animations to our canvas/scene within a 10-20s window of animation. We set these up similar but customized from Animate.css and the basic animations they use.


    Our elements are rotated in absolute position, some using transform matrix to merely control rotation. Our positioning is controlled via left/top CSS properties.


    Our issue:


    When we apply the transform with left (outside canvas) tweened to 0, (maintaining our original left/top in parent), we lose our rotation matrix.


    One of my solutions was to apply the matrix and animation to the inner layer, and this works well to keep our rotation as expected. The issue with this solution, is that our starting point is not coming from left direction due to having a transform within another transform. You can see this occur with the second button in the CodePen demo.


    Is there any way we can achieve this, while maintaining our rotation at completion of animation?


    Please let me know if you have any questions or if you did not understand my request.




    See the Pen RKKVrW by jbevan2007 (@jbevan2007) on CodePen

    • Like 1
  20. Hello,


    This seems to work fine in the CodePen instance, so I think it will be fine when implementing in my libraries.


    Let me know when this has been updated in the source so that I can grab it and update my local file.


    Thank you for the fast response and great support!




  21. Hello,
    We recently began implementing GreenSock libraries into our design application, which involves the use of content editable blocks which make up text layers. Our system is built to work with Medium Editor, and works well for any modification, etc we need to make.
    Now we began implementing animation into our layer system, which will give us entrance and exit effects. I've set up all the tweens and custom animations to the layers, slideIn, rotateIn, zoomIn, bounceIn, etc, using TimelineMax which works amazingly. However when we move to split text, I found a few issues which I ran into, specifically with split text and lines.
    I've attached an example code pen with the issue, using one of the examples from your repository for SplitText.


    Your Link:

    See the Pen gFHza by GreenSock (@GreenSock) on CodePen


    My Link:
    The issue is when a <br> tag is included after typing and creating new lines, the format is as shown below:

    <div id="quote">
        <p>Text with break tag issue<br></p>
        <p>Even With New Lines</p>

    This is throwing an exception DOMException: Node was not found in line 246 of SplitText.js.


    The code on this line is: "element.removeChild(node)"


    When commenting, this works as expected, and the node in console reports a <br> tag as expected.


    Is there any way to prevent this from occurring? I could try some workarounds for this format, but you mention compatibility with most every type of structure (excluding spans, etc). I figured this may be a bug you could fix for other users as well.


    Let me know.




    See the Pen BpLbjv by jbevan2007 (@jbevan2007) on CodePen