Slideindown animations not working correctly in V2 #887

datainvestor · 2018-07-24T09:50:44Z

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):

https://jsfiddle.net/h17ocavf/

Rycochet · 2018-07-24T10:06:21Z

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 · 2018-07-30T06:28:46Z

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 · 2018-09-03T12:57:43Z

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 · 2018-09-03T16:47:35Z

@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 · 2018-09-06T13:07:39Z

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 · 2018-09-06T13:27:26Z

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

Frohmen · 2018-09-06T19:30:40Z

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

Frohmen · 2018-09-10T19:21:38Z

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 · 2018-09-11T06:11:33Z

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.

colapsnux · 2019-01-09T12:43:12Z

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

slideInDown/slideInUp still wont animated.

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

Rycochet · 2019-01-09T12:46:13Z

@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 · 2019-07-18T10:19:20Z

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 · 2019-07-18T10:33:34Z

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 · 2019-07-18T10:36:44Z

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 · 2019-07-18T10:44:42Z

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 · 2019-07-18T11:01:09Z

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 · 2019-07-18T11:06:23Z

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 · 2019-07-18T11:08:44Z

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 · 2019-09-12T22:11:26Z

Any chance this will get fixed soon?

exodus4d · 2020-02-01T22:16:28Z

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

exodus4d · 2020-11-14T03:21:44Z

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:

slideOutUp
slideOutDown
slideOutLeft
slideOutRight
slideInUp
slideInDown
slideInLeft
slideInRight

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');

Rycochet · 2020-11-14T08:39:56Z

@exodus4d That's really awesome!!

Rycochet added the Bug label Jul 30, 2018

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Slideindown animations not working correctly in V2 #887

Slideindown animations not working correctly in V2 #887

datainvestor commented Jul 24, 2018 •

edited

Loading

Rycochet commented Jul 24, 2018

Rycochet commented Jul 30, 2018

Frohmen commented Sep 3, 2018 •

edited

Loading

Rycochet commented Sep 3, 2018

Frohmen commented Sep 6, 2018

Rycochet commented Sep 6, 2018

Frohmen commented Sep 6, 2018 •

edited

Loading

Frohmen commented Sep 10, 2018

Rycochet commented Sep 11, 2018

colapsnux commented Jan 9, 2019

Rycochet commented Jan 9, 2019

Tronix117 commented Jul 18, 2019

Rycochet commented Jul 18, 2019

Tronix117 commented Jul 18, 2019

Rycochet commented Jul 18, 2019

Tronix117 commented Jul 18, 2019

Tronix117 commented Jul 18, 2019

Rycochet commented Jul 18, 2019

GittCatt commented Sep 12, 2019

exodus4d commented Feb 1, 2020 •

edited

Loading

exodus4d commented Nov 14, 2020 •

edited

Loading

Rycochet commented Nov 14, 2020

Slideindown animations not working correctly in V2 #887

Slideindown animations not working correctly in V2 #887

Comments

datainvestor commented Jul 24, 2018 • edited Loading

Your system information

Checklist

Please describe your issue in as much detail as possible:

Jsfiddle example showing issue in action (code):

Rycochet commented Jul 24, 2018

Rycochet commented Jul 30, 2018

Frohmen commented Sep 3, 2018 • edited Loading

Rycochet commented Sep 3, 2018

Frohmen commented Sep 6, 2018

Rycochet commented Sep 6, 2018

Frohmen commented Sep 6, 2018 • edited Loading

Frohmen commented Sep 10, 2018

Rycochet commented Sep 11, 2018

colapsnux commented Jan 9, 2019

Rycochet commented Jan 9, 2019

Tronix117 commented Jul 18, 2019

Rycochet commented Jul 18, 2019

Tronix117 commented Jul 18, 2019

Rycochet commented Jul 18, 2019

Tronix117 commented Jul 18, 2019

Tronix117 commented Jul 18, 2019

Rycochet commented Jul 18, 2019

GittCatt commented Sep 12, 2019

exodus4d commented Feb 1, 2020 • edited Loading

exodus4d commented Nov 14, 2020 • edited Loading

Callbacks

Demo

Rycochet commented Nov 14, 2020

datainvestor commented Jul 24, 2018 •

edited

Loading

Frohmen commented Sep 3, 2018 •

edited

Loading

Frohmen commented Sep 6, 2018 •

edited

Loading

exodus4d commented Feb 1, 2020 •

edited

Loading

exodus4d commented Nov 14, 2020 •

edited

Loading