Can I control a item with two different easing?

[alonprince]

I want to move an item in an arc. So I should control the 'top' to be moved by ease-in, the 'left' to be moved by ease-out. I have no idea about how to control an item with two different easing type. Is there a simple way to do this?

Here is my code.

    const animate = new scenejs({
          '.hand-img': {
            0: {
              top: 830 * 0.005 + 'rem'
            },
            0.8: {
              top: 950 * 0.005 + 'rem'
            },
            2: {
              top: 950 * 0.005 + 'rem'
            }
          }
        }, {
          selector: true,
          easing: 'ease-in',
          iterationCount: 'infinite'
        });
        const animate2 = new scenejs({
          '.hand-img': {
            0: {
              left: 500 * 0.005 + 'rem'
            },
            0.8: {
              left: 620 * 0.005 + 'rem'
            },
            2: {
              left: 620 * 0.005 + 'rem'
            }
          }
        }, {
          selector: true,
          easing: 'ease-out',
          iterationCount: 'infinite'
        });
        animate.play();
        animate2.play();

[daybrush]

@alonprince
I'm sorry. Scene is based on css, so only one easing can be used simultaneously per element.

There are ways to use the different selector as shown below.

const animate = new Scene({
    '.hand-img': {
        0: {
            top: 830 * 0.005 + 'rem'
        },
        0.8: {
            top: 950 * 0.005 + 'rem'
        },
        2: {
            top: 950 * 0.005 + 'rem'
        },
        options: {
            easing: 'ease-in',
        },
    },
    'img.hand-img': {
        0: {
            left: 500 * 0.005 + 'rem'
        },
        0.8: {
            left: 620 * 0.005 + 'rem'
        },
        2: {
            left: 620 * 0.005 + 'rem'
        },
        options: {
            easing: 'ease-out',
        },
    },
}, {
    selector: true,
    iterationCount: 'infinite',
});

animate.play();

[alonprince]

Thanks for your helping! It works!

[anybany]

Hi, i am trying to achieve the same but can't make it work.
I've got like a curtain which should close with easing A and after a delay open with easing B.
the strange thing is i only see the "second" animation.
please note the different selectors
#vorhangHeader.zu .elementor-container
and
#vorhangHeader.auf .elementor-container

here is my code:

const Vorhang = new Scene({
	'#vorhangHeader.zu .elementor-container': {
		0: {
			"min-height": headerHeight + 'px'
		},
		0.3: {
			"min-height": '100vh'
		},
		options: {
			easying: 'cubic-bezier(.83,.03,.24,.65)'
		},
	},
	'#vorhangHeader.auf .elementor-container': {
		0: {
			"min-height": '100vh'
		},
		2: {
			"min-height": headerHeight + 'px'
		},
		options: {
			delay: 2,
			easying: 'cubic-bezier(.33,.01,0,.99)'
		},
	}
}, {
	selector: true,
});
Vorhang.playCSS();

can someone please tell me what i am doing wrong?

edit: here is a (not) working example: http://wordpress.p564942.webspaceconfig.de/

[daybrush]

@anybany

I'm sorry. If you use playCSS(), it's impossible to apply different easing to the same element.

Would you like to just play()?

[anybany]

@daybrush

i just did that, but it doesn't work either.
it just seems to play the first animation...