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

[Quick add] Remove animation on quick add modal elements #2657

Merged
merged 1 commit into from
May 18, 2023

Conversation

ludoboludo
Copy link
Contributor

@ludoboludo ludoboludo commented May 17, 2023

PR Summary:

Remove animation from being applied to the media and content of the quick add modal.

Why are these changes introduced?

When adding the animation to the product page, we forgot that they were pulled into the quick add modal. Though they're not needed there and add more noise.

What approach did you take?

Targeted the elements that need the animation removed and their opacity set back to 1.

Other considerations

Visual impact on existing themes

Prevents extra movement/flickers in the quick add modal.

Testing steps/scenarios

  • Enabled quick add on the feat. collection or any other part of the theme where it can be done.
  • Check and make sure no animation is applied to the media (fade-in) or the content (slide-in).

Here is what happens before the change:

18-42-t4nl9-lfhyt.5.mp4

Demo links

Checklist

@ludoboludo ludoboludo requested review from kjellr and kmeleta May 18, 2023 14:27
@kjellr
Copy link
Contributor

kjellr commented May 18, 2023

@ludoboludo Can you share a screenshot? I'm not sure what I'm looking for here.

Copy link
Contributor

@kjellr kjellr left a comment

Choose a reason for hiding this comment

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

Looks great, thanks for tackling this one!

