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

Can't get animations working #180

Closed
bottlehall opened this issue Jul 11, 2023 · 2 comments
Closed

Can't get animations working #180

bottlehall opened this issue Jul 11, 2023 · 2 comments
Assignees
@Spiderpig86

Comments

@bottlehall
Copy link

I don't think this issue is related to #172 because the example animations work fine on my Mac in both Chrome and Safari.

The problem comes when I try to use animations in my own page. I want to use the ping animation. Copying and pasting the example code doesn't show anything to do with the animation. I can't see any difference between the demonstration and example (except that the notification images' order is swapped and that doesn't make a difference). I have tried recreating the hierarchy of navigation divs, sections, etc., but this does not make any difference.

<span class="notification u-inline-flex u-absolute u-top-0 u-right-0">
    <span class="h-100p w-100p u-absolute u-inline-flex animated ping bg-blue-400 u-round-full"></span>
    <span class="h-100p w-100p u-inline-flex bg-blue-400 u-round-full"></span>
</span>

If I remove the outer span, then I get large versions of the images at the bottom, with one animating. It seems to be something to do with the size/placement. In the demonstration, the notification element is 12px x 12px but there isn't anything visible in my version and inspect element suggests the circles are 0px x 0px.

This doesn't work:

<!DOCTYPE html>
<html id="page">
<head>
  <title>Animation</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"/>
  <meta charset="UTF-8"/>
  <meta http-equiv="X-UA-Compatible" content="IE=edge;"/>
  <link href="/Cirrus/dist/cirrus.min.css" type="text/css" rel="stylesheet"/>
  <link href="https://fonts.googleapis.com/css?family=Nunito+Sans:200,300,400,600,700" rel="stylesheet"/>
  <link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet"/>
</head>
<body class="">
<div class="default-layout tree-nav-body mx-auto mb-0">
    <div class="tree-nav-header u-items-center">
        <div class="tree-nav-container h-auto" style="flex-grow: 1;">
            <main class="page-layout">
                <div class="content">
                    <section class="padtop">
                        <section class="pt-4" id="ping">
                            <h6><a class="tooltip tooltip--left mr-1" data-tooltip="Copy" style="cursor: pointer;">#</a>Ping</h6>
                            <p>Add the <code>pulse</code> animation to simulate pulsing in an out by oscillating the element's opacity. This is a great animation for skeleton loaders as seen below.</p>
                            <div class="u-relative u-inline-flex">
                                <div class="u-round-xs u-shadow-lg p-3 bg-blue-100">
                                    <div class="u-flex u-items-center u-gap-2">
                                        <div>
                                            <div class="avatar"><img src="https://www.gravatar.com/avatar/205e460b479e2e5b48aec07710c08d50?s=128">
                                            </div>
                                        </div>
                                        <div><b>3 new unopened messages in the last hour.</b>
                                            <div class="text-gray-600">@johndoe sent "About your PR, it's mostly good but..."</div>
                                        </div>
                                    </div>
                                </div>
                                <span class="notification u-inline-flex u-absolute u-top-0 u-right-0">
                                    <span class="h-100p w-100p u-absolute u-inline-flex animated pulse bg-blue-400 u-round-full"></span>
                                    <span class="h-100p w-100p u-inline-flex bg-blue-400 u-round-full"></span>
                                </span>
                            </div>
                            <div class="space"></div>
                        </section>
                    </section>
                </div>
            </main>
        </div>
    </div>
</div>
</body>
</html>

Any suggestions as to what I am doing wrong?
@Spiderpig86
Copy link
Owner

Spiderpig86 commented Aug 7, 2023 •
edited

Hi,

In the example, the .notification class was used to show to blue dot in the example. It isn't meant to be a style we ship by default. You can replicate the style by copying the following class from the docs:

.notification {
    margin-top: -.25rem;
    margin-right: -.25rem;
    height: .75rem;
    width: .75rem;
}

Or you can have the inline version like this:

<div class="u-center h-100p">
  <div class="u-relative u-inline-flex">
  <div class="u-round-xs u-shadow-lg p-3 bg-blue-100">
    <div class="u-flex u-items-center u-gap-2">
      <div>
        <div class="avatar"><img src="https://www.gravatar.com/avatar/205e460b479e2e5b48aec07710c08d50?s=128"></div>
      </div>
      <div><b>3 new unopened messages in the last hour.</b>
        <div class="text-gray-600">@johndoe sent "About your PR, it's mostly good but..."</div>
      </div>
    </div>
  </div>
  <span class="w-2 h-2 u-inline-flex u-absolute" style="top: -.25rem; right: -.25rem"><span class="w-100p h-100p u-absolute u-inline-flex animated ping bg-blue-400 u-round-full"></span><span class="h-100p w-100p u-inline-flex bg-blue-400 u-round-full"></span></span>
</div>
</div>

I will update the documentation to make it clearer that the notification class is not something that we include, just the pulsing animation styles.

@Spiderpig86 Spiderpig86 self-assigned this Aug 7, 2023
Spiderpig86 added a commit that referenced this issue Dec 18, 2023
@Spiderpig86
🔧 chore(animated-styles): Add notice about notification dot styling n…
fa579fc 
…ot being part of the framework #180
@Spiderpig86
Copy link
Owner

Resolving

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@Spiderpig86 Spiderpig86

Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@Spiderpig86 @bottlehall