Load More animation when loading new blog items

[gircat]

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;
}

[laranz – SUPPORT]

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.

[gircat]

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!

[laranz – SUPPORT]

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.

[gircat]

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,

[laranz – SUPPORT]

Hi,

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

Let us know,

Thanks,
laranz.

[Swift Ideas – Ed]

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