Jump to content
Search Community

TimelineMax timline rebuilding and repeat play (manually)

fastraxpos test
Moderator Tag

Go to solution Solved by OSUblake,

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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

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

Link to comment
Share on other sites

Hi fastraxpos  :)

 

I don't completely understand the first question, but your second question can easily be solved. A from() tween will put itself into position even when the timeline is paused. You'd want to set immediateRender:false in this case. From the docs:

  • immediateRender : Boolean - Normally when you create a tween, it begins rendering on the very next frame (update cycle) unless you specify a delay. However, if you prefer to force the tween to render immediately when it is created, setimmediateRender to true. Or to prevent a from() from rendering immediately, set immediateRender to false. By default, from() tweens set immediateRender to true.

More info in the docs:

 

https://greensock.com/docs/#/HTML5/Animation/TweenMax/from/

 

If you could provide more details and expected behavior about your first question, it would be appreciated.

 

Happy tweening.

:)

  • Like 1
Link to comment
Share on other sites

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

Link to comment
Share on other sites

  • Solution

I wouldn't expect cssText to work like that for transforms as they are handled differently. There's actually an object on your element with the decomposed values.

// Any transform will initialize the object
TweenLite.set(element, { x: "+=0" });

// Now try this..
console.log(element._gsTransform);

That's a read-only object though. To reset a timeline, I would do something like this first...

tl.seek(0).clear();

.

  • Like 1
Link to comment
Share on other sites

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

 

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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!

Link to comment
Share on other sites

That would be referencing the tween you just created in the loop, so no. I don't know if this will work, but try the render() method instead. 

 

So what's the issue you're having? I saw you mention something about making it fast, but I would worry about optimization later. You might be putting a lot work into something with minimal or no performance gains. It sounds like all the animations are pretty simple, as in you're not using some super complicated algorithm to calculate a value, so they should be really fast to create. JavaScript is fast. Your performance hit is almost always going to be the browser with repaints/reflow. 

  • Like 2
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...