search

julianshapiro / velocity

Accelerated JavaScript animation.
VelocityJS.org
MIT License
17.29k stars 1.56k forks source link

Slideindown animations not working correctly in V2 #887

Open datainvestor opened 6 years ago

datainvestor commented 6 years ago

Your system information

Checklist

Please describe your issue in as much detail as possible:

In velocity v2 (latest update) the animation sequences look the same. They all just behave as fade in, not as slideinout slideup etc. I've seen issue about slidein not working in Velocity v2 and we should use the animate.css syntax in order to work, but the animations somehow are not correctly being displayed.

Jsfiddle example showing issue in action (code):

https://jsfiddle.net/h17ocavf/

Rycochet commented 6 years ago

This may be related to #881 where the easings are not running correctly - as soon as I get time to push that (it's mixed with other unfinished changes) then I can check if it "feels" better.

The reason why we ask you to use JSFiddle is that that included Velocity version will update automatically to the latest on here, unfortunately your Codepen links directly to a specific version, so there's no easy way to test if it has been fixed...

Rycochet commented 6 years ago

Thanks for the Fiddle, lets me see a bit better - looks like the translate3d(0,-100,0) is getting changed to translate3d(,-100,) which is breaking it, furthermore it's set to display:inline so can't translate anyway - need to decide what to do with that, as it's not something that can easily get display:inline-block added without breaking other things - some thought is needed ;-)

Frohmen commented 6 years ago

I'm also having trouble after upgrading to version 2 and I have converted my code to conform to the latest syntax.

Please look here new.oasrorelsen.se, and press the hamburger icon, the menu should slide out from the left of the screen, but instead of animating it just pops out.

Rycochet commented 6 years ago

