<commit_before>BEST.component('famous-demos:flipper-button', {
    tree: 'flipper-button.html',
    behaviors: {
        '#flipper-root': {
            'origin': [0.5, 0.5],
            'size': function(size) {
              return [size[0], size[1]];
            },
            'rotation-x': function(rotationX) {
                return rotationX;
            },
            'scale': function(scale) {
                return [scale, scale, 1];
            }
        },
        '.flipper-back': {
            'rotation-x': function() {
                return Math.PI;
            }
        },
        '.front-label' : {
            '$yield' : '.front-label'
        },
        '.back-label' : {
            '$yield' : '.back-label'
        },
        '.button-surface' : {
            'backface-visible': false,
            'box-shadow': '0px 10px 25px -10px rgba(0,0,0,0.75)',
            'unselectable': true,
            style: {
                'font-family' : 'Arial',
                'text-align': 'center',
                'border-radius': '5%',
                'cursor': 'pointer'
            }
        },
        '.front-surface': {
            'style': {
                'background-color': 'rgb(244, 67, 54)',
            }
        },
        '.front-label-surface' : {
            'style' : {
                'color': 'rgb(255,255,255)',
                'font-size' : '20px',
                'line-height': '85px',
                'pointer-events': 'none'
            }
        },
        '.back-label-surface': {
            'style' : {
                'background-color': 'rgb(238, 238, 238)',
                'font-size' : '20px',
                'font-weight': 'bold',
                'color': 'rgb(244, 67, 54)',
            }
        }
    },
    events: {
        public: {
            'flip-click': function(state, event) {
                var rotation = state.get('rotationX') > 0 ? 0 : Math.PI;
                state.set('rotationX', rotation, {duration: 500, 'curve': 'outExpo'});
                window.state = state;
                state.set('scale', 0.8, {duration: 150, 'curve': 'inCirc'}, function(state){

                    // console.log('callback')
                    state.set('scale', 5, {duration: 250, curve: 'outBack'});
                    // setTimeout(function() {
                    //     state.set('scale', 2, {duration: 250, curve: 'outBack'});
                    // }, 1)
                }.bind(null, state));
            }
        }
    },
    states: {
        size: [200, 80],
        zPos: { front: 1, back: 0 },
        rotationX: 0,
        scale: 1
    }
});
<commit_msg>Fix typo<commit_after>BEST.component('famous-demos:flipper-button', {
    tree: 'flipper-button.html',
    behaviors: {
        '#flipper-root': {
            'origin': [0.5, 0.5],
            'size': function(size) {
              return [size[0], size[1]];
            },
            'rotation-x': function(rotationX) {
                return rotationX;
            },
            'scale': function(scale) {
                return [scale, scale, 1];
            }
        },
        '.flipper-back': {
            'rotation-x': function() {
                return Math.PI;
            }
        },
        '.front-label' : {
            '$yield' : '.front-label'
        },
        '.back-label' : {
            '$yield' : '.back-label'
        },
        '.button-surface' : {
            'backface-visible': false,
            'box-shadow': '0px 10px 25px -10px rgba(0,0,0,0.75)',
            'unselectable': true,
            style: {
                'font-family' : 'Arial',
                'text-align': 'center',
                'border-radius': '5%',
                'cursor': 'pointer'
            }
        },
        '.front-surface': {
            'style': {
                'background-color': 'rgb(244, 67, 54)',
            }
        },
        '.front-label-surface' : {
            'style' : {
                'color': 'rgb(255,255,255)',
                'font-size' : '20px',
                'line-height': '85px',
                'pointer-events': 'none'
            }
        },
        '.back-label-surface': {
            'style' : {
                'background-color': 'rgb(238, 238, 238)',
                'font-size' : '20px',
                'font-weight': 'bold',
                'color': 'rgb(244, 67, 54)',
            }
        }
    },
    events: {
        public: {
            'flip-click': function(state, event) {
                var rotation = state.get('rotationX') > 0 ? 0 : Math.PI;
                state.set('rotationX', rotation, {duration: 500, 'curve': 'outExpo'});
                window.state = state;
                state.set('scale', 0.8, {duration: 150, 'curve': 'inCirc'}, function(state){

                    // Hack --> Bug with implentation of Transitionable in StateManager
                    setTimeout(function() {
                        state.set('scale', 1, {duration: 250, curve: 'outBack'});
                    }, 1);
                }.bind(null, state));
            }
        }
    },
    states: {
        size: [200, 80],
        zPos: { front: 1, back: 0 },
        rotationX: 0,
        scale: 1
    }
});

{'fraction_non_alphanumeric': 0.16826738378793699, 'fraction_numerical': 0.032654629273914715, 'mean_word_length': 1.1578947368421053, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 6, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '824200', 'n_tokens_mistral': 1679, 'n_tokens_neox': 1497, 'n_words': 282}