Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Can I control a item with two different easing?

See original GitHub issue

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

Issue Analytics

State:
Created 4 years ago
Comments:5 (2 by maintainers)

Top GitHub Comments

1reaction

daybrushcommented, Jul 14, 2019

@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();

0reactions

anybanycommented, Oct 9, 2020

@daybrush

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