@Frohmen Separate out the relevant code into a JSFiddle, then if it should be working as per the Wiki at the top of the page open a bug report, otherwise go to StackOverflow and ask for help (I'll likely be the one to help when I have time either way, but this is a bug tracker, not a support forum).

Frohmen commented 6 years ago

It seems as if transform is no longer animated, i have both tried with translateX and using the sequence "slideInLeft". If I use "slideInLeft" it seems as if the only thing that gets animated is the opacity.

Rycochet commented 6 years ago

And you've just shown you haven't read any release notes or documentation - tried with translateX...

Frohmen commented 6 years ago

Sorry where can I find the release notes? I havn't found anything about this in the documentation.

Frohmen commented 6 years ago

Where in the documentation can i find any info about this? I have read through it several times, but havn’t been able to find anything about this.

Rycochet commented 6 years ago

https://github.com/julianshapiro/velocity/blob/master/V2_CHANGES.md

Transforms - Use these directly within CSS, don't try the old shortcuts as they don't exist.

https://github.com/julianshapiro/velocity/blob/master/CONTRIBUTING.md

Unless you're reporting an obvious bug that can be immediately recreated by anyone, please create a demo with the minimum amount of code necessary to reproduce your bug. You can use this template, which already has Velocity and jQuery included (jQuery is not required by Velocity, it is included for ease of examples).

https://github.com/julianshapiro/velocity/issues/881#issuecomment-407340619 (linked above) Closed in https://github.com/julianshapiro/velocity/commit/184a354f2ac2a7c0b49ef58b86a7dc2e32d5f869 Not pushed to NPM yet due to other changes locally and complete lack of time / help.

colapsnux commented 5 years ago

Is it still not fixed ? Seems like you still lack of time :-(

slideInDown/slideInUp still wont animated.

http://jsfiddle.net/u081jnoa/8/

Rycochet commented 5 years ago

@colapsnux Really busy at work, and just finished moving house, together with other non-work commitments... I really want to get the time to finish updating the tests and get v2 released properly, but I honestly don't know when I can do it...

Tronix117 commented 5 years ago

Any news regarding this issue, did you have some free time to take a look ? Transform is the main element for animation and no transform is working anymore. v2 could be great, but can't use it without that working :/

Rycochet commented 5 years ago

It's there, but you need to install from github rather than NPM - which is definitely not ideal - I'm hopefully getting some time I can work on multiple open source projects in August... If I get some time before that then I will prioritise updating the release mechanism and get it updated on npmjs!

Tronix117 commented 5 years ago

It still did not work on the master branch :/ I was using this one. It seems to work with "translateX" alone, but then gpu acceleration with translateZ is not enable. Plus, all default transition using transform does not seem to work

Rycochet commented 5 years ago

It seems to work with "translateX" alone, but then gpu acceleration with translateZ is not enable. Plus, all default transition using transform does not seem to work

Read replies earlier in the thread - and read the actual documentation in he wiki - neither of those are css and will not work at all.

Tronix117 commented 5 years ago

I red everything, however I'm pretty sure transform: translateX(50px) is valid CSS (https://developer.mozilla.org/fr/docs/Web/CSS/transform-function/translateX), you misread me, I'm not talking about the old transformX ;)

However those https://github.com/julianshapiro/velocity/blob/master/src-ui/specials/rollIn.ts does not work, because they are using translate3d and rotate3d.

Tronix117 commented 5 years ago

To help your debugging:

Working:

Velocity 'registerSequence', 'slideInLeftBig',
  duration: 800
  '0%':
    transform: 'translateX(-75px) translateY(-75px) translateZ(1px)',
    opacity: '0',
    display: 'block'
  '100%':
    transform: 'translateX(0) translateY(0) translateZ(0)',
    opacity: '1',
    display: 'block'

Not Working:

Velocity 'registerSequence', 'slideInLeftBig',
  duration: 800
  '0%':
    transform: 'translateX(-75px) translateY(-75px) translateZ(0)',
    opacity: '0',
    display: 'block'
  '100%':
    transform: 'translateX(0) translateY(0) translateZ(0)',
    opacity: '1',
    display: 'block'

Not Working:

Velocity 'registerSequence', 'slideInLeftBig',
  duration: 800
  '0%':
    transform: 'translate3d(-75px, 0, 0)',
    opacity: '0',
    display: 'block'
  '100%':
    transform: 'translate3d(0, 0, 0)',
    opacity: '1',
    display: 'block'
Rycochet commented 5 years ago

Ah, really not clear from what you wrote there, sorry!

Those should be working correctly, I'll double check as soon as I get time (at work and almost fully booked till after the weekend etc) - this is a large part of the reason why I've not promoted this out of beta yet, where there isn't the automated testing to confirm that everything is working the way it should do :-/

If you can put those examples into a JSFiddle for me to play with it would be really helpful.

GittCatt commented 5 years ago

Any chance this will get fixed soon?

exodus4d commented 4 years ago

I made an example to demonstrate the bug: https://codepen.io/exodus4d/pen/GRgVpMM

Click on the button should trigger 'fadeInUp' 'bounce' sequences. Looking at the bounce sequence from velocity.ui.js:

Velocity("registerSequence", "bounce", {
    "duration": 1000,
    "0,100%": {
        transformOrigin: "center bottom"
    },
    "0%,20%,53%,80%,100%": {
        transform: ["translate3d(0,0px,0)", "easeOutCubic"]
    },
    "40%,43%": {
        transform: ["translate3d(0,-30px,0)", "easeInQuint"]
    },
    "70%": {
        transform: ["translate3d(0,-15px,0)", "easeInQuint"]
    },
    "90%": {
        transform: "translate3d(0,-4px,0)"
    }
});

... we see that transformOrigin: "center bottom" is set correctly. transform property does not work

exodus4d commented 3 years ago

I have a sequenceFactory() in order to fix the issue with translate3d() not working in v2.0(beta). It "overwrites" the default sequences but can be used for all sequences you want to fix or add. You need a config object/matrix, with either static vars, or custom callback functions 

const slideProps = {
 // steps:     ['0%',   '100%'],                // optional for 2 columns, mandatory for >2 columns
    opacity:   ['0',    '1'   ],
    transform: ['100%', '0'   ].map(translate), // some props might need a custom callback, e.g. to flip 100% -> -100%, or translateX -> translateY
    display:   ['block'       ],
 // …n:        [from,   step1, step2, …, stepX]
};

Then call the factory with some common default config, in order to create 8 sequences at once: slide + (Out || In) + (Up || Down || Left || Right)

sequenceFactory('slide', slideProps, {duration: 500, easing: 'easeOut'});

... Will register this:

Now the sequenceFactory(). It might look complex, in fact it is just a simple/nested chain of vanilla Array/Object methods, with no assignment.

const sequenceFactory = (name, {steps = ['0%', '100%'], ...props} = {}, config = {}) => Velocity(
    'registerSequence',
// ➜ console.log(JSON.stringify(
    ['In', 'Out'].reduce((sequences, inOut) => ({ // build 'in', 'out' sequences …
        ...sequences,
        ...['Up', 'Down', 'Left', 'Right'].reduce( // … for each direction …
            (seq, direction) => ({
                ...seq,
                [`${name}${inOut}${direction}`]: Object.assign(// … with unique name. Merge default config …
                    steps.reduce(
                        (stepProps, step, i) => ({ // … with animation steps objects (0%, ➜ 100%) …
                            ...stepProps,
                            [step]: Object.fromEntries( //  … build animation step object …
                                Object.entries(props).map( // … from parameter matrix
                                    ([prop, row]) => (
                                        [
                                            prop,
                                            (cell => ( // check cell value …
                                                typeof cell === 'function' ? // … if cell has function …
                                                    cell({ // … call cell function and use returned value …
                                                        inOut,
                                                        direction
                                                    }) :
                                                    cell // … if cell has no function use plain cell value … (could be 'undefined')
                                            ))( // … ^^ invoke this with current row[colIndex]
                                                row[
                                                    inOut === 'In' ?
                                                        i :                 // … from matrix column …
                                                        row.length - 1 - i  // … or inverted matrix column …
                                                ]
                                            )
                                        ]
                                    )
                                ).filter(([prop, val]) => val !== undefined) // … filter props with empty cell value (see 'undefined' above)
                            )
                        }), {}
                    ),
                    config // default config
                )
            }), {}
        )
    }), {})
// ➜ , null, 2))
);

Uncomment the two marked lines to see the related object thrown into Velocity('registerSequence', XXX):

Click to expand! ```json { "slideInUp": { "0%": { "opacity": "0", "transform": "translateY(-100%)", "display": "block" }, "100%": { "opacity": "1", "transform": "translateY(0)" }, "duration": 500, "easing": "easeOut" }, "slideInDown": { "0%": { "opacity": "0", "transform": "translateY(100%)", "display": "block" }, "100%": { "opacity": "1", "transform": "translateY(0)" }, "duration": 500, "easing": "easeOut" }, "slideInLeft": { "0%": { "opacity": "0", "transform": "translateX(-100%)", "display": "block" }, "100%": { "opacity": "1", "transform": "translateX(0)" }, "duration": 500, "easing": "easeOut" }, "slideInRight": { "0%": { "opacity": "0", "transform": "translateX(100%)", "display": "block" }, "100%": { "opacity": "1", "transform": "translateX(0)" }, "duration": 500, "easing": "easeOut" }, "slideOutUp": { "0%": { "opacity": "1", "transform": "translateY(0)", "display": "block" }, "100%": { "opacity": "0", "transform": "translateY(-100%)" }, "duration": 500, "easing": "easeOut" }, "slideOutDown": { "0%": { "opacity": "1", "transform": "translateY(0)", "display": "block" }, "100%": { "opacity": "0", "transform": "translateY(100%)" }, "duration": 500, "easing": "easeOut" }, "slideOutLeft": { "0%": { "opacity": "1", "transform": "translateX(0)", "display": "block" }, "100%": { "opacity": "0", "transform": "translateX(-100%)" }, "duration": 500, "easing": "easeOut" }, "slideOutRight": { "0%": { "opacity": "1", "transform": "translateX(0)", "display": "block" }, "100%": { "opacity": "0", "transform": "translateX(100%)" }, "duration": 500, "easing": "easeOut" } } ```

Callbacks

Some prop values need some more attention, and might change based on current In / Out and direction Left, Top,.. from the slide config (see above): transform: ['100%', '0'].map(translate) I have a translate() that creates my callback:

const axesByDirection = direction => (['Left', 'Right'].includes(direction) ? 'X' : 'Y');
const invertValueByDirection = (direction, value) => `${['Left', 'Up'].includes(direction) && value !== '0' ? '-' : ''}${value}`;
const translate = value => ({direction}) => `translate${axesByDirection(direction)}(${invertValueByDirection(direction, value)})`;

Demo

stickyPanelServer.velocity('slideOutUp');
stickyPanelServer.velocity('slideOutDown');
stickyPanelServer.velocity('slideOutLeft');
stickyPanelServer.velocity('slideOutRight');
stickyPanelServer.velocity('slideInUp');
stickyPanelServer.velocity('slideInDown');
stickyPanelServer.velocity('slideInLeft');
stickyPanelServer.velocity('slideInRight');

velocity

Rycochet commented 3 years ago

@exodus4d That's really awesome!!