Tagged: 

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • May 25, 2017 at 11:30 pm #799882
    bitojoe

    Rather than having the products in the masonry grid zip across the screen into place whenever I sort them by category, I’d like them to fade out and fade in in their new spots.

    There are several transitions or animations (opacity, scale, translate, etc) occurring whenever I sort products (by clicking a “.av_show_short” link), and I can’t figure out how to manipulate or disable each one.

    Ideally, all the products would fade out, they would translate to their new spots, and then fade back in.
    How can override these animations to implement my own?

    May 26, 2017 at 2:06 pm #800134
    Victoria

    Hey bitojoe,

    Could you please give us a link to your website, we need more context to be able to help you. Sometimes there is a class with a name of animation applied, other times not.

    Best regards,
    Victoria

    May 26, 2017 at 10:50 pm #800429
    bitojoe

    Yes, indeed. Here you are: https://madcap.wpengine.com/

    May 28, 2017 at 10:56 am #800755
    Victoria

    Hi bitojoe,

    On the screenshot in private you van see elements and animation applied, you can override it via css:

    
.avia_sortable_active .isotope {
    -webkit-transition: height 0.5s 0.2s cubic-bezier(0.165, 0.840, 0.440, 1.000);
    transition: height 0.5s 0.2s cubic-bezier(0.165, 0.840, 0.440, 1.000);
}

    Best regards,
    Victoria

    May 31, 2017 at 6:24 pm #802131
    bitojoe

    Victoria,

    I agree it’s a lovely animation, but the design and brand team are adamant about having products fade in and out.

    I tried changing the duration on the .avia_sortable_active .isotope classes to slow things down, but that’s applied only to the av-masonry-container. So when I set it to 5 seconds, the only difference was the footer seemed to move up. However, that doesn’t change the movement of the children, which in this case are a‘s. They still zip around as quick as ever.

    But I can tweak them with .avia_sortable_active .isotope a. There the opacity and transform(scale) are controlled on the fly via a script which edits the inline styles.

    The one problem I’ve discovered though is that when I change the transition-duration, there is a stutter before the element settles into place. Do you know why that would be?

    Thanks for pointing me in the right direction.

    • This reply was modified 7 years, 6 months ago by bitojoe.
    June 2, 2017 at 3:00 pm #803050
    Yigit

    Hi,
    We would be glad to help you with this customization, but at the moment there is no easy way to do this by using a small custom code snippet, so I am afraid its out of the scope of our support.

    But please feel free to request such feature at our feature request system: https://kriesi.at/support/enfold-feature-requests/

    This system allows us to keep track of user suggestions and lets you vote on the feature you would like to see the most. I am afraid though there is no guarantee that a feature will get implemented. If that’s something you really need you can always try to hire a developer for the task :)

    Best regards,
    Yigit

  • Author
    Posts
Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.