Jump to content
Search Community

timeline.render in older versions

lzy100p test
Moderator Tag

Recommended Posts

The timeline.render(0) in the old version is gone in the new version。

I found an alternative way:

timeline.seek(1)
timeline.seek(0)

But this way it looks like it renders twice,In my project there are a lot of animations and rendering them twice may cause lag

Is there an alternative to render in the new version?

Thanks

Link to comment
Share on other sites

On 11/12/2021 at 1:57 PM, GreenSock said:

Can you please explain why you used the undocumented .render(0) previously? What exactly are you trying to accomplish? Is there a reason you don't just set immediateRender: true? Do you have a minimal demo that shows what you're trying to do? That would really help. 

See the Pen eYEXLRN by lzy100p (@lzy100p) on CodePen

Is that how it should be used? It doesn't seem to be working

The first frame is not rendered

            var tl = new TimelineMax({immediateRender:true,repeat:-1,paused:true})
            tl.to(div,0,{autoAlpha:0})
            tl.to(div,2,{autoAlpha:1})
            tl.play()
Link to comment
Share on other sites

No, immediateRender is a tween-specific property. You shouldn't put that on a timeline. 

 

For your example, you could greatly simplify things by using a .fromTo() which by default has immediateRender set to true anyway: 

See the Pen qBXvJbo?editors=0010 by GreenSock (@GreenSock) on CodePen

 

I noticed you're using the very old/outdated syntax too. I would HIGHLY recommend using the more modern syntax. There's no more TimelineLite/TimelineMax or TweenLite/TweenMax. See

 

Happy tweening!

  • Like 1
Link to comment
Share on other sites

19 hours ago, GreenSock said:

No, immediateRender is a tween-specific property. You shouldn't put that on a timeline. 

 

For your example, you could greatly simplify things by using a .fromTo() which by default has immediateRender set to true anyway: 

 

I noticed you're using the very old/outdated syntax too. I would HIGHLY recommend using the more modern syntax. There's no more TimelineLite/TimelineMax or TweenLite/TweenMax. See

Happy tweening!

 

Thank you very much for your advice, the previous project was done with the old version, recently trying to update to the new version

I don't like to use fromTo because it will start the movement immediately

In some complex timelines I usually initialize the objects all at the beginning as they were at the beginning, and then use them later in the timeline

 

like this

image.png.1f8cbfe8c84bcb3dd0723fda57923453.png

 

If I switch to the new version do I have to add intermediateRender on every line or just on the first line?

 

thanks

 

Link to comment
Share on other sites

1 hour ago, lzy100p said:

I don't like to use fromTo because it will start the movement immediately

You can just set immediateRender: false in the fromTo() to make it NOT render until it begins playing. 

 

1 hour ago, lzy100p said:

If I switch to the new version do I have to add intermediateRender on every line or just on the first line?

The behavior is identical in all versions. 

 

By default, immediateRender is true for .from() and .fromTo() tweens because that's typically what people want. If you want to override that by setting immediateRender: false, you would set that on each .from() and .fromTo() tween. You'd have to do that in old versions too.

Link to comment
Share on other sites

3 hours ago, GreenSock said:

You can just set immediateRender: false in the fromTo() to make it NOT render until it begins playing. 

 

The behavior is identical in all versions. 

 

By default, immediateRender is true for .from() and .fromTo() tweens because that's typically what people want. If you want to override that by setting immediateRender: false, you would set that on each .from() and .fromTo() tween. You'd have to do that in old versions too.

Still wish there was a render method,Very helpful for me

 

One more problem was found when upgrading the old project:

Tween does not overwrite the previous Tween very well

See the Pen XWaQKpx by lzy100p (@lzy100p) on CodePen

In gsap2 it will stop after 1 second

This is very different from gsap2

 

Link to comment
Share on other sites

11 hours ago, lzy100p said:

Still wish there was a render method,Very helpful for me

Can you explain what you mean? What are you wishing for that immediateRender doesn't provide? And if you just want to get something to render at a new playhead position, you can easily do that by setting the progress() or time(). 

 

11 hours ago, lzy100p said:

Tween does not overwrite the previous Tween very well

Yes, that's very intentional and it's also easy to fix. We explain it here: 

 

In the old (v2 and earlier) version, the default overwrite mode was "auto". Now it is false because:

  • It's faster (performance) because in the vast majority of cases people aren't creating conflicting tweens, so we can skip the processing involved in hunting down conflicts. 
  • It confused people in some cases because they didn't even know overwriting was a thing. The new behavior in v3 ensures that people opt-in to overwriting so that it never catches them off-guard. 

The fix: either set overwrite: "auto" (or true) in the new/overwriting tweens or you can just set the default mode for all animations to one of those like:

gsap.defaults({overwrite: "auto"});

Does that clear things up? 

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