Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[Carousel] Animation on Carousel Item change doesn't always occur #9232

Closed
2 of 6 tasks
macandcheese opened this issue May 1, 2024 · 2 comments
Closed
2 of 6 tasks

[Carousel] Animation on Carousel Item change doesn't always occur #9232

macandcheese opened this issue May 1, 2024 · 2 comments
Assignees
@geospatialem @DitwanP
Labels
4 - verified Issues that have been released and confirmed resolved. bug Bug reports for broken functionality. Issues should include a reproduction of the bug. c-carousel Issues that pertain to the calcite-carousel component Calcite (design) Issues logged by Calcite designers. calcite-components Issues specific to the @esri/calcite-components package. estimate - 3 A day or two of work, likely requires updates to tests. impact - p2 - want for an upcoming milestone User set priority impact status of p2 - want for an upcoming milestone p - high Issue should be addressed in the current milestone, impacts component or core functionality
Milestone
2024-05-14 - May ...

Comments

@macandcheese
Copy link
Contributor

macandcheese commented May 1, 2024 •
edited

Check existing issues

Actual Behavior

The animation as Carousel Items cycle is not consistently displayed. Only when "jumping forward / backwards" are the correct animations being set via css class.

Screen.Recording.2024-04-30.at.7.58.33.PM.mov

Expected Behavior

The slides should animate in from the correct direction on each Carousel Item change.

Reproduction Sample

https://codepen.io/mac_and_cheese/pen/rNbgGQE?editors=1000

Reproduction Steps

  1. Open demo
  2. Interact with component
  3. Observe inconsistent animation behavior

Reproduction Version

2.8.0

Relevant Info

I think we need to clear the css class or animation at all times, and handle a case where the internal "direction state" isn't being set correctly, in nextItem(), previousItem(), setSelectedItem() internal functions.

Regression?

No response

Priority impact

p2 - want for current milestone

Impact

Should be added to an upcoming patch release if possible.

Calcite package

  • @esri/calcite-components
  • @esri/calcite-components-angular
  • @esri/calcite-components-react
  • @esri/calcite-design-tokens
  • @esri/eslint-plugin-calcite-components

Esri team

Calcite (design)
@macandcheese macandcheese added bug Bug reports for broken functionality. Issues should include a reproduction of the bug. 0 - new New issues that need assignment. needs triage Planning workflow - pending design/dev review. labels May 1, 2024
@github-actions github-actions bot added calcite-components Issues specific to the @esri/calcite-components package. impact - p2 - want for an upcoming milestone User set priority impact status of p2 - want for an upcoming milestone Calcite (design) Issues logged by Calcite designers. labels May 1, 2024
@macandcheese macandcheese added the c-carousel Issues that pertain to the calcite-carousel component label May 1, 2024
@geospatialem geospatialem added p - high Issue should be addressed in the current milestone, impacts component or core functionality estimate - 3 A day or two of work, likely requires updates to tests. and removed needs triage Planning workflow - pending design/dev review. labels May 6, 2024
@jcfranco jcfranco self-assigned this May 10, 2024
@jcfranco jcfranco added 1 - assigned Issues that are assigned to a sprint and a team member. and removed 0 - new New issues that need assignment. labels May 10, 2024
@jcfranco jcfranco mentioned this issue May 14, 2024
Merged
@jcfranco jcfranco added 2 - in development Issues that are actively being worked on. and removed 1 - assigned Issues that are assigned to a sprint and a team member. labels May 14, 2024
jcfranco added a commit that referenced this issue May 14, 2024
@jcfranco
fix(carousel): animate items with the same direction (#9325)
6bf7b74 
**Related Issue:** #9232

## Summary

Updates carousel to wait for item animations before each slide.

**Note**: I'll submit a follow-up PR to refactor
[`openCloseComponent.onToggleOpenCloseComponent`](https://github.com/Esri/calcite-design-system/blob/main/packages/calcite-components/src/utils/openCloseComponent.ts#L91)
to use the same DOM util as carousel.
@jcfranco jcfranco added 3 - installed Issues that have been merged to master branch and are ready for final confirmation. and removed 2 - in development Issues that are actively being worked on. labels May 14, 2024
@github-actions github-actions bot assigned geospatialem and DitwanP and unassigned jcfranco May 14, 2024
@github-actions GitHub Actions
Copy link
Contributor

Installed and assigned for verification.

@geospatialem geospatialem added 4 - verified Issues that have been released and confirmed resolved. and removed 3 - installed Issues that have been merged to master branch and are ready for final confirmation. labels May 14, 2024
@geospatialem
Copy link
Member

Verified in 2.8.1-hotfix.0:

verify-animations-carousel

benelan pushed a commit that referenced this issue May 14, 2024
@jcfranco @benelan
fix(carousel): animate items with the same direction (#9325)
aab0336 
**Related Issue:** #9232

## Summary

Updates carousel to wait for item animations before each slide.

**Note**: I'll submit a follow-up PR to refactor
[`openCloseComponent.onToggleOpenCloseComponent`](https://github.com/Esri/calcite-design-system/blob/main/packages/calcite-components/src/utils/openCloseComponent.ts#L91)
to use the same DOM util as carousel.
@benelan benelan mentioned this issue May 14, 2024
Merged
benelan added a commit that referenced this issue May 14, 2024
@benelan @jcfranco
fix(carousel): animate items with the same direction (#9335)
af43d15 
**Related Issue:** #9232

## Summary

Updates carousel to wait for item animations before each slide.

**Note**: I'll submit a follow-up PR to refactor
[`openCloseComponent.onToggleOpenCloseComponent`](https://github.com/Esri/calcite-design-system/blob/main/packages/calcite-components/src/utils/openCloseComponent.ts#L91)
to use the same DOM util as carousel.

Co-authored-by: JC Franco <jfranco@esri.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@geospatialem geospatialem

@DitwanP DitwanP

Labels
4 - verified Issues that have been released and confirmed resolved. bug Bug reports for broken functionality. Issues should include a reproduction of the bug. c-carousel Issues that pertain to the calcite-carousel component Calcite (design) Issues logged by Calcite designers. calcite-components Issues specific to the @esri/calcite-components package. estimate - 3 A day or two of work, likely requires updates to tests. impact - p2 - want for an upcoming milestone User set priority impact status of p2 - want for an upcoming milestone p - high Issue should be addressed in the current milestone, impacts component or core functionality
Projects
None yet
Milestone
2024-05-14 - May maintenance release
Development

No branches or pull requests
4 participants
@jcfranco @macandcheese @geospatialem @DitwanP