Can I control a item with two different easing?

[daybrush]

Can I control a item with two different easing?

[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...