Jump to content
Search Community

make a tween and see the effect immediately

coolester test
Moderator Tag

Go to solution Solved by Carl,

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

When the animation is paused and I create a tween with a button, I can't see the tween immediately, the tween will effect the element when I play obviously, but is there any workaround to see the effect even if the animation paused. example: when set the opacity of an element to 0 with a tween the I can still see the element, when I play the animation it will disapear immediately.

Sorry if this question answerd before.

  • Like 1
Link to comment
Share on other sites

HI coolester  :)

 

I'm also having a hard time understanding the question. Are you possibly talking about from() tweens and immediateRender? If that's what you meant, you can set immediateRender to false. 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.

If you could elaborate a bit, or better yet create a CodePen demo, we could give you some better answers.

 

Happy tweening.

:)

  • Like 2
Link to comment
Share on other sites

I'm sorry to ask an unclear question, I don't sleep properly and when I do so, my English doesn't get any better, does it? :)

I created a pen actually, here:

See the Pen gmJxpY?editors=0010 by coolesterman (@coolesterman) on CodePen

Explanation: Effect in and effect out only affect the blue square.

every time you click on "create/update animation" button, every tween related to the blue square will be removed from the time line and the state of the blue square will reset, and then it gets two brand new tween for coming in and getting out.

 

Problem: OK what is the problem now? if you select the "left" for the effect_in and hit "create/update animation" you will see the Blue Square immediately jump to the left, so we can see the tween affect it, but then if you select "fade" from the effect_in and hit "create/update animation" to create new animation, you'll see that the Blue Square doesn't get the opacity of zero at the start point. When I hit the "play" button it will work as expected. But why can I see it at the first place?

 

Best regards :)

Link to comment
Share on other sites

Thanks for the demo. That helps a lot.

 

I see a couple things. You're assigning the same variable for two things. Your 'in effect' and 'out effect' are both trying to use effect as the name. You're also doubling up on the start name for in/out start values. So, it looks to me like what's happening is the second conditional statement is overriding the first and it's adding both tweens to the timeline at time 0.

 

Your first one on line 18 is what you're expecting:

  if(effect == "fade"){
    tl.fromTo(s1, 1, {opacity:0}, {opacity:1},start);
  }

But you're getting a starting value from the second one on line 32

  if(effect == "fade"){
    tl.fromTo(s1, 1, {opacity:1}, {opacity:0}, start);
  }

I think you need a couple more variable names to get the desired behavior.

 

Does that help?

 

Happy tweening.

:)

Link to comment
Share on other sites

  • Solution

Alright, PointC gets 10 points for figuring this out before the demo was provided.

If I understand correctly, setting immediateRender:false on the opacity tween in the fade out effect will solve the problem:

if(effect == "fade"){
    tl.fromTo(s1, 1, {opacity:1}, {opacity:0, immediateRender:false}, start);
  }

https://codepen.io/GreenSock/pen/dvEJNL?editors=0010

 

If the in effect is fade and the out effect is fade you are building a timeline that has 2 fromTo tweens that alter opacity.

The "in" effect fades from opacity:0 to opacity:1 

The "out" effect fades from opacity:1 to opacity:0

 

Since from() and fromTo()  tweens have immediateRender set to true by default you were instantly seeing the opacity:1 being set by the second tween in the "out" effect.

 

Whenever you have multiple from() tweens affecting the same properties of the same element you will need to set immediateRender appropriately.

 

Why this happens is more clearly explained here:

https://greensock.com/immediateRender

 

Let us know if that solution helps.

Thanks for making the demo, it definitely clarified things way beyond the first post ;)

  • Like 5
Link to comment
Share on other sites

Sweet - 10 extra points.  B)

 

I'd still recommend separate variable names for clarity. But maybe that's just me. I get confused easily.  :D

 

I'd also prevent the start time from being greater than or equal to the end time. That could also cause some confusion about when tweens get added to the timeline and getting unexpected results. That's how I made it create two tweens at the same time and create the overwrite. Effect == 'fade' was then true for both and both tweens added at time 0.

 

Happy tweening.

:)

  • Like 5
Link to comment
Share on other sites

1- I'd still recommend separate variable names for clarity. But maybe that's just me.

2- I'd also prevent the start time from being greater than or equal to the end time.

 

I will definitely do that in my real project. Thank you PointC. (I was looking for you in point a and b but there you are. :D)
  • Like 1
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...