Forum Discussion
Amazing animated drag and drop interaction
Hi,
I saw this incredible drag-and-drop interaction that I really want to learn how to recreate. It's in the first 30 seconds of this video: https://youtu.be/Z2KfMpSwV3o
I wanted to reach out to the community to see if anyone knew how I could create this.
Hi Amanda. I'm almost certain there is an easier way to accomplish this, but I was able to recreate the interaction using basic shapes.
Hi Daniel, you are a genius! Thank you so much.
I tried to copy your file, but I must have missed something. When I preview the whole burger floats down right at the start. When I drop the items into the Drop Zone, the layers don't show and the items drop anyway (regardless of the order). I think my problem has something to do with the True/False Variables.
Could you tell me what I did wrong? It's on slide 1.8 Build A Burger.
Hi Amanda,
Looks like the initial/default state for the "floatdown" items was not set to Hidden, hence why all the items appeared at the outset.
To have the drag items return to their initial position, the "Prevent the user from..." box needed to be ticked on the slide layer properties of each numbered layer. Also, the layer needs to reset when the layer is closed (also noticed a "hide layer..." trigger was missing on each layer):
Hi Amanda, and welcome to the E-Learning Heroes community!
In addition to what Daniel shared, here are a few articles that you may find helpful:
- Storyline 360: Drag-and-Drop Questions
- 3 Ways to Create Drag-and-Drops with Storyline 360
- Here’s How You Can Create and Customize Freeform Drag-and-Drop Interactions
If you run into any trouble or have additional questions, please feel free to reach out. We'll be happy to help!
