FX, FX, FX, FX, FX, FX, FX!!!

Here try this updated demo… you can drag and drop the box – it’s a little sensitive if you drag too fast, but it should give you an idea of where I was headed.

Click the “list” button (I’ll figure out a better name for it) to see the list of all fx as they can be pasted into the code:

$('#slider')
 .anythingSlider(options)
 .anythingSliderFX({
  // list code would go here
 });

I was thinking maybe they could just run the bookmarklet from a preview screen or something. Then instead of alerting the code, you could maybe tie into the list function and just grab the info.

Very slick.

How will we detect all of the available elements in each panel from the “Add a slideshow” button? Or, is that something for me to figure out ??

I think this is a great option if we can figure out how to implement it seamlessly.

I’ll brainstorm some ideas.

Thanks!!!

-J

oh yeah, quick question:

How do I animate opacity with your demo?

I just have it as “fade”… maybe I need to add something that allows setting opacity levels?

UX police here again, pointing out some things that were discussed above but should NOT be done:
– Anything that requires the user to type in code. Use dropdowns, checkboxes, etc. instead.
– Anything that involves copying and pasting code. PHP can do this.
– Too many easing transforms. Otherwise, be ready to answer support emails asking stuff like “What is Quint and why can’t I see any difference from Quart? I think this plugin is broken!”

Also, like I mentioned before, the left-right “classic” effect should be, from the user’s point of view, just another effect. This means that if, for example, a slide has a fade or expand effect to it, the animationTime should automatically become zero (no slide-in effect). It should be up the the user to combine effects if needed.

Maybe I can include a link to this demo so they can understand how each easing function works.

Very nice easing demo, I never saw it before. And yes, a link would be helpful, although a little demo built into the plugin would be even nicer.

On the other hand, the average user would think that those effects are just variations of the expand FX. Most of them won’t understand how the easing calculations apply to all other FX, including slide-ins, fades etc.

we can definitely do any/all of those things. Linking to a demo and video will be essential. I think that most of these options will be semi-limited to semi-savvy developers in the earliest stages as I/we flesh out the setup.

In the meantime, I’m having a hell of a time converting this:

Array
(
    [0] => Array
        (
            [0] => stdClass Object
                (
                    [element] => h3
                    [property] => top: 50px
                    [time] => 250
                    [easing] => linear
                )

            [1] => stdClass Object
                (
                    [element] => img
                    [property] => opacity: 1
                    [time] => 300
                    [easing] => linear
                )

        )

    [1] => stdClass Object
        (
            [0] => stdClass Object
                (
                    [element] => img
                    [property] => left: 0
                    [time] => 300
                    [easing] => swing
                )

            [3] => stdClass Object
                (
                    [element] => .caption
                    [property] => bottom: 40px
                    [time] => 300
                    [easing] => linear
                )

        )

)

Array
(
    [0] => Array
        (
            [0] => stdClass Object
                (
                    [element] => img
                    [property] => opacity: 0
                    [time] => 300
                    [easing] => linear
                )

            [1] => stdClass Object
                (
                    [element] => h3
                    [property] => top: -50px
                    [time] => 250
                    [easing] => linear
                )

        )

    [1] => stdClass Object
        (
            [0] => stdClass Object
                (
                    [element] => img
                    [property] => left: -500px
                    [time] => 300
                    [easing] => swing
                )

            [4] => stdClass Object
                (
                    [element] => .caption
                    [property] => bottom: -100px
                    [time] => 300
                    [easing] => linear
                )

        )

)

into this:

inFx : {
    '.textSlide h3'  : { opacity: 1, top  : 0, duration: 400, easing : 'easeOutBounce' },
    '.textSlide li'  : { opacity: 1, left : 0, duration: 400 },
    '.textSlide img' : { opacity: 1, duration: 400 },
    '.quoteSlide'    : { top : 0, duration: 400, easing : 'easeOutElastic' },
    '.expand'        : { width: '100%', top: '0%', left: '0%', duration: 400, easing : 'easeOutBounce' }
   },
   // out = the animation that occurs when you slide "out" of a panel
   // (it also occurs before the "in" animation)
   outFx : {
    '.textSlide h3'      : { opacity: 0, top  : '-100px', duration: 350 },
    '.textSlide li:odd'  : { opacity: 0, left : '-200px', duration: 350 },
    '.textSlide li:even' : { opacity: 0, left : '200px',  duration: 350 },
    '.textSlide img'     : { opacity: 0, duration: 350 },
    '.quoteSlide:first'  : { top : '-500px', duration: 350 },
    '.quoteSlide:last'   : { top : '500px', duration: 350 },
    '.expand'            : { width: '10%', top: '50%', left: '50%', duration: 350 }
   }

