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

Include animation in the Masthead L1 overflow feature #4164

Closed
RobertaJHahn opened this issue Oct 7, 2020 · 2 comments
Closed

Include animation in the Masthead L1 overflow feature #4164

RobertaJHahn opened this issue Oct 7, 2020 · 2 comments
Assignees
@ariellalgilmore
Labels
design Applied to all issues assigned to the design team members. Filter used in planning meetings dev Needs some dev work Feature request A new adopter requested feature package: react Work necessary for the Carbon for IBM.com react components package sprint demo Sprint Must Have
Milestone
Sprint 20-21

Comments

@RobertaJHahn
Copy link

RobertaJHahn commented Oct 7, 2020 •
edited
Loading

The problem

The existing behavior is jarring for the users when the overflow feature is introduced.

Additional information

  • Included the sprint must have label as this overflow feature is committed for the Nov release
  • IDL Motion UI reference
@RobertaJHahn RobertaJHahn added design Applied to all issues assigned to the design team members. Filter used in planning meetings dev Needs some dev work Feature request A new adopter requested feature package: react Work necessary for the Carbon for IBM.com react components package Sprint Must Have labels Oct 7, 2020
@RobertaJHahn RobertaJHahn added this to the Sprint 20-20 milestone Oct 7, 2020
@oliviaflory
Copy link
Contributor

@ariellalgilmore

Referencing the IDL motion guidelines let's try:

Standard easing: cubic-bezier(0.2, 0, 0.38, 0.9)
Duration token (productive): \$transition—base (100ms)

If it looks too fast we can try the expressive duration of \$transition—expansion (150ms)

Please let me know if you have questions, once we land on which duration we want to use I will add it to the design spec file for the masthead.

@asudoh
Copy link
Contributor

asudoh commented Oct 7, 2020

Just FYI, according to below files, above spec seems to translate to transition: (propertyname) $transition--base motion(standard, productive):

https://github.com/carbon-design-system/carbon/blob/v10.21.0/packages/components/src/globals/scss/_motion.scss#L115-L117
https://unpkg.com/browse/[email protected]/scss/globals/scss/vendor/@carbon/elements/scss/motion/motion.scss

@ariellalgilmore ariellalgilmore mentioned this issue Oct 20, 2020
Closed
@ariellalgilmore ariellalgilmore mentioned this issue Oct 26, 2020
Merged
kodiakhq bot pushed a commit that referenced this issue Oct 26, 2020
@ariellalgilmore
feat(overflow): add animation and update snapshots (#4305)
4019ee0 
### Related Ticket(s)

#4164 

### Description

create scrolling animation for overflow
![ezgif com-gif-maker](https://user-images.githubusercontent.com/20210594/97192043-c2f5f700-1764-11eb-8dfd-c77e290418d7.gif)

### Changelog

**New**

- additional styles
- use intersectionObserver to check for turning on and off left and right carets 

<!-- React and Web Component deploy previews are enabled by default. -->
<!-- To enable additional available deploy previews, apply the following -->
<!-- labels for the corresponding package: -->
<!-- *** "package: services": Services -->
<!-- *** "package: utilities": Utilities -->
<!-- *** "package: styles": Carbon Expressive -->
<!-- *** "RTL": React / Web Components (RTL) -->
<!-- *** "feature flag": React / Web Components (experimental) -->
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@ariellalgilmore ariellalgilmore

Labels
design Applied to all issues assigned to the design team members. Filter used in planning meetings dev Needs some dev work Feature request A new adopter requested feature package: react Work necessary for the Carbon for IBM.com react components package sprint demo Sprint Must Have
Projects
None yet
Milestone
Sprint 20-21
Development

No branches or pull requests
4 participants
@asudoh @ariellalgilmore @oliviaflory @RobertaJHahn