Animation and responsive grids with changing row count

  • Resolved AndyiBM

    (@andyibm)


    6 years, 8 months ago

    Hi – I’ve already used your plugin on a couple of sites, and it’s great:) However, I’ve come up against a puzzle with my latest site…

    I have added the ‘do_shortcode’ within a template post loop, triggering a fadeInUp effect for each individual post thumbnail with an entry_delay which increases by .5 second for each thumbnail along the row (then resets to 0 for the next row which is animated on ‘scroll’). All works well on a desktop size 4-thumbnail wide row, but on narrower screens, the row reduces to 3, then 2 thumbnails, but the entry_delay doesn’t adjust and there are long pauses.

    Is there a better way to handle responsive grid animation with delays? Or maybe I’ve missed another parameter that can help? I know I can just keep ALL thumbnails at .5 sec delay, but the effect is not as cool 🙂

    Many thanks,

    Andy

    The page I need help with: [log in to see the link]

Viewing 4 replies - 1 through 4 (of 4 total)
  • Plugin Author eleopard

    (@eleopard)

    6 years, 7 months ago

    Hi AndyiBM,

    Thank you for using Animate It!

    Regarding the issue, I am afraid there is no additional setting to achieve this.

    However, one possible solution is to keep entry_delay same for every element and apply animate on the scroll for all the rows.
    So that even on small screen when the row breaks down, the elements that will move to the bottom will animate on the scroll and those who are already in the viewport area will animate on load.

    Let me know if it helps.

    Thread Starter AndyiBM

    (@andyibm)

    6 years, 7 months ago

    Thanks @eleopard … it’s either that, or to have the php-generated incrementing delay (by .2 sec) and set the delay on ‘load’ rather than ‘scroll’. Not quite as elegant as loading one after another on scroll, but might be ‘good enough’ 🙂

    Cheers!

    Plugin Author eleopard

    (@eleopard)

    6 years, 7 months ago

    Dear AndyiBM,

    For smaller screens, if you set the delay on load, the elements would load even before users scrolls to them. If that’s not a problem with your case, then it would work fine.

    The issue is changing the delay on the runtime (when 4s grid changes to 3s).
    So in this scenario, “Good enough” is all one can hope for 😀

    Thread Starter AndyiBM

    (@andyibm)

    6 years, 7 months ago

    Awesome – thanks for your help, @eleopard

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Animation and responsive grids with changing row count’ is closed to new replies.