Any ideas on how I should be approaching it?

I wish I knew php better… you’re going to use the custom fx instead of the built-in one? If you use the built-in functions, then the result should be:

'.quoteSlide'         : [ 'top', '500px', '1000', 'easeOutElastic' ],
'.expand'             : [ 'expand', '10%', '400', 'easeOutBounce' ],
'.textSlide h3'       : [ 'top fade', '200px', '500', 'easeOutBounce' ],
'.textSlide img,.fade': [ 'fade' ],
'.textSlide li'       : [ 'listLR' ]

Was trying to come up with a way to easily allow either/both. Figured that the custom fx provide more long-term flexibility, though the built in functions would be much more noob friendly… and easier to mask with inputs (dropdowns/checkboxes/etc)…

Hmmmm…. back to the drawing board…

I ended up doing a json_encode of the arrays and passed them to JS in a variable. Now I need to use jQuery Templating to make it look good. Is that how you would do it, JS Master?

LOL I’m not a JS master *hang head*… and I’ve never used jQuery Templating LOL. But I’m glad to see that you’ve fixed the problem.

Hmmm, maybe I should output the custom fx as well =/

Anyway, @flixflix I’ve updated the designer with helpful tooltips! ??

So, just to reiterate, what do you think if I added an “advanced” button to show all of the options currently showing, then make a basic mode as you said, with drop downs for time, distance, and maybe even some basic selectors… what should I limit the easing to?

Oops, I renamed the file so the above links are broken =/… it’s FX Builder now, not designer.

Decided to ditch jQuery Templating after all. Was easier to loop through my arrays and build what I needed…

I think that’s a great idea. Though, not sure what to limit the easing to.

I’ve just about finished a very early beta, but am running into some weird js issues because it’s all in a php file…

Does anything about this script look wrong?

jQuery('#slider-274').anythingSliderFx({

                    inFX : {

                        'h3' : { top: '50px', duration: 360, easing: 'linear'},
                        'img': { opacity: 1, duration: 250, easing: 'linear'}

                    }, outFX : {  

                        'h3' : { top: '-50px', duration: 360, easing: 'linear'},
                        'img': { opacity: 0, duration: 300, easing: 'linear'}

                     }

                });

No erros in the console…
Just about got it after many, many hours of teaching myself about multidimensional array, json_encode and other fun stuff!

Nevermind… figured out what I did wrong… inFX => inFx…

I decided to pass the array off to javascript to setup a template. This is working great… almost.

I have the variables setup for both the inFx and the outFx. I can log the variables to the console successfully, but I can’t get them to print out into the script, which is in a php file. Here’s a stripped down version of what’s going on:

<?php
$output .= "
        <script> 

            var use_fx       = {$useFX},
                in_fx        = {$in_fxArray},
                out_fx       = {$out_fxArray},
                tmpl         = '',
                tmpl2        = '',
                fx           = '';

            jQuery('#slider-{$rand}').anythingSlider({
                ....
            });

            if ( use_fx === true ) {    

                jQuery.each(in_fx, function(index, invalue) {
                    jQuery.each(invalue, function(index, val) {
                        tmpl += val['element'] + ': { ' + val['property'] + ', duration: ' + val['time'] + ', easing: ' + val['easing'] + '},';
                    });
                });     

                //console.log(tmpl); works fine... 

                jQuery('#slider-{$rand}').anythingSliderFx({

                    inFx : {

                        tmpl

                        // should look like this:
                        //'.panel h3' : { top: '5px', duration: 360, easing: 'linear'},
                        //'.panel img': { opacity: 1, duration: 250, easing: 'linear'},
                        //'.caption'  : { left: 0,    duration: 300, easing: 'swing' }

                    },
                    outFx : {  

                        tmpl2 //deleted from above to save space.

                     }

                });

        }// end if use_fx

        </script>";

    }

    return $output;
?>

The problem is that I can’t get tmpl to echo. I’ve tried document.write and echo, but everything returns an error…

Any ideas?