Duration property ignored for some elements

[Kejas]

Hi,

with  GSAP3  I cant seem to animate an element to the set duration in code like this:

tl.fromTo(".stagecover", {duration:5, autoAlpha:1}, {autoAlpha:0});

Animation runs always for around 0.5 seconds disregarding the duration.

Please help.

See the Pen dyPpjxy by kutuhal (@kutuhal) on CodePen

[mikel]

Hey @Kejas,

 

from the DOCS

 

1.  fromVars - An object containing the initial (starting) property/value pairs. You do NOT put special properties here like duration, delay, etc. - those go in the toVars

 

So put the duration into the toVars !

 

Happy Tweening ...

Mikel

[OSUblake]

Your demo has errors. It's ease: "none" not ease: none.

 

Think of a fromTo as just a set and to. You don't put stuff like duration or easing in a set.

gsap.set(".stagecover", { autoAlpha: 1 });
gsap.to(".stagecover", { autoAlpha:0, duration: 5, ease: "none" });

// or
gsap.fromTo(".stagecover", { autoAlpha: 1 }, { autoAlpha:0, duration: 5, ease: "none" });