ATTENTION, PLEASE READ: New topic creation is disabled, as we have moved to a new support system. Your existing topics will remain, but for all new requests you will need to use the new system. Click here to go to the new support request form.

• Back to forum

  Posted in: Cardinal
• November 14, 2014 at 3:21 pm #128455
  gircat

  Member

  Post count: 16

  Hi,

  How can I change the loading animation of the new blog items after pressing the “Load More” Button.

  I thought it was on main CSS style.css:line 8548. But it didn’t work with other animations.

  I want to prepare my own animation with CSS3.

  Thanks!
  R.

  .three-bounce .spinner > div {
      width: 18px;
      height: 18px;
      margin: 0 3px;
      background-color: #333;
      border-radius: 100%;
      display: inline-block;
      -webkit-animation: bouncedelay 1.4s infinite ease-in-out;
      animation: bouncedelay 1.4s infinite ease-in-out;
      /* Prevent first frame from flickering when animation starts */
      -webkit-animation-fill-mode: both;
      animation-fill-mode: both;
  }
  
  .three-bounce .spinner > .bounce1 {
      -webkit-animation-delay: -0.32s;
      animation-delay: -0.32s;
  }
  
  .three-bounce .spinner > .bounce2 {
      -webkit-animation-delay: -0.16s;
      animation-delay: -0.16s;
  }
  

  November 17, 2014 at 12:13 am #128643
  laranz – SUPPORT

  Member

  Post count: 3186

  Hi,

  Can you give the blog page URL to check, so that I can give you the exact css class or a feasible to change it.

  Let us know,

  Thanks,
  laranz.

  November 17, 2014 at 8:56 am #128676
  gircat

  Member

  Post count: 16

  Hi,

  I can’t share the URL at this stage, but I can provide examples of what I have and what I want.

  Now I have a blog element on a page with the pagination type “Load More (Ajax)”. So it looks like this but it triggers with the button instead of the scroll:

  http://cardinal.swiftideas.com/demos/#magazine_three

  Now it is a “popup/zoomin” effect. And what I want to achieve is something similar to “fadeinUp” as the one form the following page, but i’d like to smooth and shorten the appearance. That’s why I mentioned making my own custom CSS3 transition/animation.

  http://daneden.github.io/animate.css/

  Please advice,
  Thanks!

  November 18, 2014 at 3:34 pm #129216
  laranz – SUPPORT

  Member

  Post count: 3186

  Hi,

  Then I suggest you to edit the blog elements animation styles in js/functions.js we are using the .animate function of jQuery ( http://api.jquery.com/animate/ ) the blog element in functions.js starts from line #2315 you can customize the infinity scroll or Ajax in that function.

  Let us know,

  Thanks,
  laranz.

  November 18, 2014 at 4:26 pm #129252
  gircat

  Member

  Post count: 16

  Hi,

  I’ve modified all the items “.animated” in the Blog element, modifying parameters I could observe from the front (e.g opacity), and there is no way to make modifications on the items that load after clicking on the Load More. I could modify the “preloaded” posts and the button itself, but not the loading items.

  Please, can you be more specific? You gave a scope of 300 lines of code…

  Thanks,

  November 18, 2014 at 9:48 pm #129331
  laranz – SUPPORT

  Member

  Post count: 3186

  Hi,

  I ask our developer to answer your question, he can point you in the right direction.

  Let us know,

  Thanks,
  laranz.

  November 19, 2014 at 8:03 pm #129526
  Swift Ideas – Ed

  Keymaster

  Post count: 15264

  Hi @gircat,

  The items added after infinite scroll loading / load more is the jQuery isotope loading animation. I’m not sure how possible it is as the transform is done via jQuery. You can check the docs here, hopefully they will be of some use – http://isotope.metafizzy.co/

  – Ed

• Back to forum

  Posted in: Cardinal