Container/Wrapper Animation not triggering on mobile

  • Resolved antonyjosephsmith

    (@antonyjosephsmith)


    3 years, 4 months ago

    I have three column blocks, each with three columns nested inside a Container/Wrapper. The only function I’m looking to use at this point is the animation and they’re set to Fade Up.

    This all works fine on Desktop however the animation does not trigger on Mobile.

    If I remove a single column block to there are two column blocks each with three columns then it works again, I’m assuming it has something to do with the overflow.

    It’s setup on this dev site here:

    https://studiokaioti.com/v2/

    Thanks

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

    (@wpsoul)

    3 years, 4 months ago

    It’s strange bug, from technical side I don’t see any reason why this happens. Maybe try to set Overflow as hidden or visible on Container block (in spacing panel) or try to replace inner blocks from Group blocks to Container blocks. better to use Css grid for such templates

    If it will not help, then, you can enable GSAP library (but this requires animation addon)

    Thread Starter antonyjosephsmith

    (@antonyjosephsmith)

    3 years, 4 months ago

    I’ve switched out the columns to use CSS Grid and messed around resetting the spacing [since default block spacing from the theme.json doesn’t seem to be respected] however the issues remains. Once the third row is added the animation stops working. Even with two rows it doesn’t trigger when the first panel comes into view so it looks like empty space.

    I was trying to save some time, turns out it would have been quicker to just write the CSS animations myself!

Viewing 2 replies - 1 through 2 (of 2 total)

The topic ‘Container/Wrapper Animation not triggering on mobile’ is closed to new replies.