Slideindown animations not working correctly in V2
datainvestor opened this issue · 22 comments
Your system information
- VelocityJS version: 2.0.5
- Browser: Vivaldi/Chrome
- Operating System: Windows 10
Checklist
- Is this an issue with code?: No
- Is this an issue with documentation?: Yes
- Have you reproduced this in other browsers?: Yes
- Have you checked for updates?: Yes
- Have you checked for similar open issues?: Yes
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):
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...
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 ;-)
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.
@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).
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.
And you've just shown you haven't read any release notes or documentation - tried with translateX...
Sorry where can I find the release notes? I havn't found anything about this in the documentation.
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.
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).
#881 (comment) (linked above)
Closed in 184a354
Not pushed to NPM yet due to other changes locally and complete lack of time / help.
Is it still not fixed ? Seems like you still lack of time :-(
slideInDown/slideInUp still wont animated.
@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...
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 :/
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!
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
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.
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.
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'
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.
Any chance this will get fixed soon?
I made an example to demonstrate the bug: https://codepen.io/exodus4d/pen/GRgVpMM
- jquery/3.4.1/jquery.min.js
- velocity/2.0.5/velocity.min.js
- velocity/2.0.5/velocity.ui.min.js
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
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:
slideOutUpslideOutDownslideOutLeftslideOutRightslideInUpslideInDownslideInLeftslideInRight
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!
{
"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');