Jump to content
Search Community

set immediateRender: false to main timeline

kkhalilov test
Moderator Tag

Recommended Posts

Hello, I have a timeline in which all components have an immediateRender: false. Сan i apply this property to the whole timeline?

 

Something like this

var lightsBlink = new gsap.timeline({immediateRender: false});

insted of this 

lightsBlink
   .fromTo(printerLightsTop, {fill: '#5ab783'}, {fill: '#f8ad83', immediateRender: false, duration: 0.1})
   .fromTo(printerLightsBottom, {fill: '#5ab783'}, {fill: '#f8ad83', immediateRender: false, duration: 0.1}, '+=0.2')
   .fromTo(printerLightsTop, {fill: '#f8ad83'}, {fill: '#f88673', immediateRender: false, duration: 0.1}, '-=0.2')
   .fromTo(printerLightsBottom, {fill: '#f8ad83'}, {fill: '#f88673', immediateRender: false, duration: 0.1}, '+=0.2');
Link to comment
Share on other sites

Hey @kkhalilov,

 

Of course ...

 


// WITHOUT defaults (long)
var tl = gsap.timeline();
tl.to(".class1", {rotation: -270, duration: 1, ease: "elastic"})
  .to(".class2", {rotation: -360, duration: 1, ease: "elastic"})
  .to(".class3", {rotation: -180, duration: 1, ease: "elastic"});

//WITH defaults (shorter)
var tl = gsap.timeline({ defaults: {duration: 1, ease: "elastic"} } );
tl.to(".class1", {rotation: -270}) //child tweens will inherit the duration and from the parent timeline!
  .to(".class2", {rotation: -360})
  .to(".class3", {rotation: -180});

 

Happy tweening ...

Mikel

  • Like 1
  • Thanks 1
Link to comment
Share on other sites

2 minutes ago, mikel said:

Hey @kkhalilov,

 

Of course ...

 



// WITHOUT defaults (long)
var tl = gsap.timeline();
tl.to(".class1", {rotation: -270, duration: 1, ease: "elastic"})
  .to(".class2", {rotation: -360, duration: 1, ease: "elastic"})
  .to(".class3", {rotation: -180, duration: 1, ease: "elastic"});

//WITH defaults (shorter)
var tl = gsap.timeline({ defaults: {duration: 1, ease: "elastic"} } );
tl.to(".class1", {rotation: -270}) //child tweens will inherit the duration and from the parent timeline!
  .to(".class2", {rotation: -360})
  .to(".class3", {rotation: -180});

 

Happy tweening ...

Mikel

So fast and helpful. Thank you very much!!!

  • Like 2
Link to comment
Share on other sites

24 minutes ago, mikel said:

Hey @kkhalilov,

 

Of course ...

 



// WITHOUT defaults (long)
var tl = gsap.timeline();
tl.to(".class1", {rotation: -270, duration: 1, ease: "elastic"})
  .to(".class2", {rotation: -360, duration: 1, ease: "elastic"})
  .to(".class3", {rotation: -180, duration: 1, ease: "elastic"});

//WITH defaults (shorter)
var tl = gsap.timeline({ defaults: {duration: 1, ease: "elastic"} } );
tl.to(".class1", {rotation: -270}) //child tweens will inherit the duration and from the parent timeline!
  .to(".class2", {rotation: -360})
  .to(".class3", {rotation: -180});

 

Happy tweening ...

Mikel

Mikel, I check this in the code and for a duration this is normal, but for immediateRender it does not work. Do you have an idea why this is happening?

 

It's not work for this type of code:

var lightsBlink = new gsap.timeline({repeat: -1, yoyo: true, defaults: {immediateRender: false, duration: 0.1}});
  • Thanks 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...