@LucasLacerdaUX LucasLacerdaUX self-requested a review May 18, 2023 16:14
@ludoboludo ludoboludo merged commit c23528e into release/10.0.0 May 18, 2023
@ludoboludo ludoboludo deleted the remove-animation-on-quick-add branch May 18, 2023 17:57
ludoboludo added a commit that referenced this pull request Jun 6, 2023
* Fix color for image in password (#2608)

* [Image behavior] fixed background jitter fix on mobile (#2611)

* [Animation in editor] Remove transform translate when re rendering and re ordering blocks (#2614)

* Remove transform translate when re rendering and re ordering blocks

* target only what's needed

* [bug] Horizontal scrolling on mobile.  (#2617)

* Add overflow-x:hidden to prevent horizontal scrolling on mobile.

* Change margin for slider for mobile and tablet.

* Remove redundant preconnect to cdn.shopify.com (#2621)

* Update reverse scheme (#2626)

* [Footer] Remove Global Media settings inheritance from images (#2631)

* Send timezone offset as string instead of integer (#2636)

* Fix slider scrolling issue (#2635)

* Fix background gradient for Related Products. (#2641)

* Update from Shopify for theme dawn/release/10.0.0

Committed from shop: Skeleton Theme

* Quick add remove animation from image and content (#2657)

* Add default values for color scheme group (#2660)

* Revert unwanted changes (#2669)

* Update from Shopify for theme dawn/release/10.0.0

Committed from shop: Skeleton Theme

* Revert "Update from Shopify for theme dawn/release/10.0.0"

This reverts commit 89d927e.

* Remove forced white text color in Image Banner & Slideshow (#2663)

* Remove forced white color.

* Change color scheme for Dawn's default homepage Image Banner..

* Remove warning about color scheme usage.

* Fix bug with transparent buttons on mobile.

* Remove unused info key from translated files.

* Update display of button when it's in a mobile container.

* Update existing placeholder images (#2610)

* Update existing placeholder images

* Featured collection and product card

* Featured product section

* Collection list section

* Featured blog and multirow sections

* Slideshow: change order of placeholder images

* Collage adjustments for product and collection cards

* Image with text adjustments

* Featured product: re-add `.product--no-media` selectors

* Update featured product section

* Update `card-collection`

* Cleanup `card-collection`

---------

Co-authored-by: Ludo <ludo.segura@shopify.com>

* Gradient fix for transparent background medias and cards (#2651)

* Fix media, product, and collection cards placeholder (#2682)

* Fix missing else for collection cards (#2692)

---------

Co-authored-by: Sofia Matulis <sofiamatulis@users.noreply.github.com>
Co-authored-by: Eugene Kasimov <105315663+eugenekasimov@users.noreply.github.com>
Co-authored-by: Mateusz Krzeszowiak <mateusz.krzeszowiak@shopify.com>
Co-authored-by: Lucas Lacerda <37168033+LucasLacerdaUX@users.noreply.github.com>
Co-authored-by: Kjell Reigstad <kjell@kjellr.com>
Co-authored-by: shopify[bot] <79544226+shopify[bot]@users.noreply.github.com>
Co-authored-by: Ken Meleta <30790058+kmeleta@users.noreply.github.com>
Co-authored-by: Andrew Etchen <andrew.etchen@shopify.com>
lougoncharenko pushed a commit that referenced this pull request Jun 7, 2023
* Fix color for image in password (#2608)

* [Image behavior] fixed background jitter fix on mobile (#2611)

* [Animation in editor] Remove transform translate when re rendering and re ordering blocks (#2614)

* Remove transform translate when re rendering and re ordering blocks

* target only what's needed

* [bug] Horizontal scrolling on mobile.  (#2617)

* Add overflow-x:hidden to prevent horizontal scrolling on mobile.

* Change margin for slider for mobile and tablet.

* Remove redundant preconnect to cdn.shopify.com (#2621)

* Update reverse scheme (#2626)

* [Footer] Remove Global Media settings inheritance from images (#2631)

* Send timezone offset as string instead of integer (#2636)

* Fix slider scrolling issue (#2635)

* Fix background gradient for Related Products. (#2641)

* Update from Shopify for theme dawn/release/10.0.0

Committed from shop: Skeleton Theme

* Quick add remove animation from image and content (#2657)

* Add default values for color scheme group (#2660)

* Revert unwanted changes (#2669)

* Update from Shopify for theme dawn/release/10.0.0

Committed from shop: Skeleton Theme

* Revert "Update from Shopify for theme dawn/release/10.0.0"

This reverts commit 89d927e.

* Remove forced white text color in Image Banner & Slideshow (#2663)

* Remove forced white color.

* Change color scheme for Dawn's default homepage Image Banner..

* Remove warning about color scheme usage.

* Fix bug with transparent buttons on mobile.

* Remove unused info key from translated files.

* Update display of button when it's in a mobile container.

* Update existing placeholder images (#2610)

* Update existing placeholder images

* Featured collection and product card

* Featured product section

* Collection list section

* Featured blog and multirow sections

* Slideshow: change order of placeholder images

* Collage adjustments for product and collection cards

* Image with text adjustments

* Featured product: re-add `.product--no-media` selectors

* Update featured product section

* Update `card-collection`

* Cleanup `card-collection`

---------

Co-authored-by: Ludo <ludo.segura@shopify.com>

* Gradient fix for transparent background medias and cards (#2651)

* Fix media, product, and collection cards placeholder (#2682)

* Fix missing else for collection cards (#2692)

---------

Co-authored-by: Sofia Matulis <sofiamatulis@users.noreply.github.com>
Co-authored-by: Eugene Kasimov <105315663+eugenekasimov@users.noreply.github.com>
Co-authored-by: Mateusz Krzeszowiak <mateusz.krzeszowiak@shopify.com>
Co-authored-by: Lucas Lacerda <37168033+LucasLacerdaUX@users.noreply.github.com>
Co-authored-by: Kjell Reigstad <kjell@kjellr.com>
Co-authored-by: shopify[bot] <79544226+shopify[bot]@users.noreply.github.com>
Co-authored-by: Ken Meleta <30790058+kmeleta@users.noreply.github.com>
Co-authored-by: Andrew Etchen <andrew.etchen@shopify.com>
lougoncharenko added a commit that referenced this pull request Jun 21, 2023
* made the test/default blog post 3 by default

* blog default posts are not mobile responsive and on a slider. created snippet for blog-placeholder that renders into featured-blog with changable arguments

* removed commented out code

* default blog posts now are modifiable by post-limit and column number presets

* reformated code, reverted header back to h1, removed snippet, and made changes as suggested

* noticed the blog section needs a margin bottom when color scheme is applied

* removed padding from blog and removed date and author presets

* Fix link formatting in Related Products heading (#2680)

* fix default UI for dropdown and mega menu (#2644)

* added vertical padding and made l2 bold to mega menu

* added vertical padding to drop down

* fixed default UI for dropdown and mega menu

* added hover effect to all l2 links and fixed overlapping or mega menu

* adding padding to l3 links and fixed hover effect for dropdown

* reverted the mega menu back to the current setting

* changed horizontal grid gap on mega menu and vertical paddings on dropdown menu

* made vertical grid gap at 1.8 rem to match the 3 rem vertical paddings on mega-menu container

* removed the unnecessary lines of code

* removed the text-thickness that was making l2/l3 links a different size from l1 links

* added a hover effect over active link

* removed uneccessary link size and white space

* Add release/v10.0.0 branch fixes to main (#2693)

* Fix color for image in password (#2608)

* [Image behavior] fixed background jitter fix on mobile (#2611)

* [Animation in editor] Remove transform translate when re rendering and re ordering blocks (#2614)

* Remove transform translate when re rendering and re ordering blocks

* target only what's needed

* [bug] Horizontal scrolling on mobile.  (#2617)

* Add overflow-x:hidden to prevent horizontal scrolling on mobile.

* Change margin for slider for mobile and tablet.

* Remove redundant preconnect to cdn.shopify.com (#2621)

* Update reverse scheme (#2626)

* [Footer] Remove Global Media settings inheritance from images (#2631)

* Send timezone offset as string instead of integer (#2636)

* Fix slider scrolling issue (#2635)

* Fix background gradient for Related Products. (#2641)

* Update from Shopify for theme dawn/release/10.0.0

Committed from shop: Skeleton Theme

* Quick add remove animation from image and content (#2657)

* Add default values for color scheme group (#2660)

* Revert unwanted changes (#2669)

* Update from Shopify for theme dawn/release/10.0.0

Committed from shop: Skeleton Theme

* Revert "Update from Shopify for theme dawn/release/10.0.0"

This reverts commit 89d927e.

* Remove forced white text color in Image Banner & Slideshow (#2663)

* Remove forced white color.

* Change color scheme for Dawn's default homepage Image Banner..

* Remove warning about color scheme usage.

* Fix bug with transparent buttons on mobile.

* Remove unused info key from translated files.

* Update display of button when it's in a mobile container.

* Update existing placeholder images (#2610)

* Update existing placeholder images

* Featured collection and product card

* Featured product section

* Collection list section

* Featured blog and multirow sections

* Slideshow: change order of placeholder images

* Collage adjustments for product and collection cards

* Image with text adjustments

* Featured product: re-add `.product--no-media` selectors

* Update featured product section

* Update `card-collection`

* Cleanup `card-collection`

---------

Co-authored-by: Ludo <ludo.segura@shopify.com>

* Gradient fix for transparent background medias and cards (#2651)

* Fix media, product, and collection cards placeholder (#2682)

* Fix missing else for collection cards (#2692)

---------

Co-authored-by: Sofia Matulis <sofiamatulis@users.noreply.github.com>
Co-authored-by: Eugene Kasimov <105315663+eugenekasimov@users.noreply.github.com>
Co-authored-by: Mateusz Krzeszowiak <mateusz.krzeszowiak@shopify.com>
Co-authored-by: Lucas Lacerda <37168033+LucasLacerdaUX@users.noreply.github.com>
Co-authored-by: Kjell Reigstad <kjell@kjellr.com>
Co-authored-by: shopify[bot] <79544226+shopify[bot]@users.noreply.github.com>
Co-authored-by: Ken Meleta <30790058+kmeleta@users.noreply.github.com>
Co-authored-by: Andrew Etchen <andrew.etchen@shopify.com>

* made the test/default blog post 3 by default

* added updated placeholder image

* added the different placeholder images, while maintaining ability to edit with presets

* blog card theme settings work on default blog posts

* removed css that wasn't being used

* reverted to original code without theme settings

* fixed prettier error by removing extra quotation mark and made test blog default instead of news

---------

Co-authored-by: Jon Neill <jonathan.neill@shopify.com>
Co-authored-by: Ludo <ludo.segura@shopify.com>
Co-authored-by: Sofia Matulis <sofiamatulis@users.noreply.github.com>
Co-authored-by: Eugene Kasimov <105315663+eugenekasimov@users.noreply.github.com>
Co-authored-by: Mateusz Krzeszowiak <mateusz.krzeszowiak@shopify.com>
Co-authored-by: Lucas Lacerda <37168033+LucasLacerdaUX@users.noreply.github.com>
Co-authored-by: Kjell Reigstad <kjell@kjellr.com>
Co-authored-by: shopify[bot] <79544226+shopify[bot]@users.noreply.github.com>
Co-authored-by: Ken Meleta <30790058+kmeleta@users.noreply.github.com>
Co-authored-by: Andrew Etchen <andrew.etchen@shopify.com>
phapsidesGT pushed a commit to Gravytrain-UK/gt-shopify-dawn-theme that referenced this pull request Sep 3, 2024
* Fix color for image in password (Shopify#2608)

* [Image behavior] fixed background jitter fix on mobile (Shopify#2611)

* [Animation in editor] Remove transform translate when re rendering and re ordering blocks (Shopify#2614)

* Remove transform translate when re rendering and re ordering blocks

* target only what's needed

* [bug] Horizontal scrolling on mobile.  (Shopify#2617)

* Add overflow-x:hidden to prevent horizontal scrolling on mobile.

* Change margin for slider for mobile and tablet.

* Remove redundant preconnect to cdn.shopify.com (Shopify#2621)

* Update reverse scheme (Shopify#2626)

* [Footer] Remove Global Media settings inheritance from images (Shopify#2631)

* Send timezone offset as string instead of integer (Shopify#2636)

* Fix slider scrolling issue (Shopify#2635)

* Fix background gradient for Related Products. (Shopify#2641)

* Update from Shopify for theme dawn/release/10.0.0

Committed from shop: Skeleton Theme

* Quick add remove animation from image and content (Shopify#2657)

* Add default values for color scheme group (Shopify#2660)

* Revert unwanted changes (Shopify#2669)

* Update from Shopify for theme dawn/release/10.0.0

Committed from shop: Skeleton Theme

* Revert "Update from Shopify for theme dawn/release/10.0.0"

This reverts commit 89d927e.

* Remove forced white text color in Image Banner & Slideshow (Shopify#2663)

* Remove forced white color.

* Change color scheme for Dawn's default homepage Image Banner..

* Remove warning about color scheme usage.

* Fix bug with transparent buttons on mobile.

* Remove unused info key from translated files.

* Update display of button when it's in a mobile container.

* Update existing placeholder images (Shopify#2610)

* Update existing placeholder images

* Featured collection and product card

* Featured product section

* Collection list section

* Featured blog and multirow sections

* Slideshow: change order of placeholder images

* Collage adjustments for product and collection cards

* Image with text adjustments

* Featured product: re-add `.product--no-media` selectors

* Update featured product section

* Update `card-collection`

* Cleanup `card-collection`

---------

Co-authored-by: Ludo <ludo.segura@shopify.com>

* Gradient fix for transparent background medias and cards (Shopify#2651)

* Fix media, product, and collection cards placeholder (Shopify#2682)

* Fix missing else for collection cards (Shopify#2692)

---------

Co-authored-by: Sofia Matulis <sofiamatulis@users.noreply.github.com>
Co-authored-by: Eugene Kasimov <105315663+eugenekasimov@users.noreply.github.com>
Co-authored-by: Mateusz Krzeszowiak <mateusz.krzeszowiak@shopify.com>
Co-authored-by: Lucas Lacerda <37168033+LucasLacerdaUX@users.noreply.github.com>
Co-authored-by: Kjell Reigstad <kjell@kjellr.com>
Co-authored-by: shopify[bot] <79544226+shopify[bot]@users.noreply.github.com>
Co-authored-by: Ken Meleta <30790058+kmeleta@users.noreply.github.com>
Co-authored-by: Andrew Etchen <andrew.etchen@shopify.com>
phapsidesGT pushed a commit to Gravytrain-UK/gt-shopify-dawn-theme that referenced this pull request Sep 3, 2024
* made the test/default blog post 3 by default

* blog default posts are not mobile responsive and on a slider. created snippet for blog-placeholder that renders into featured-blog with changable arguments

* removed commented out code

* default blog posts now are modifiable by post-limit and column number presets

* reformated code, reverted header back to h1, removed snippet, and made changes as suggested

* noticed the blog section needs a margin bottom when color scheme is applied

* removed padding from blog and removed date and author presets

* Fix link formatting in Related Products heading (Shopify#2680)

* fix default UI for dropdown and mega menu (Shopify#2644)

* added vertical padding and made l2 bold to mega menu

* added vertical padding to drop down

* fixed default UI for dropdown and mega menu

* added hover effect to all l2 links and fixed overlapping or mega menu

* adding padding to l3 links and fixed hover effect for dropdown

* reverted the mega menu back to the current setting

* changed horizontal grid gap on mega menu and vertical paddings on dropdown menu

* made vertical grid gap at 1.8 rem to match the 3 rem vertical paddings on mega-menu container

* removed the unnecessary lines of code

* removed the text-thickness that was making l2/l3 links a different size from l1 links

* added a hover effect over active link

* removed uneccessary link size and white space

* Add release/v10.0.0 branch fixes to main (Shopify#2693)

* Fix color for image in password (Shopify#2608)

* [Image behavior] fixed background jitter fix on mobile (Shopify#2611)

* [Animation in editor] Remove transform translate when re rendering and re ordering blocks (Shopify#2614)

* Remove transform translate when re rendering and re ordering blocks

* target only what's needed

* [bug] Horizontal scrolling on mobile.  (Shopify#2617)

* Add overflow-x:hidden to prevent horizontal scrolling on mobile.

* Change margin for slider for mobile and tablet.

* Remove redundant preconnect to cdn.shopify.com (Shopify#2621)

* Update reverse scheme (Shopify#2626)

* [Footer] Remove Global Media settings inheritance from images (Shopify#2631)

* Send timezone offset as string instead of integer (Shopify#2636)

* Fix slider scrolling issue (Shopify#2635)

* Fix background gradient for Related Products. (Shopify#2641)

* Update from Shopify for theme dawn/release/10.0.0

Committed from shop: Skeleton Theme

* Quick add remove animation from image and content (Shopify#2657)

* Add default values for color scheme group (Shopify#2660)

* Revert unwanted changes (Shopify#2669)

* Update from Shopify for theme dawn/release/10.0.0

Committed from shop: Skeleton Theme

* Revert "Update from Shopify for theme dawn/release/10.0.0"

This reverts commit 89d927e.

* Remove forced white text color in Image Banner & Slideshow (Shopify#2663)

* Remove forced white color.

* Change color scheme for Dawn's default homepage Image Banner..

* Remove warning about color scheme usage.

* Fix bug with transparent buttons on mobile.

* Remove unused info key from translated files.

* Update display of button when it's in a mobile container.

* Update existing placeholder images (Shopify#2610)

* Update existing placeholder images

* Featured collection and product card

* Featured product section

* Collection list section

* Featured blog and multirow sections

* Slideshow: change order of placeholder images

* Collage adjustments for product and collection cards

* Image with text adjustments

* Featured product: re-add `.product--no-media` selectors

* Update featured product section

* Update `card-collection`

* Cleanup `card-collection`

---------

Co-authored-by: Ludo <ludo.segura@shopify.com>

* Gradient fix for transparent background medias and cards (Shopify#2651)

* Fix media, product, and collection cards placeholder (Shopify#2682)

* Fix missing else for collection cards (Shopify#2692)

---------

Co-authored-by: Sofia Matulis <sofiamatulis@users.noreply.github.com>
Co-authored-by: Eugene Kasimov <105315663+eugenekasimov@users.noreply.github.com>
Co-authored-by: Mateusz Krzeszowiak <mateusz.krzeszowiak@shopify.com>
Co-authored-by: Lucas Lacerda <37168033+LucasLacerdaUX@users.noreply.github.com>
Co-authored-by: Kjell Reigstad <kjell@kjellr.com>
Co-authored-by: shopify[bot] <79544226+shopify[bot]@users.noreply.github.com>
Co-authored-by: Ken Meleta <30790058+kmeleta@users.noreply.github.com>
Co-authored-by: Andrew Etchen <andrew.etchen@shopify.com>

* made the test/default blog post 3 by default

* added updated placeholder image

* added the different placeholder images, while maintaining ability to edit with presets

* blog card theme settings work on default blog posts

* removed css that wasn't being used

* reverted to original code without theme settings

* fixed prettier error by removing extra quotation mark and made test blog default instead of news

---------

Co-authored-by: Jon Neill <jonathan.neill@shopify.com>
Co-authored-by: Ludo <ludo.segura@shopify.com>
Co-authored-by: Sofia Matulis <sofiamatulis@users.noreply.github.com>
Co-authored-by: Eugene Kasimov <105315663+eugenekasimov@users.noreply.github.com>
Co-authored-by: Mateusz Krzeszowiak <mateusz.krzeszowiak@shopify.com>
Co-authored-by: Lucas Lacerda <37168033+LucasLacerdaUX@users.noreply.github.com>
Co-authored-by: Kjell Reigstad <kjell@kjellr.com>
Co-authored-by: shopify[bot] <79544226+shopify[bot]@users.noreply.github.com>
Co-authored-by: Ken Meleta <30790058+kmeleta@users.noreply.github.com>
Co-authored-by: Andrew Etchen <andrew.etchen@shopify.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants