Fluentui: Option to disable the TeachingBubble's animations

[JoshuaKGoldberg]

Describe the feature that you would like added

I find the bouncing jello entry animation of the TeachingBubble to be very jarring. Can we please have a prop to remove it?

What component or utility would this be added to

TeachingBubble

Have you discussed this feature with our team, and if so, who

No

[dzearing]

@Jahnp @betrue-final-final Please?

[Jahnp]

I don't know why we couldn't add this as an option. We could also consider reversing the behavior so the animation is opt-in vs opt-out, e.g. useEntranceAnimation or something.

For what it's worth, afaik the intent of the animation on the Teaching Bubble is to ensure a user sees a new feature by drawing more attention to it than a standard Callout.

[natalieethell]

Would a Teaching Bubble without the animations have the same functionality as a standard Callout?

[KevinTCoughlin]

Interesting.. +1 to supporting the disable, but I also wonder if separately we should entertain disabling ALL animations if the implementer chooses. Made me think of how Angular & Angular Animate work.

Re: the above -- Can it be disabled by simply overriding the getStyles call today?

[micahgodbolt]

There's also the idea of using the prefers-reduced-motion media query (though support is spotty, no chrome or edge)

https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion

But I agree that the jiggling might not be appropriate for all situations and all users.

[micahgodbolt]

@natalieethell teaching bubble is a callout with pretty specific content/styling. Sure, you could recreate a teaching bubble without the animation, but it'd be quite a lot of work and would fall out of sync quickly.

[micahgodbolt]

@Jahnp what are your feelings on having animation be opt in? I always thought it was a bit much. We could have some "emphasized" prop or something. Who'd be the one to have the final say on that change?

[Jahnp]

@micahgodbolt as I mentioned, I like the idea of the animation being opt-in, but I'm not the decision maker. If we did that we'd need to be cognizant of existing users who expect the animation to drive feature adoption--this would "break" them.

@betrue-final-final , do you have any thoughts on this? Basically making the Teaching Bubble's entrance animation to be opt-in or opt-out?

[nero120]

It didn't use to have this animation, it used to fade in and was absolutely fine for users who click on a help button to see help text. Since it was added we've had negative comments from more than one user regarding the new animation style.

Out of interest, why was it added in the first place?

[Jahnp]

Hey @nero120 , thanks for sharing an example of how you're using TeachingBubble. That's helpful for understanding where the feedback may be coming from.

I've engaged with designers about potentially revisiting the animation here. It is a strong animation, but it was intentional, as its main use case is for highlighting new features to users that may otherwise be difficult to spot. It's not meant as an interchangeable variant of a Callout, but should instead be used like the Coachmark control (which actually turns into a TeachingBubble when a user interacts with it)

It's not meant as a component for displaying help text. I imagine something like Tooltip or a plain Callout would be a better fit for that case.

However, in taking a look at the docs page for the TeachingBubble, there's really nothing there to tell you how to use it correctly. It just says:

[it] allow[s] the user to display important hints on their web pages with a callout box.

That's not useful. We can take point on updating the docs for TeachingBubble to be more instructive and distinguish it from a simple Callout.

In the meantime, was there a particular reason you wanted to use TeachingBubble over another component for your use case? Is it for the different visuals or something else?

[nero120]

Thanks for that info @Jahnp. Well to be honest we used the TeachingBubble since we thought the look more appropriate for help dialogs compared to the regular callout, and probably also due to it's name (teaching)!

[betrue-final-final]

This is all great feedback.

[Jahnp]

@nero120 ha, that's a perfectly fair reason to use something called "teaching bubble" :) We'll make sure to clear up the docs and look into making the animation optional.

[nero120]

Thanks guys, we really appreciate all the effort! 👏

[Jahnp]

Sure thing. I've opened #7243 to track the documentation updates; I'll try to get to that tomorrow.

We can keep this issue open to track adding a prop to optionally toggle the animation.

[KevinTCoughlin]

Re: a prop to toggle the animation... It shouldn't be too difficult. It would mostly involve adding a new prop and passing it into the styles function to conditionally apply these LoC:

https://github.com/OfficeDev/office-ui-fabric-react/blob/master/packages/office-ui-fabric-react/src/components/TeachingBubble/TeachingBubble.styles.ts#L93...L96

[Jahnp]

Ok, quick update. I've expanded the usage docs in #7266 for TeachingBubble to clarify how it should be used; the changes should go live tomorrow or early next week.

After getting feedback from designers who also felt the existing animation isn't great, it sounds like we'll be able to spin some design cycles to revisit it in January. I'd prefer we improve the existing animation rather than bloat the API surface with an extra prop, as it's considered an important part of the intended use case. I'll follow up here if anything changes.

[KevinTCoughlin]

Thanks for keeping us posted @Jahnp!

[bigbadcapers]

@Jahnp i shared a shortlink in the other thread about what the animation should actually look like here. Fwiw, the animation that is implemented as the transition from coachmark-to-teachingbubble seems a lot closer to spec. I recommend we snap to that animation first, because I fully agree with your last comment here. Thank you!

[nero120]

I'd prefer we improve the existing animation rather than bloat the API surface with an extra prop, as it's considered an important part of the intended use case.

Not sure I follow the logic here. You're saying that rather than allowing devs to choose how they want to use this component at the cost of one extra prop, you'd rather force users to have to consume a "strong" animation every time they open the bubble because you're worried they won't notice it?

Happy for you to address the default animation, but please add the prop so we can disable it if we want to - we can definitely handle an extra prop that adds real value to the component!

[bigbadcapers]

Hi there, I'm a designer working with Fabric and can shed some more light here. The animation on the bubble currently is not up to spec, and should be fixed. The animation is an intrinsic part of the bubble, just like it is for tooltip and for hovercard, which have animations crafted with a specific purpose in mind to present the control property and it would be a disservice to the experience to expose too granular controls on the appearance since that opens up the possibility of permutations that are actually working against the control's goals. Let's continue working together and please share feedback on the way the bubble presents itself, so that it's effective at it's job of popping in for Teaching Scenarios with the right level of visual prominence for such a purpose.

[nero120]

Ok @bigbadcapers, let's see what you've got...

[martellaj]

@Jahnp @betrue-final-final Any update on this issue? We're looking to use it in OWA, and think that the animation is a bit heavy...

[bigbadcapers]

@Jahnp i took a look at this again, the bouncy animation seen in the teaching bubble is not the final final one that we wanted to ship here. The last direction we wanted to go into was that the animation should be way more understated and match the motion that is seen when a coachmark transforms into a bubble.

My recommendation is not to ship a teaching bubble without an animation, that will look low quality, but rather to address the root issue in Joe's feedback which is that the current animation in the standalone bubble is a bit much :) -- let's replace it with the same impl as the coachmark-to-bubble transition and see if we can find the ideal common ground.

[micahgodbolt]

@martellaj On the short term, all of the animation is controlled via css, and accessible via the styles prop. It's a little complicated because the style is applied twice, but here is a demo of how you can set the animation to something else.

https://codepen.io/micahgodbolt/pen/GLwrmV?editors=1010

[martellaj]

@micahgodbolt Perfect. Thank you!

[Jahnp]

If the stock Callout animation is desired, I think we can probably just remove the existing animation altogether--it will just fall back to the old one. Here's a gif of what that'd look like:

If this looks right @bigbadcapers , I can just go ahead and put this in PR.

[bigbadcapers]

The one I’m referencing is specifically the one you see after a coachmark has called your attention and your mouse wanders near it.

I couldn’t find said control in the Fabric site to share a demo with you (how are you making these spiffy inline gifs anyway!), but if you find a coachmark, notice the transition of how it “morphs” into a bubble. It is more thoughtful than the gif below, but way more classy and understated than the standalone super-bouncy one that folks are having a (reasonably) negative reaction to.

