Skip to content

🖍 [Story interactive] Post-Selection Animations for Image Quizzes and Image Polls#35205

Merged
processprocess merged 5 commits into
ampproject:mainfrom
Brandons42:img-quiz-poll-post-selection-animations
Jul 14, 2021
Merged

🖍 [Story interactive] Post-Selection Animations for Image Quizzes and Image Polls#35205
processprocess merged 5 commits into
ampproject:mainfrom
Brandons42:img-quiz-poll-post-selection-animations

Conversation

@Brandons42
Copy link
Copy Markdown
Contributor

Establishes animations upon selection of an option for image quizzes and polls including scaling up the fill that shows the percentage who chose that option and creating a bouncing effect for A/B/C/D bubbles for quizzes

Demos:
https://interactive-img.web.app/post-selection-animations/quiz.html
https://interactive-img.web.app/post-selection-animations/poll.html

Closes #35184

/cc @mszylkowski
/cc @processprocess

@amp-owners-bot amp-owners-bot Bot requested a review from Enriqe July 13, 2021 19:05
@amp-owners-bot
Copy link
Copy Markdown

Hey @gmajoulet, @mszylkowski! These files were changed:

extensions/amp-story-interactive/0.1/amp-story-interactive-img-quiz.css
extensions/amp-story-interactive/0.1/amp-story-interactive-img.css
extensions/amp-story-interactive/0.1/amp-story-interactive-quiz.css
extensions/amp-story-interactive/0.1/amp-story-interactive.css

@mszylkowski mszylkowski requested review from mszylkowski and processprocess and removed request for Enriqe July 13, 2021 19:15
Comment on lines +74 to +75
transform: scaleY(0%) !important;
transform-origin: bottom !important;
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

💪

}

.i-amphtml-story-interactive-img-option-img::before {
background-color: var(--i-amphtml-interactive-option-post-color) !important;
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

There is a flaky diff that might be due to this being set before there is data.
Moving this line to the post state might fix the flaky diff.

@processprocess processprocess merged commit e6a551b into ampproject:main Jul 14, 2021
calebcordry pushed a commit that referenced this pull request Jul 20, 2021
* 🖍 [Story interactive] Post-Selection Animations for Image Quizzes and Image Polls (#35205)

* Add fill animation

* Add bubble post-selection animation

* Move background color percentage fill to post selection styles

* Fix tests and address nits

* Fix regex

* Fix const reassignment

* Disable when invalid site id, fix lint

* Update test

* Test fix

* Fix zindex

* Fix toc

Co-authored-by: Brandon Suen <brandonbsuen@google.com>
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.

[Story interactive] Create post-selection animations for image quizzes and polls

4 participants