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.

Sign up for GitHub

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

Jump to bottom

animate Collage and Slideshow on scroll #2410

Merged
merged 16 commits into from
Apr 11, 2023
Merged

animate Collage and Slideshow on scroll #2410

merged 16 commits into from
Apr 11, 2023

Conversation

metamoni
Copy link
Contributor

@metamoni metamoni commented Mar 15, 2023 •
edited
Loading

PR Summary:

Adds fade in on scroll animation to the following sections:

  • Collage
  • Slideshow

Why are these changes introduced?

Fixes #2319

What approach did you take?

Replicated animations from the original prototype

Visual impact on existing themes

Will animate Collage and Slideshow sections on scroll, when Reveal sections on scroll is enabled

Testing steps/scenarios

  • Enable Reveal sections on scroll under Animations in Theme settings
  • On the home page, add a Collage section and verify that it fades in on scroll
  • Verify that each item cascades in
  • Add a Slideshow section and verify that it fades in on scroll

Demo links

Checklist

@metamoni metamoni changed the title animate Collage on scroll animate Collage and Slideshow on scroll Mar 15, 2023
@metamoni metamoni force-pushed the animate-featured-collection branch 11 times, most recently from 2c6692e to e571ff5 Compare March 23, 2023 10:10
@metamoni metamoni force-pushed the animate-featured-collection branch 6 times, most recently from b4c2dc1 to f832fc8 Compare March 29, 2023 14:38
@metamoni metamoni force-pushed the animate-slideshow-and-collage branch from 4e010c7 to 8c727d8 Compare March 29, 2023 16:36
@metamoni metamoni force-pushed the animate-featured-collection branch from 4235ec7 to 298c35f Compare March 30, 2023 13:44
Base automatically changed from animate-featured-collection to main March 30, 2023 15:23
@metamoni metamoni force-pushed the animate-slideshow-and-collage branch 3 times, most recently from 12b1c60 to 6e474a3 Compare April 4, 2023 14:32
@metamoni metamoni force-pushed the animate-slideshow-and-collage branch from e600e06 to 925cc80 Compare April 5, 2023 10:59
@metamoni metamoni marked this pull request as ready for review April 5, 2023 12:16
metamoni
metamoni commented Apr 5, 2023
View reviewed changes
sections/slideshow.liquid Outdated Show resolved Hide resolved
metamoni
metamoni commented Apr 5, 2023
View reviewed changes
sections/slideshow.liquid Outdated Show resolved Hide resolved
@kjellr
Copy link
Contributor

kjellr commented Apr 5, 2023 •
edited
Loading

@metanomi Can we have the slideshow's background just fade in (like the image banner's image)?

Right now, it appears to slide in and fade in. You can compare that to the Image Banner below in this video:

05-37-kk6x0-n53u8.mp4

@metamoni metamoni force-pushed the animate-slideshow-and-collage branch from 925cc80 to 6166d6e Compare April 5, 2023 12:43
kjellr
kjellr approved these changes Apr 5, 2023
View reviewed changes
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 with the latest round of changes. 👍

LucasLacerdaUX
LucasLacerdaUX approved these changes Apr 5, 2023
View reviewed changes
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.

LGTM! :D

sections/slideshow.liquid Outdated Show resolved Hide resolved
kjellr
kjellr reviewed Apr 5, 2023
View reviewed changes
sections/collage.liquid Outdated Show resolved Hide resolved
melissaperreault
melissaperreault approved these changes Apr 7, 2023
View reviewed changes
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! LGTM! 🎉 🚢

@kjellr kjellr mentioned this pull request Apr 10, 2023
Merged
8 tasks
@metamoni metamoni merged commit ae1c3c5 into main Apr 11, 2023
@metamoni metamoni deleted the animate-slideshow-and-collage branch April 11, 2023 05:30
phapsidesGT pushed a commit to Gravytrain-UK/gt-shopify-dawn-theme that referenced this pull request Sep 3, 2024
@metamoni
animate Collage and Slideshow on scroll (Shopify#2410)
0d3e05a 
add fade in on scroll animation to Collage and Slideshow
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@kjellr kjellr kjellr approved these changes

@LucasLacerdaUX LucasLacerdaUX LucasLacerdaUX approved these changes

@melissaperreault melissaperreault melissaperreault approved these changes

@stufreen stufreen stufreen approved these changes

Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

[Collage] and [Slideshow]: Add cascading fade in on scroll animation
5 participants
@metamoni @kjellr @stufreen @melissaperreault @LucasLacerdaUX