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

Animate featured product and product info #2405

Merged
merged 15 commits into from
Apr 24, 2023
Merged

Conversation

metamoni
Copy link
Contributor

@metamoni metamoni commented Mar 15, 2023

PR Summary:

Adds fade in on scroll to the following areas

  • Main product (product info)
  • Featured product

Why are these changes introduced?

Fixes #2390

What approach did you take?

Replicated animations from the original prototype

Visual impact on existing themes

Will animate product info and featured product on scroll, when Reveal sections on scroll is enabled

featured-product-prod-info.mp4

Testing steps/scenarios

  • Enable Reveal sections on scroll under Animations in Theme settings
  • On the home page, add a Featured Product section and verify that it fades in on scroll
  • Navigate to the product page and verify that the product information section fades in on scroll

Demo links

Checklist

@metamoni metamoni changed the base branch from main to animate-featured-collection March 15, 2023 16:53
@metamoni metamoni self-assigned this Mar 15, 2023
@kjellr
Copy link
Contributor

kjellr commented Mar 15, 2023

Thanks, @metamoni! Just a few UX notes on this one. Let's adjust so that:

  • The Section background color does not animate
  • The product image(s) fade in
  • The rest of the product details slide in as usual

kjellr
kjellr previously approved these changes Mar 16, 2023
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.

This looks great! Nice work. 🌟

@metamoni metamoni force-pushed the animate-featured-collection branch 2 times, most recently from 4112234 to 9ed5af0 Compare March 16, 2023 13:27
Copy link
Contributor

@LucasLacerdaUX LucasLacerdaUX left a comment

Choose a reason for hiding this comment

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

quick question. everything else looking good so far :D

sections/featured-collection.liquid Outdated Show resolved Hide resolved
@metamoni metamoni force-pushed the animate-featured-collection branch from e755352 to 5fc448a Compare March 17, 2023 17:30
Copy link
Contributor

@melissaperreault melissaperreault left a comment

Choose a reason for hiding this comment

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

Thank you Monica! I found 2 little things:

  • When the setting Enable sticky content on desktop is unchecked, the behavior is different, the content doesn't slide in anymore. (Video reference)
  • When navigating a product with 3D models, the delay until the media displays is longer than usual. (Video reference)

@metamoni metamoni force-pushed the animate-featured-collection branch 12 times, most recently from 87853d2 to 1e5eaae Compare March 24, 2023 13:33
@metamoni metamoni force-pushed the animate-featured-collection branch 2 times, most recently from b4c2dc1 to f832fc8 Compare March 29, 2023 14:38
@metamoni metamoni requested a review from stufreen April 11, 2023 11:45
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.

This works nicely in my testing!

@metamoni
Copy link
Contributor Author

Just noting that this branch will have a known bug when merged in (video below). A fix is being worked on by @ludoboludo in this PR.

bug.mp4

@metamoni metamoni merged commit 8127ecc into main Apr 24, 2023
@metamoni metamoni deleted the animate-featured-product branch April 24, 2023 15:30
phapsidesGT pushed a commit to Gravytrain-UK/gt-shopify-dawn-theme that referenced this pull request Sep 3, 2024
animate Featured Product and Product Information
This pull request was closed.
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.

[Featured product and Product information] Add cascading fade in on scroll animation
5 participants