Trouble with speeding up timeline

[jakob zabala]

I am trying speed up mu timeline by a lot, I am not sure what I am doing wrong!

Thanks

See the Pen VwpPgdE by jaykobz (@jaykobz) on CodePen

[PointC]

You have this on line 79 of your CSS for .div-rect class which is causing a fight for control of the element.

 

transition: all 0.75s ease-out;

Remove that and you should be good to go.

 

[PointC]

BTW - just a couple little syntax things too. Be sure to use defaults.

// bad
const tlbox1 = gsap.timeline({ paused: true, ease: "none" });

// good
const tlbox1 = gsap.timeline({ paused: true, defaults: { ease: "none" } });

And the duration should be in the vars.

// switch  this
tlbox1
  .to(".dr1", 0.01, { y: 0 }, 0)
  .to(".drt1", 0.1, { color: "white" }, 0);

// to this
tlbox1
  .to(".dr1", { duration: 0.01, y: 0 }, 0)
  .to(".drt1", { duration: 0.1, color: "white" }, 0);

Happy tweening.

 

[jakob zabala]

Thanks @PointC! i forgot to remove that, was baffled at the behaviour. 

 

How do I avoid the issue with when i hover of the image and then quickly to the black div with the words on it, the timeline glitches since it doesn't know if its coming or going. Is there a quick fix? my solution I've done in the past is make an empty div the size of the hover over area and and bring the z index up and just target my timelines to this empty div. I am looking for a quicker fix to this, is there one?

 

 

[Cassie]

You can add pointer-events: none to the element thats overlapping and interfering with the hover area.

(In your case the dr1 element that you're animating.)

[jakob zabala]

aaa yes thank you!