Jump to content
Search Community

React staggered animation don't work

Yunus Emre test
Moderator Tag

Go to solution Solved by OSUblake,

Recommended Posts

I have two problems. 

 

1) I'm trying to fade in images by staggering them. Fade in part works but stagger part is not. Where is the problem, am I doing a logic mistake?

Is using a hook approach like in the https://codesandbox.io/s/xph6v?file=/src/useTextReveal.js would fix this? 

export function FadeInStagger({ children }) {
  const el = useRef()

  useEffect(() => {
    const animations = []
    const elements = gsap.utils.toArray(el.current.children)
    elements.forEach((element) => {
      const animation = gsap.from(element, {
        duration: 1,
        opacity: 0,
        ease: "none",
        stagger: 0.3,
        scrollTrigger: {
          trigger: element,
          markers: true,
          start: "center 60%",
          end: "center 60%",
          toggleActions: "play play reverse reverse",
        }
      })

      animations.push(animation)
    })

    return () => {
      animations.forEach((animation) => animation.scrollTrigger.kill())
    }
  }, [])

  return <div className="brands-images" ref={el}>{children}</div>
}
<FadeInStagger>
  <img src="/images/brands/samsung.png" alt="Samsung" />
  <img src="/images/brands/trt.png" alt="TRT" />
  <img src="/images/brands/altinpusula.png" alt="Altın Pusula" />
  <img src="/images/brands/aydindogan.png" alt="Aydın Doğan Vakfı" />
  <img src="/images/brands/yildizholding.png" alt="Yıldız Holding" />
</FadeInStagger>

 

2) And it seem's like animated elements breaks some css attributes.

For example  "img:hover { opacity: 1 }" is not working

but  "img:hover { background-color: red } works. Is this a bug?

.brands-images {
  width: 100%;
  display: flex;
  justify-content: space-around;
  align-items: center;

  img {
    transition: 0.3s;
    opacity: .5;
    max-width: 100%;
    height: auto;
  }

  img:hover {
    opacity: 1;
    background-color: green;
  }
}

 

 

Link to comment
Share on other sites

  • Solution

Stagger applies to an array of elements, but you're using a loop, so the target is a single element.

 

Try getting rid to the loop.

 

const animation = gsap.from(el.current.children, {
        duration: 1,
        opacity: 0,
        ease: "none",
        stagger: 0.3,
        scrollTrigger: {
          trigger: el.current,
          markers: true,
          start: "center 60%",
          end: "center 60%",
          toggleActions: "play play reverse reverse",
        }
      })

 

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

Thanks OSUblake! I felt stupid not seeing something obvious. 

2 hours ago, Yunus Emre said:

And it seem's like animated elements breaks some css attributes.

For example  "img:hover { opacity: 1 }" is not working

but  "img:hover { background-color: red } works. Is this a bug?

Is that more about a css or gsap problem?

I can give a codepen sample if you like.

(Solved with gsap anyway)

Link to comment
Share on other sites

On 8/7/2021 at 3:24 PM, Yunus Emre said:

For example  "img:hover { opacity: 1 }" is not working

but  "img:hover { background-color: red } works. Is this a bug?

 

GSAP uses inline styles, which have the highest specificity, so if GSAP is animating the opacity, then it will override the CSS opacity.

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