Skip to main content

Transition Timing Function

You can set a prop's transition timing function at a given frame.

  • By default, if a transition timing function is not provided, the prop will use the global transitionTimingFunction (see Global Config).
new GlobalConfigGenerator()
    .addProp((generator) => {
        generator.type('TABLE').addPosition((positionGenerator) => {
            positionGenerator.x(50).y(50).transitionTimingFunction('ease-in')
        }).addPosition((positionGenerator) => {
            positionGenerator.x(90).y(90).transitionTimingFunction('ease-out')
        }, 2).addPosition((positionGenerator) => {
            positionGenerator.x(90).y(90)
        }, 3).addPosition((positionGenerator) => {
            positionGenerator.x(90).y(90)
        }, 4).addPosition((positionGenerator) => {
            positionGenerator.x(200).y(0).transitionTimingFunction('steps(5, jump-both)')
        }, 5).shouldDisplayName(false)
    })
    .addProp((generator) => {
        generator.type('CHARACTER').addPosition((positionGenerator) => {
            positionGenerator.x(200).y(200).transitionTimingFunction('steps(4, jump-start)')
        }).addPosition((positionGenerator) => {
            positionGenerator.x(50).y(50).transitionTimingFunction('ease, step-start, cubic-bezier(0.1, 0.7, 1.0, 0.1)')
        }, 2).addPosition((positionGenerator) => {
            positionGenerator.x(90).y(90)
        }, 3).addPosition((positionGenerator) => {
            positionGenerator.x(150).y(150).transitionTimingFunction('cubic-bezier(0.1, 0.7, 1.0, 0.1)')
        }, 4).addPosition((positionGenerator) => {
            positionGenerator.x(100).y(90).transitionTimingFunction('cubic-bezier(.09,.93,.36,1.14)')
        }, 5)
    })