Skip to content

Commit

Permalink
✨ ♻️ [amp story] [Page attachments] Pre tap animations (ampproject#34142
Browse files Browse the repository at this point in the history 
)

* pre-tap animation.

* Comments. Get win from element.

* Animation variables

* Remove whitespace.

* Trigger animations when active.

* Update test. Comments.

* Comment.

* Lint

* Pseudo element.
  • Loading branch information
@processprocess @rochapablo
processprocess authored and rochapablo committed Aug 30, 2021
1 parent 007208a commit cf4970b
Show file tree
Hide file tree
Showing 5 changed files with 148 additions and 152 deletions.
151 changes: 89 additions & 62 deletions extensions/amp-story/1.0/amp-story-open-page-attachment.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -170,14 +170,16 @@
}

/** For amp-story-inline-page-attachment-v2 experiment elements. */
.i-amphtml-story-page-open-attachment {
.i-amphtml-amp-story-page-attachment-ui-v2.i-amphtml-story-page-open-attachment {
--i-amphtml-chip-background-color: rgba(255, 255, 255, 0.5) !important;
--i-amphtml-img-background-color: white !important;
--i-amphtml-label-text-color: white !important;
--i-amphtml-arrow-color: black !important;
--i-amphtml-page-attachment-ui-animation-delay: 1s !important;
--i-amphtml-page-attachment-ui-animation-duration: .6s !important;
}

[theme="dark"].i-amphtml-story-page-open-attachment {
[theme="dark"].i-amphtml-amp-story-page-attachment-ui-v2.i-amphtml-story-page-open-attachment {
--i-amphtml-chip-background-color: rgba(0, 0, 0, 0.5) !important;
--i-amphtml-img-background-color: black !important;
--i-amphtml-label-text-color: black !important;
Expand All @@ -197,43 +199,33 @@
pointer-events: none !important;
-webkit-touch-callout: default !important; /* Allow long pressing the button to open context menu in iOS */
text-decoration: none !important;
animation: none !important;
}

.i-amphtml-amp-story-page-attachment-ui-v2.i-amphtml-story-page-open-attachment:not([active]) {
/* Prevent tabbing to inactive page's buttons */
visibility: hidden !important;
}

/** For amp-story-inline-page-attachment-v2 inline default. */
.i-amphtml-amp-story-page-attachment-ui-v2 .i-amphtml-story-page-open-attachment-icon {
animation: none !important;
position: relative !important;
.i-amphtml-amp-story-page-attachment-ui-v2 .i-amphtml-story-page-attachment-label {
font-family: 'Roboto', sans-serif !important;
font-size: 16px !important;
font-weight: 700 !important;
letter-spacing: 0.3px;
line-height: 16px !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
white-space: nowrap !important;
max-width: 210px !important;
}

/** For amp-story-inline-page-attachment-v2 inline default. */
.i-amphtml-amp-story-page-attachment-ui-v2 .i-amphtml-story-page-open-attachment-label {
color: var(--i-amphtml-label-text-color) !important;
}

.i-amphtml-amp-story-page-attachment-ui-v2 .i-amphtml-story-page-open-attachment-icon::after {
animation: none !important;
background: var(--i-amphtml-label-text-color) !important;
}

.i-amphtml-amp-story-page-attachment-ui-v2 .i-amphtml-story-page-open-attachment-bar-left,
.i-amphtml-amp-story-page-attachment-ui-v2 .i-amphtml-story-page-open-attachment-bar-right {
background: var(--i-amphtml-arrow-color) !important;
}

.i-amphtml-amp-story-page-attachment-ui-v2 .i-amphtml-story-page-open-attachment-bar-left {
animation: open-attachment-bar-left 0.3s cubic-bezier(0.4, 0, 0.2, 1) both !important;
}

.i-amphtml-amp-story-page-attachment-ui-v2 .i-amphtml-story-page-open-attachment-bar-right {
animation: open-attachment-bar-right 0.3s cubic-bezier(0.4, 0, 0.2, 1) both !important;
}

/** For amp-story-inline-page-attachment-v2 inline with images. */
.i-amphtml-story-inline-page-attachment-chip {
.i-amphtml-amp-story-page-attachment-ui-v2 .i-amphtml-story-inline-page-attachment-chip {
background-color: var(--i-amphtml-chip-background-color) !important;
display: flex !important;
border-radius: 24px !important;
Expand All @@ -242,12 +234,15 @@
margin-bottom: 12px !important;
}

.i-amphtml-amp-story-page-attachment-ui-v2.i-amphtml-story-page-open-attachment[active] .i-amphtml-story-inline-page-attachment-chip {
animation: tap-scale var(--i-amphtml-page-attachment-ui-animation-duration) var(--i-amphtml-page-attachment-ui-animation-delay) both !important;
}

.i-amphtml-story-inline-page-attachment-chip:only-child {
margin-bottom: 20px !important;
}

.i-amphtml-story-inline-page-attachment-img,
.i-amphtml-story-inline-page-attachment-arrow {
.i-amphtml-story-inline-page-attachment-img {
background-size: contain !important;
background-repeat: no-repeat !important;
}
Expand All @@ -263,27 +258,39 @@
}

.i-amphtml-story-inline-page-attachment-arrow {
position: relative !important;
height: 32px !important;
width: 32px !important;
border-radius: 50% !important;
background-color: var(--i-amphtml-img-background-color) !important;
}

.i-amphtml-story-inline-page-attachment-arrow:not(:only-child) {
margin: 8px !important;
background-image: url('data:image/svg+xml;charset=utf-8,<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M16 32C24.8366 32 32 24.8366 32 16C32 7.16344 24.8366 0 16 0C7.16344 0 0 7.16344 0 16C0 24.8366 7.16344 32 16 32Z" fill="white"/> <path d="M6.74612 18.796C6.33376 18.0797 6.57889 17.1649 7.29412 16.7508L15.0632 12.2529C15.7808 11.8374 16.6995 12.0835 17.1132 12.8022C17.5256 13.5184 17.2805 14.4333 16.5652 14.8474L8.7962 19.3453C8.07854 19.7608 7.15989 19.5146 6.74612 18.796Z" fill="black"/> <path d="M14.724 12.8022C15.1377 12.0835 16.0564 11.8374 16.774 12.2528L24.5431 16.7508C25.2583 17.1648 25.5034 18.0797 25.0911 18.7959C24.6773 19.5146 23.7587 19.7607 23.041 19.3452L15.272 14.8473C14.5567 14.4332 14.3116 13.5184 14.724 12.8022Z" fill="black"/> </svg>') !important;
}

.i-amphtml-story-inline-page-attachment-arrow:before {
content: '' !important;
position: absolute !important;
top: 0 !important;
left: 0 !important;
width: 100% !important;
height: 100% !important;
background-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="18.7px" height="7.5px" viewBox="0 0 18.7 7.5"><path d="M18,4.7l-7.8-4.5C10,0,9.7,0,9.4,0C9.1,0,8.8,0,8.5,0.2L0.7,4.7C0,5.1-0.2,6,0.2,6.7c0.4,0.7,1.3,1,2.1,0.5l7.1-4.1l7.1,4.1c0.7,0.4,1.6,0.2,2.1-0.5C19,6,18.7,5.1,18,4.7z"/></svg>') !important;
background-position: center !important;
background-size: auto !important;
background-repeat: no-repeat !important;
}

[theme="dark"] .i-amphtml-story-inline-page-attachment-arrow {
background-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 32 32"><path d="M16 32a16 16 0 100-32 16 16 0 000 32z" fill="black"/><path d="M7 19v-2l8-5a1 1 0 112 3l-8 4H7z" fill="white"/><path d="M15 13l2-1 8 5a1 1 0 11-2 2l-8-4v-2z" fill="white"/></svg>') !important;
.i-amphtml-amp-story-page-attachment-ui-v2.i-amphtml-story-page-open-attachment[active] .i-amphtml-story-inline-page-attachment-arrow:before {
animation: move-up-arrow-in-circle var(--i-amphtml-page-attachment-ui-animation-duration) var(--i-amphtml-page-attachment-ui-animation-delay) both !important;
}

.i-amphtml-story-inline-page-attachment-label {
font-family: 'Roboto', sans-serif !important;
font-size: 16px !important;
font-weight: 700 !important;
letter-spacing: 0.25px !important;
line-height: 16px !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
white-space: nowrap !important;
max-width: 210px !important;
[theme="dark"] .i-amphtml-story-inline-page-attachment-arrow:before {
background-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" fill="white" width="18.7px" height="7.5px" viewBox="0 0 18.7 7.5"><path d="M18,4.7l-7.8-4.5C10,0,9.7,0,9.4,0C9.1,0,8.8,0,8.5,0.2L0.7,4.7C0,5.1-0.2,6,0.2,6.7c0.4,0.7,1.3,1,2.1,0.5l7.1-4.1l7.1,4.1c0.7,0.4,1.6,0.2,2.1-0.5C19,6,18.7,5.1,18,4.7z"/></svg>') !important;
}

.i-amphtml-amp-story-page-attachment-ui-v2:not([href]) .i-amphtml-story-page-attachment-label {
margin-bottom: 20px !important;
color: var(--i-amphtml-label-text-color) !important;
}
Expand All @@ -306,6 +313,10 @@
background: none !important;
}

[href].i-amphtml-amp-story-page-attachment-ui-v2.i-amphtml-story-page-open-attachment[active] {
animation: tap-scale var(--i-amphtml-page-attachment-ui-animation-duration) var(--i-amphtml-page-attachment-ui-animation-delay) both !important;
}

.i-amphtml-story-page-open-attachment.i-amphtml-story-page-open-attachment-opening {
animation: fade-out 0.3s both !important;
}
Expand All @@ -318,25 +329,50 @@

.i-amphtml-story-outlink-page-attachment-arrow {
display: block !important;
height: 32px !important;
width: 32px !important;
cursor: pointer !important;
position: relative !important;
margin-bottom: 10px !important;
fill: var(--i-amphtml-outlink-cta-background-color) !important;
}

.i-amphtml-story-outlink-page-open-attachment-bar-left,
.i-amphtml-story-outlink-page-open-attachment-bar-right {
background-color: var(--i-amphtml-outlink-cta-background-color) !important;
.i-amphtml-amp-story-page-attachment-ui-v2.i-amphtml-story-page-open-attachment[active] .i-amphtml-story-outlink-page-attachment-arrow {
animation: move-up-arrow var(--i-amphtml-page-attachment-ui-animation-duration) var(--i-amphtml-page-attachment-ui-animation-delay) both !important;
}

.i-amphtml-story-outlink-page-open-attachment-bar-left {
left: 6px !important;
animation: open-attachment-bar-left 0.3s cubic-bezier(0.4, 0.0, 0.2, 1) both !important;
@keyframes move-up-arrow {
0%, 100% {
opacity: 1;
transform: translateY(0);
}
45% {
opacity: 0;
transform: translateY(-7px);
}
45.01% {
transform: translateY(5px);
}
}

.i-amphtml-story-outlink-page-open-attachment-bar-right {
right: 6px !important;
animation: open-attachment-bar-right 0.3s cubic-bezier(0.4, 0.0, 0.2, 1) both !important;
@keyframes move-up-arrow-in-circle {
0%, 100% {
opacity: 1;
transform: translateY(0);
}
45% {
opacity: 0;
transform: translateY(-4px);
}
45.01% {
transform: translateY(3px);
}
}

@keyframes tap-scale {
0%, 100% {
transform: scale(1);
}
45% {
transform: scale(.9);
}
}

.i-amphtml-story-outlink-page-attachment-outlink-chip {
Expand All @@ -361,16 +397,7 @@
border-radius: 50% !important;
}

.i-amphtml-story-outlink-page-attachment-label {
font-family: 'Roboto', sans-serif !important;
font-size: 16px !important;
font-weight: bold !important;
letter-spacing: 0.3px;
line-height: 16px !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
white-space: nowrap !important;
max-width: 210px !important;
[href] .i-amphtml-story-page-attachment-label {
padding-inline-start: 6px !important;
padding-inline-end: 8px !important;
color: var(--i-amphtml-outlink-cta-text-color) !important;
Expand Down

0 comments on commit cf4970b

Please sign in to comment.