Place to share custom transitions? Sharing my CSS3 flip transition

[Laubeee]

Hi guys I was wondering if there is a place where we could gather custom written transitions... I recently wrote a FLIP transition using CSS3 and would like to share it with you guys as well as hear your opinion about it, maybe improve it together etc. etc.

However I wasn't sure WHERE I should do that... it seems the WIKI is deactivated..?

Below the code, feel free to use it. Notes:

• Because you can't animate CSS3-transforms directly with jQuery animate() I animate the background-position value (which is not used at all in my case) and use the step option to do update the rotation. So if you want to use a background-image on your slide you will need to take another css property for that purpose.
• Browser Support: IE9+, FF (tested in version 22), Chrome (tested in version 28,29), Opera (not tested), Safari (tested in Safari 6)

$(document).ready(function() {
    $.fn.cycle.transitions.flip = {
        transition: function( slideOpts, currEl, nextEl, fwd, callback ) {
            var opts = slideOpts;
            var curr = $(currEl), next = $(nextEl);

            opts.sync = false;

            var fn = function() {
                next.css('visibility','visible');
                next.animate({backgroundPosition: 0 }, {
                    step: function(now,fx) {
                        $(this).css('-webkit-transform','rotateY('+now+'deg)');
                        $(this).css('-moz-transform','rotateY('+now+'deg)'); 
                        $(this).css('-ms-transform','rotateY('+now+'deg)');
                        $(this).css('-o-transform','rotateY('+now+'deg)');
                        $(this).css('transform','rotateY('+now+'deg)');
                    },
                    duration: opts.speed/2,
                    easing: 'linear', //opts.easeOut || opts.easing,
                    complete: callback
                });
            };
            // css before transition start //next.css(opts.cssBefore || {});
            next.css('-webkit-transform','rotateY(-90deg)');
            next.css('-moz-transform','rotateY(-90deg)'); 
            next.css('-ms-transform','rotateY(-90deg)');
            next.css('-o-transform','rotateY(-90deg)');
            next.css('transform','rotateY(-90deg)'); 
            next.css('background-position','-90px');
            next.css('opacity',1);
            next.css('visibility','hidden'); // hide next slide for first half of the transition
            next.css('display','block');

            curr.css('background-position','0px');
            curr.animate({backgroundPosition: 90}, {
                step: function(now,fx) {
                    $(this).css('-webkit-transform','rotateY('+now+'deg)');
                    $(this).css('-moz-transform','rotateY('+now+'deg)'); 
                    $(this).css('-ms-transform','rotateY('+now+'deg)');
                    $(this).css('-o-transform','rotateY('+now+'deg)');
                    $(this).css('transform','rotateY('+now+'deg)');
                },
                duration: opts.speed/2,
                easing: opts.easeOut || opts.easing,
                complete: function() {
                    //css after transition //curr.css(opts.cssAfter || {});
                    curr.css('visibility','hidden'); // hide curr slide for second half of the transition
                    if (!opts.sync) {
                            fn();
                    }
                }
            });

            if (opts.sync) {
                    fn();
            }
        }
    }
});

[FlashJunior]

can you share it @ jsfiddle ?

PS: and can you please chain some stuff?

$(document).ready(function() {
    $.fn.cycle.transitions.flip = {
        transition: function( slideOpts, currEl, nextEl, fwd, callback ) {
            var opts = slideOpts;
            var curr = $(currEl), next = $(nextEl);

            opts.sync = false;

            var fn = function() {
                next.css('visibility','visible');
                next.animate({backgroundPosition: 0 }, {
                    step: function(now,fx) {
                        $(this).css({
                            '-webkit-transform','rotateY('+now+'deg)',
                               '-moz-transform','rotateY('+now+'deg)',
                                 '-ms-transform','rotateY('+now+'deg)',
                                    '-o-transform','rotateY('+now+'deg)',
                                        'transform','rotateY('+now+'deg)'
                        });
                    },
                    duration: opts.speed/2,
                    easing: 'linear', //opts.easeOut || opts.easing,
                    complete: callback
                });
            };
            // css before transition start //next.css(opts.cssBefore || {});
            next.css({
                '-webkit-transform','rotateY(-90deg)',
                   '-moz-transform','rotateY(-90deg)',
                     '-ms-transform','rotateY(-90deg)',
                        '-o-transform','rotateY(-90deg)',
                            'transform','rotateY(-90deg)',
                'background-position','-90px',
                'opacity',1,
                'visibility','hidden',
                'display','block'           
            });

            curr.css('background-position','0px');
            curr.animate({backgroundPosition: 90}, {
                step: function(now,fx) {
                    $(this).css({
                        '-webkit-transform','rotateY('+now+'deg)',
                           '-moz-transform','rotateY('+now+'deg)',
                             '-ms-transform','rotateY('+now+'deg)',
                               '-o-transform','rotateY('+now+'deg)',
                                   'transform','rotateY('+now+'deg)'
                    });
                },
                duration: opts.speed/2,
                easing: opts.easeOut || opts.easing,
                complete: function() {
                    //css after transition //curr.css(opts.cssAfter || {});
                    curr.css('visibility','hidden'); // hide curr slide for second half of the transition
                    if (!opts.sync) {
                            fn();
                    }
                }
            });

            if (opts.sync) {
                    fn();
            }
        }
    }
});

[Laubeee]

hmm.. well I had to post the whole cycle in there, but yes, here it is: http://jsfiddle.net/Cv8TA/5/

[malsup]

Awesome. I'll clean this up and repost if it's ok with you, @Laubeee.

[mikila85]

This is such good news!! Was waiting for cycle2 to meet css3 since the day i met it. Malsup can you try to find a way to make it more generic so other transitions will be easy to add such as cube (i got the css3 to make it but dont know how to implement it on the cycle2.

@Laubeee thank you so much, this is great addon for cycle2!!

[malsup]

I could use some help getting it working correctly in Safari, Opera and IE.

Example page: http://jquery.malsup.com/cycle2/demo/flip.php

Plugin: http://jquery.malsup.com/cycle2/jquery.cycle2.flip.js

[Laubeee]

Of course, use it however you like :) I thought I had it for ie9 as well with the -ms-transform property.. but you're right it doesnt work in ie9 :( If I can fix it i'll let you know. For safari however I think you have a background- or z-index issue, looks like the container or anything else is with a white background is blocking the view to what is "behind" it

edit: ie10 works fine for me with your demo

[malsup]

Yes, my background:white style on the container is what caused Safari to transition incorrectly. Thanks!

[FlashJunior]

it works in:

• Chrome 29.0.1547.62
• Firefox 23.0.1
• Safari 7.0 (9537.59)
• Opera 16.0.1196.55
• IE 10.0.9200.16660 (Win 7)

but not in:

• IE 9 (Win 7)
• IE 8 (Win XP)
• Opera 12.16
• Camino 2.1.2 (1.9.2.28 20120308211433)

[malsup]

3D transforms aren't supported in IE9. So IE < 10 won't work. I've set the fallback transition to scroll.

[Laubeee]

Cool you implemented it as plugin! :) In my version, the pager is updated at the very end of the transition... I think it would be nice to update it right in the middle from where the new slide is shown 90° rotated.... should not be too hard, is it?

[malsup]

@Laubeee Today's update should support your request.

[jl4511]

Issue with the flip plugin

Hi, I'm using cycle2 with data-cycle-fx="scrollHorz" and data-cycle-manual-fx="flipHorz". When I click "Next" on a slide the image flips as expected. But next time that image should be shown the image is gone! (the overlay shows alright). Tested in: Google Chrome 60, Firefox 54.0.1, IE 11 and Safari 5.1.7 (windows)