--Carlos

From: Peter Jahn [e-mail]
Sent: Thursday, April 25, 2019 7:56 PM
To: OfficeDev/office-ui-fabric-react [e-mail]
Cc: Carlos Perez (O365) [e-mail]; Mention [e-mail]
Subject: Re: [OfficeDev/office-ui-fabric-react] Option to disable the TeachingBubble's animations (#5874)

If the stock Callout animation is desired, I think we can probably just remove the existing animation altogether--it will just fall back to the old one. Here's a gif of what that'd look like:
[image]https://nam06.safelinks.protection.outlook.com/?url=https%3A%2F%2Fcamo.githubusercontent.com%2F8fd6b206ab99888b47b748968523252d0d1e623f%2F68747470733a2f2f692e696d6775722e636f6d2f7a726944794e7a2e676966&data=01%7C01%7Ccaperez%40microsoft.com%7Cc82ab18ba0354f91df1908d6c9f2bcda%7C72f988bf86f141af91ab2d7cd011db47%7C1&sdata=UXykx94hYduGnzqFhQGZG0b%2FJIZbulsmiISrpoEFoAM%3D&reserved=0

If this looks right @bigbadcapershttps://nam06.safelinks.protection.outlook.com/?url=https%3A%2F%2Fgithub.com%2Fbigbadcapers&data=01%7C01%7Ccaperez%40microsoft.com%7Cc82ab18ba0354f91df1908d6c9f2bcda%7C72f988bf86f141af91ab2d7cd011db47%7C1&sdata=0XNDqWZEZvHTSDxJHiGc%2F5UexFnJAmybJj12SwN4e%2Bg%3D&reserved=0 , I can just go ahead and put this in PR.

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHubhttps://nam06.safelinks.protection.outlook.com/?url=https%3A%2F%2Fgithub.com%2FOfficeDev%2Foffice-ui-fabric-react%2Fissues%2F5874%23issuecomment-486907611&data=01%7C01%7Ccaperez%40microsoft.com%7Cc82ab18ba0354f91df1908d6c9f2bcda%7C72f988bf86f141af91ab2d7cd011db47%7C1&sdata=m91cldCtBHX3HSTUvWzOq2xUg5yDYznYYolESJVb%2Fvw%3D&reserved=0, or mute the threadhttps://nam06.safelinks.protection.outlook.com/?url=https%3A%2F%2Fgithub.com%2Fnotifications%2Funsubscribe-auth%2FAE5CDG36BDIIAI4QOFCUDW3PSJVMTANCNFSM4FOYJZDQ&data=01%7C01%7Ccaperez%40microsoft.com%7Cc82ab18ba0354f91df1908d6c9f2bcda%7C72f988bf86f141af91ab2d7cd011db47%7C1&sdata=AUxCtRQ%2BeMzL9K4L9R5lvWGr59aJ5AoWsqnp0IPq0AA%3D&reserved=0.

[kenotron]

We should be supporting this in the theming discussion I think.

[FlowIT-JIT]

Being able to disable animation is fairly important as _animation_ works just like _transform_ - it creates a new _containing block_ which affects positioning. This makes it impossible to position something relative to the viewport with position:fixed (see #11877). And there are good usecases for this as position:fixed allows us to "escape" overflow:hidden|scroll which may be desirable for a DropDown control that must be able to escape the boundaries of a scrollable area.

[xugao]

related to #8411 as well

[xugao]

@FlowIT-JIT - you can turn off the animation to fix your issue by passing styles prop to Callout. here is a demo: https://codepen.io/xugao/pen/gOpOzBK
Let me know if this solves :)

[msft-github-bot]

This issue has been automatically marked as stale because it has marked as requiring author feedback but has not had any activity for 4 days. It will be closed if no further activity occurs within 3 days of this comment. Thank you for your contributions to Fabric React!