Reformation Animation

[Farmmedix]

Hi Everyone,

I'm designing my first website.

I saw this animation and  want it in my store.  As I'm scrolling up. A new image is coming up with text other info. 

How to do this ? https://themes.shopify.com/themes/reformation/styles/glamour/preview

[DaisyVo]

Hi @Farmmedix 

To create the scrolling animation effect, where new images and text appear as you scroll, you'll need to add parallax scrolling or scroll-triggered animations to your Shopify store. Shopify's theme editor and liquid code support basic animations, but for a custom effect like this, you may need to modify the theme code and possibly use a JavaScript library like ScrollReveal.js or AOS (Animate On Scroll).

Here’s how to add a scroll animation effect:

1. Check Your Theme Settings:
• First, check if your Shopify theme already supports scroll animations or parallax effects. Some themes have built-in settings for adding animations to sections.
• Go to Online Store > Themes, click Customize, and look for animation options in the settings for individual sections: https://prnt.sc/GR5hzJ190fwS
2. Use a Custom Code Solution with Javascript:
• If your theme doesn’t support this, you can add a custom code solution. Libraries like AOS (Animate On Scroll) make it easy to add animations on scroll.
3. How to Add AOS (Animate On Scroll) to Your Shopify Store:

Download the AOS library from AOS GitHub or use the following links to include it directly:

<link href="https://cdnjs.cloudflare.com/ajax/libs/aos/2.3.4/aos.css" rel="stylesheet">

<script src="https://cdnjs.cloudflare.com/ajax/libs/aos/2.3.4/aos.js"></script>

• Go to Online Store > Themes > Edit Code.
• In your theme’s theme.liquid file, add the AOS links right before the closing </head> tag.

Initialize AOS in your JavaScript by adding this code inside a <script> tag at the end of your theme.liquid file, right before </body>: https://prnt.sc/TR1-k-RywH4J


<script>

  AOS.init({

    duration: 1000, // duration of the animation in ms

    once: true, // whether animation should happen only once - while scrolling down

  });

</script>

Add data-aos attributes to the HTML elements you want to animate. For example, to make an image and text fade in as you scroll:
html
Copy code
<div data-aos="fade-up">

  <img src="your-image.jpg" alt="Image">

  <p>Your text here</p>

</div>

1. Customizing the Effect:
• AOS provides different animation types such as fade-up, fade-down, zoom-in, etc. You can change data-aos="fade-up" to any of these effects.
• Adjust the duration and other options in AOS.init() to control the animation speed and behavior.
2. Test the Animation:
• Preview your Shopify store and scroll to see if the animations appear as desired. You may need to fine-tune the animation settings to achieve the smooth effect you want.

Using this method, you can create the same scroll-triggered animations where images and text appear dynamically as the user scrolls. Just be sure to test across different devices to ensure it looks smooth and performs well.

Best regards,

Daisy