CODEWITHSUNDEEP
javascriptjquerycssjquery-masonry
Mark1270287
Mark1270287

Reputation: 421

Does Masonry v3 still support fly-in transitions when appending elements?

I am implementing Desandro Masonry for the first time. I have a functioning implementation using Masonry v3 and InfiniteScroll. The transitions when appending new elements at the bottom of the container are fading in and growing from 0px to the proper size.

I have seen a lot of references to the older versions using a fly-in effect from the edge of the browser window. Is there still a way to implement this transition with the new version?

I suspect the key is in the visibleStyle and hiddenStyle parameters, but I do not know what I need to set them to.

Default values for visibleStyle and hiddenStyle:

visibleStyle: { opacity: 1, transform: 'scale(1)' },
hiddenStyle:  { opacity: 0, transform: 'scale(0.001)' }

My Code:

    //Singleton for handling layout
    var bvtPageLayout = {
        masonry         : null,
        initialize      : function () {

            //init masonary layout
            var masonaryArguments = {
                columnWidth: '.column-sizer',
                gutter: '.gutter-sizer',
                itemSelector: '.recipe',
                transitionDuration: '1s',
                visibleStyle: { opacity: 1, transform: 'scale(1)' },
                hiddenStyle:  { opacity: 0, transform: 'scale(0.001)' }
            };
            $('.recipes.masonry').masonry(masonaryArguments);
            bvtPageLayout.masonry = $('.recipes.masonry').data('masonry');

            //init infinitescroll
            var numberPages = $('ul.pager li a').length;
            $('.recipes.masonry').infinitescroll({
                loading: {
                    img         : "",
                    msgText     : "<em>Loading...</em>",
                    finishedMsg : "<em>No more recipes.</em>"
                },
                state: {},
                debug: true,
                navSelector  : "ul.pager",
                nextSelector : "ul.pager a.next",    
                itemSelector : ".recipes.masonry",
                maxPage      : numberPages
                }, 
                function(newContent) {
                    bvtPageLayout.masonry.appended( newContent );                       
                }
            );
        }
    }

Upvotes: 0

Views: 1551

Answers (1)

Mark1270287
Mark1270287

Reputation: 421

I figured out a solution. I used a translateX CSS3 transition stacked with the scale and opacity effects that were already in place.

Here are the updated affected parameters:

        visibleStyle:   { opacity: 1, transform: 'translateX(0px) scale(1)' },
        hiddenStyle:    { opacity: 0, transform: 'translateX(-800px) scale(0.10)' }

Upvotes: 1

Related Questions