Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • May 21, 2014 at 5:43 am #267792
    juicesandmilks

    Hello,

    Is there a way to disable the masonry-like animation that is applied to featured image thumbnails in the portfolio grid layouts when the browser window is re-sized?

    I’d like to retain the responsive nature of the layout, but I just don’t want it to animate when the columns collapse.

    May 22, 2014 at 10:41 pm #268883
    Josue

    Hey!

    Try adding this code to the Quick CSS:

    .grid-entry {
    -webkit-transition: none !important;
    -moz-transition: none !important;
    transition: none !important;
}

    Cheers! 
    Josue

    May 23, 2014 at 5:59 am #268989
    juicesandmilks

    Hi Josue, and thanks for you reply!

    The CSS you provided is definitely getting rid of the transition, but the images are still dancing around quite a bit. It looks like the grid images are first being resized and then later repositioned at each breakpoint, and I’d like to be able to turn this off or override that styling so that the grid columns and images are resized with less noticeable movement ( a bit like the video thumbnails on this page: http://animoto.com/#examples ).

    Do you know where I can find the style or script that controls that behavior?

    May 24, 2014 at 5:09 am #269422
    Ismael

    Hey!

    Thank you for the update

    Please use this instead to disable the portfolio grid animation:

    .js_active .grid-image{opacity: 1 !important;}

    Regards,
    Ismael

    June 5, 2014 at 5:11 am #274935
    juicesandmilks

    Hi Ismael and Josue,

    That styles disable the movement transition and fade-in animation for the portfolio grid, but it doesn’t prevent the grid images from being first resized, and then repositioned as the browser window is resized. So even though the easing and transitions are off now, the images are still bouncing around as the window is made smaller and larger and I’d like to disable that behavior specifically.

    I essentially want to make the portfolio grid columns and thumbnails: http://kriesi.at/themes/enfold/portfolio/portfolio-3-column/
    resize and collapse in the same way that the shop items do: http://kriesi.at/themes/enfold/shop/

    June 9, 2014 at 1:30 am #276310
    Yigit

    Hi!

    With JS, left value is calculated automatically depending on the screen width and each element is placed in the correct order with different left values. We can provide you custom CSS code to make left value fixed, but that would make elements stack on each other. I am not sure if there is an easy way to achieve what you would like. If you really need it, please hire a freelance developer on Envato Studio or Codeable. You can also request quote from WerkPress.

    Best regards,
    Yigit

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