Skip to content

Commit

Permalink
Page attachment call to action animation and design review. (ampproje…
Browse files Browse the repository at this point in the history 
…ct#20612)

* Page attachment call to action animation and design review.

* Restarting the animation every time the page becomes active.
  • Loading branch information
@gmajoulet
gmajoulet authored and Noran Azmy committed Mar 22, 2019
1 parent a643222 commit 83d5ace
Show file tree
Hide file tree
Showing 2 changed files with 88 additions and 36 deletions.
15 changes: 9 additions & 6 deletions extensions/amp-story/1.0/amp-story-page.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -119,10 +119,13 @@ const buildPlayMessageElement = element =>
const buildOpenAttachmentElement = element =>
htmlFor(element)`
<div class="
i-amphtml-story-page-open-attachment i-amphtml-story-system-reset">
<span class="i-amphtml-story-page-open-attachment-icon"></span>
<span class="i-amphtml-story-page-open-attachment-text"
role="button"></span>
i-amphtml-story-page-open-attachment i-amphtml-story-system-reset"
role="button">
<span class="i-amphtml-story-page-open-attachment-icon">
<span class="i-amphtml-story-page-open-attachment-bar-left"></span>
<span class="i-amphtml-story-page-open-attachment-bar-right"></span>
</span>
<span class="i-amphtml-story-page-open-attachment-text"></span>
</div>`;

/**
Expand Down Expand Up @@ -967,12 +970,12 @@ export class AmpStoryPage extends AMP.BaseElement {

if (!this.openAttachmentEl_) {
this.openAttachmentEl_ = buildOpenAttachmentElement(this.element);
this.openAttachmentEl_
.addEventListener('click', () => this.openAttachment());

const textEl = this.openAttachmentEl_
.querySelector('.i-amphtml-story-page-open-attachment-text');

textEl.addEventListener('click', () => this.openAttachment());

const openAttachmentLabel = Services.localizationService(this.win)
.getLocalizedString(
LocalizedStringId.AMP_STORY_PAGE_ATTACHMENT_OPEN_LABEL);
Expand Down
109 changes: 79 additions & 30 deletions extensions/amp-story/1.0/amp-story.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -799,14 +799,14 @@ amp-story .amp-video-eq,

@keyframes open-attachment-icon {
0% {
transform: translateY(5px);
transform: translateY(14px);
}
to {
transform: translateY(-2px);
transform: translateY(0);
}
}

@keyframes open-attachment-button-explode {
@keyframes open-attachment-icon-explode {
0% {
transform: scale(0);
}
Expand All @@ -816,64 +816,113 @@ amp-story .amp-video-eq,
}
}

@keyframes open-attachment-text-color {
@keyframes open-attachment-icon-color {
0% {
color: #fff;
text-shadow: 0px 0px 6px rgba(0, 0, 0, 0.36);
background: #fff;
}
to {
color: rgba(0, 0, 0, 0.87);
background: rgba(0, 0, 0, 0.87);
text-shadow: none;
}
}

@keyframes open-attachment-bar-left {
0% {
transform: rotate(0deg);
}
to {
transform: rotate(-30deg);
}
}

@keyframes open-attachment-bar-right {
0% {
transform: rotate(0deg);
}
to {
transform: rotate(30deg);
}
}

/**
* Hiding the element and only showing it on the active page so the animation
* triggers every time the page becomes active.
*/
amp-story-page .i-amphtml-story-page-open-attachment {
display: none !important;
}

amp-story-page[active] .i-amphtml-story-page-open-attachment {
display: flex !important;
align-items: center !important;
justify-content: center !important;
flex-direction: column !important;
position: absolute !important;
bottom: 12px !important;
bottom: 0 !important;
left: 0 !important;
width: 100% !important;
background: linear-gradient(0, rgba(0, 0, 0, 0.15), transparent) !important;
pointer-events: none !important;
z-index: 3 !important;
animation: open-attachment-fly-in 0.3s cubic-bezier(0.4, 0.0, 0.2, 1) both !important;
}

amp-story-page .i-amphtml-story-page-open-attachment-icon {
display: block !important;
height: 20px !important;
width: 24px !important;
background-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" viewBox="0 0 24 24" fill="#FFFFFF"><path d="M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z"/><path d="M0 0h24v24H0z" fill="none"/></svg>') !important;
background-repeat: no-repeat !important;
background-position: center center !important;
amp-story-page .i-amphtml-story-page-open-attachment > * {
cursor: pointer !important;
filter: drop-shadow(0px 0px 6px rgba(0, 0, 0, 0.36)) !important;
animation: open-attachment-icon 0.3s cubic-bezier(0.4, 0.0, 0.2, 1) 1.5s both !important;
pointer-events: auto !important;
}

amp-story-page .i-amphtml-story-page-open-attachment-text {
position: relative !important;
padding: 0 24px !important;
amp-story-page .i-amphtml-story-page-open-attachment-icon {
display: block !important;
height: 32px !important;
width: 32px !important;
cursor: pointer !important;
font-family: 'Roboto', sans-serif !important;
font-size: 15px !important;
line-height: 32px !important;
pointer-events: auto !important;
animation: open-attachment-text-color 0.3s cubic-bezier(0.4, 0.0, 0.2, 1) 1.5s both !important;
animation: open-attachment-icon 0.2s cubic-bezier(0.4, 0.0, 0.2, 1) 2s both !important;
}

amp-story-page .i-amphtml-story-page-open-attachment-text::after {
content: "";
amp-story-page .i-amphtml-story-page-open-attachment-icon::after {
content: "" !important;
position: absolute !important;
top: 0 !important;
left: 0 !important;
height: 100% !important;
width: 100% !important;
background: #fff !important;
border-radius: 32px !important;
background: #FFF !important;
border-radius: 100% !important;
z-index: -1 !important;
animation: open-attachment-button-explode 0.3s cubic-bezier(0.4, 0.0, 0.2, 1) 1.5s both !important;
animation: open-attachment-icon-explode 0.25s cubic-bezier(0.4, 0.0, 0.2, 1) 2s both !important;
}

.i-amphtml-story-page-open-attachment-bar-left,
.i-amphtml-story-page-open-attachment-bar-right {
position: absolute !important;
display: block !important;
height: 3px !important;
width: 12px !important;
border-radius: 3px !important;
top: 14px !important;
}

.i-amphtml-story-page-open-attachment-bar-left {
left: 6px !important;
animation: open-attachment-icon-color 0.25s cubic-bezier(0.4, 0.0, 0.2, 1) 2s both,
open-attachment-bar-left 0.3s cubic-bezier(0.4, 0.0, 0.2, 1) both !important;
}

.i-amphtml-story-page-open-attachment-bar-right {
right: 6px !important;
animation: open-attachment-icon-color 0.25s cubic-bezier(0.4, 0.0, 0.2, 1) 2s both,
open-attachment-bar-right 0.3s cubic-bezier(0.4, 0.0, 0.2, 1) both !important;
}

amp-story-page .i-amphtml-story-page-open-attachment-text {
position: relative !important;
padding: 0 24px !important;
color: #FFF !important;
font-family: 'Roboto', sans-serif !important;
font-size: 15px !important;
font-weight: bold !important;
letter-spacing: 0.3px;
line-height: 40px !important;
text-shadow: 0px 0px 6px rgba(0, 0, 0, 0.36) !important;
}

0 comments on commit 83d5ace

Please sign in to comment.