Animate target while dragging over

[hillarycohen]

Hi there :)

I'm new to React - and React-DnD itself - and picked this lib to make an app for a school work.

I followed the sortable simple example, and basically copy/pasted/adapted for my needs, and it's working fine. However, I'd like to make some animations when the drag hits the target, like creating a smoother movement. I found a comment here, that illustrate what I'm trying to do:

Is there any example outside on how can I make such animations? Most similar I could found was this one, but couldn't make much of it. If there's nothing, could someone guide me on which methods should I work on, to make it happen? Any help very appreciated.

Thanks for such a cool lib!

[onsta]

I am using react-motion library and my code looks similar to this

    const springSetting2 = { stiffness: 130, damping: 18 };
        const motionStyle = {
          translateX: spring(
            this.width,
            springSetting2
          ),
          translateY: spring(
            this.height
            springSetting2
          )
        };
        return (
          <Motion key={`KEY_${name}`} style={motionStyle}>
            {({ translateX, translateY }) =>
              <div
                style={{
                  position: "absolute",
                  transform: `translate(${translateX}px, ${translateY}px)`
                }}
              >
                <AnimatedComponent  />
              </div>}
          </Motion>

[hql287]

Could you please explain what does this stand for in the motionStyle constant? What would this.width and this.height would return?

[hillarycohen]

I wonder if there's a way to animate it without using external libraries?

[hugetiny]

@hillarycohen 'react-beautiful-dnd' can solve your problem

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.