Tagged: , ,

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • July 2, 2018 at 10:27 am #980036
    realisedesign

    So I want a “slide from bottom” animation on my masonary gallery. (well, all of my core content really…)

    The only animation you can have on masonry gallery is the card-scale type popup.

    I want the content elements to appear as governed by the column I put them in as at the moment they will appear as I want if I just refresh the page, but they will not if I scroll down to the content.

    Thanks,
    Sean

    July 3, 2018 at 7:15 am #980417
    Ismael

    Hey realisedesign,

    Thank you for using Enfold.

    You can define your own transition or effect. This is the default animation.

    /*pop up animation*/
@-webkit-keyframes avia_msonry_show {
  0%   { -webkit-transform:translateZ(300px) translateY(200px) rotateX(-70deg); opacity: 0.1;  }
  100% { -webkit-transform:translateZ(0px) translateY(0px) rotateX(0deg); opacity: 1; }
}
@keyframes avia_msonry_show {
  0%   { transform:translateZ(300px) translateY(200px) rotateX(-70deg); opacity: 0.1;  }
  100% { transform:translateZ(0px) translateY(0px) rotateX(0deg); opacity: 1;  }
}

/*animated arrow animattion*/
@-webkit-keyframes avia_fade_move_down {
  0%   { -webkit-transform:translate(0,-20px); opacity: 0;  }
  50%  { opacity: 1;  }
  100% { -webkit-transform:translate(0,20px); opacity: 0; }
}
@keyframes avia_fade_move_down {
  0%   { transform:translate(0,-20px); opacity: 0;  }
  50%  { opacity: 1;  }
  100% { transform:translate(0,20px); opacity: 0; }
}

    More info about css keyframes: https://www.w3schools.com/CSSref/css3_pr_animation-keyframes.asp

    Best regards,
    Ismael

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