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.

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

Page attachment call to action animation and design review. #20612

Conversation

gmajoulet
Copy link
Contributor

@gmajoulet gmajoulet commented Jan 31, 2019

Page attachment call to action animation and design review.

  • New animations: the arrow starts as a flat line and turns into an arrow (super subtle tho), and then "explodes" into a button. The text is no longer a button.
  • Refining the text shadows, the background gradient, for better accessibility. It reads OK even on a full white background
  • The arrow is now clickable/tappable

Demo on page two available until this PR is merged: here

#20209

@Enriqe
Copy link
Contributor

Enriqe commented Jan 31, 2019

Looks pretty cool!

Do we want to restart the animation every time we visit the page containing the attachment? Playing with the demo I skipped the page, then came back and the animation was already over. Just thinking out loud, but otherwise it lgtm!

Copy link
Contributor

@newmuis newmuis left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@Enriqe I think it's less visually distracting if we don't replay the animation on every page, but @hongwei1990 would be the best person to decide here.

position: absolute !important;
top: 0 !important;
left: 0 !important;
height: 100% !important;
width: 100% !important;
background: #fff !important;
border-radius: 32px !important;
background: #FFF;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

!important?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yep :))

@gmajoulet gmajoulet force-pushed the attachment_component_call_to_action_design_review branch from db1be1c to ccb6b73 Compare January 31, 2019 17:06
@gmajoulet
Copy link
Contributor Author

Good point, thanks! Hong said we should play the animation every time the page becomes active, I just made the change. PTAL

@gmajoulet gmajoulet merged commit c778e85 into ampproject:master Jan 31, 2019
nbeloglazov pushed a commit to nbeloglazov/amphtml that referenced this pull request Feb 12, 2019
…ct#20612)

* Page attachment call to action animation and design review.

* Restarting the animation every time the page becomes active.
noranazmy pushed a commit to noranazmy/amphtml that referenced this pull request Mar 22, 2019
…ct#20612)

* Page attachment call to action animation and design review.

* Restarting the animation every time the page becomes active.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

5 participants