Number cards fly off screen when attempting to return to carousel

[Nancy-Salpepi]

Test device MacBook Air M1 chip

Operating System 13.2.1

Browser Safari

Problem description For https://github.com/phetsims/qa/issues/917, on the Lab Screen: When attempting to return a number card from page 1 of the carousel with page 2 showing (or vise versa), that number will look like it is flying off screen.

Steps to reproduce

1. On the Lab Screen, remove any number card from page 1 of the carousel and place in play area.
2. Press the right arrow of the carousel to show number cards 11-20.
3. Grab the number card from the play area and let go over the carousel.

Visuals I used ?speed=.5 to make the video:

https://user-images.githubusercontent.com/87318828/225372645-a2401418-e7f1-48c2-97d0-39d50f46625b.mp4

Troubleshooting information: !!!!! DO NOT EDIT !!!!! Name: ‪Number Compare‬ URL: https://phet-dev.colorado.edu/html/number-compare/1.0.0-dev.6/phet/number-compare_all_phet.html Version: 1.0.0-dev.6 2023-03-15 01:30:22 UTC Features missing: applicationcache, applicationcache, touch Flags: pixelRatioScaling User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/16.3 Safari/605.1.15 Language: en-US Window: 1203x654 Pixel Ratio: 2/1 WebGL: WebGL 1.0 GLSL: WebGL GLSL ES 1.0 (1.0) Vendor: WebKit (WebKit WebGL) Vertex: attribs: 16 varying: 30 uniform: 1024 Texture: size: 16384 imageUnits: 16 (vertex: 16, combined: 32) Max viewport: 16384x16384 OES_texture_float: true Dependencies JSON: {}

[chrisklus]

Thanks @Nancy-Salpepi! This is because the numbers are returning to their home locations relative to the visible set of numbers on the carousels. For a number that doesn't belong in the visible set, its home spot is going to be off screen to the right or the left. I agree that it's weird, but I'm not sure what a better experience would be - immediately disappearing into the carousel doesn't seem great. Maybe a more reasonable animation speed so it doesn't look as buggy?

It would be great if @pixelzoom and @amanda-phet could weigh in here.

[pixelzoom]

Other sims with carousel that I've worked on (Function Builder, ...) make the objects immediately disappear into the carousel. And I see that's also what is done in CCK. So imo, that's what should be done here.

In other sims, we had also experimented with automatically scrolling the carousel so that the object's "slot" in the carousel is visible. We found that to be too distruptive/confusing to the user experience.

[amanda-phet]

I just reviewed a bunch of other carousels and there seems to be a standard behavior where the object flies back toward its original location even if the stack/spot isn't visible. I would like to do the same here. Thanks for finding this @Nancy-Salpepi .

Assigning to @chrisklus to implement the change.

[amanda-phet]

I was unclear in how I described the behavior. I showed @chrisklus the behavior in Expression Exchange and Fractions: Intro of an object flying back toward its home location as if the home page was visible.

I am also totally ok with having the object disappear over the carousel as it happens in CCK, if that's easier to implement.

@chrisklus is going to start by looking into the behavior seen in Expression Exchange and Fractions: Intro.

[chrisklus]

@zepumph and I investigated and found it was pretty easy to make the cards go back to their home location (as if that page was still visible). @Nancy-Salpepi can you check this out on phettest and see how it feels? Please note we have yet to make the speed change in https://github.com/phetsims/number-compare/issues/22 (though it is next up).

[Nancy-Salpepi]

This looks good. Exactly what I was expecting based on my experience with Function Builder! Looking forward to seeing it once #22 is fixed!

Closing!