0

I am new to gsap and trying to make some animations on it, but when I set gsap to my header it doesn't work. Here is my code:

import { gsap } from "gsap";

  let tl = gsap.timeline();

  useEffect(() => {
    tl.from(".lastHeader", { y: 50, duration: 1 });
  }, []);

thanks in advance.

Myrat
  • 197
  • 1
  • 1
  • 9
  • Hi! Check does element `.lastHeader` was transformed? Try to add `let tl = gsap.timeline({paused: true})` and then after create `tl` (`tl.from(...)`) try to call `tl.play()`. Or try to add `let tl = gsap.timeline({repeat: -1, yoyo: true})` and check does animation play infinite – Greg-- Feb 07 '22 at 09:05
  • `.lastHeader` is a span element, thats why it doesnt work, but why? I tried using it with div element, it works fine. Why doesn't it work with span element? – Myrat Feb 07 '22 at 16:28
  • Because css transform does not apply to inline elements, you can change css to `display: inline-block` more detail https://stackoverflow.com/a/24962108/14135825 – Greg-- Feb 07 '22 at 16:47

1 Answers1

0
import { gsap } from "gsap";

  useEffect(() => {
    let tl = gsap.timeline();
    tl.from(".lastHeader", { y: 50, duration: 1 });
  }, []);


you can use like this once
Deepak Kushwaha
  • 14
  • 5