Animation breaks if I apply CSS transformation on div of GSAP staggered div

  • Resolved emz452

    (@emz452)


    10 months ago

    Hi guys,

    I’ve found a situation when the animations breaks and and I’m not sure if it’s because it’s not possible, or there’s a bug.

    I have an outer div (Level 1) with three inner divs (Level 2).

    For the outer div, I switch on GSAP and choose Stagger as the animation type (I tried with both scaling and opacity).

    On it’s own, this works.

    However, if, for each of the 3 inner divs (Level 2), I set the CSS Transformation to scale on hover, the staggering animation only works on the first inner div and the CSS transformation doesn’t happen at all for any of the inner divs.

    Interestingly, it actually all works fine in the editor.

    I have found a workaround, however, if insert another div (Level 3) inside the inner div (Level 2) and apply the CSS transformation to the inner div (Level 3), so there is effectively a div layer separating the GSAP and the CSS Transformation, then it works.

    Cheers,
    Em

Viewing 2 replies - 1 through 2 (of 2 total)
  • Plugin Author wpsoul

    (@wpsoul)

    This will not work, GSAP can’t work properly on block with existed CSS transformation rules, there is notice about this in GSAP panel. You must wrap container in another container and put CSS on another level

    Thread Starter emz452

    (@emz452)

    Thanks for that!

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Animation breaks if I apply CSS transformation on div of GSAP staggered div’ is closed to new replies.