Animation activate on scroll

Solved
Highlighted
Excursionist
16 0 1

Hi,

I need help with animations on my site. At the moment animations play only when the page is loaded but I want them to play as you scroll down. 

 

Site: www.imagineholo.com

Pw: temp123

 

Thanks!

0 Likes
Highlighted
Shopify Partner
9252 1179 3248

This is an accepted solution.

@RVN3996 

Thanks for post.

can you please try 

https://michalsnik.github.io/aos/

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
1 Like
Highlighted
Excursionist
16 0 1

Thanks! That did it perfectly.

0 Likes
Highlighted
Excursionist
40 0 4

hey

how can i instell this animations?

0 Likes
Highlighted
Shopify Partner
9252 1179 3248

@LigalBahiri 

Thanks 

can you please add your code theme.liquide 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
0 Likes
Highlighted
Excursionist
40 0 4

hey! thank you @KetanKumar 

 

<!doctype html>
<html class="no-js" lang="{{ shop.locale }}">
<head>
{% include 'booster-seo' %}
<!-- Basic page needs ================================================== -->


<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

{% if settings.favicon %}
<link rel="shortcut icon" href="{{ settings.favicon | img_url: '32x32' }}" type="image/png" />
{% endif %}

<!-- Title and description ================================================== -->
{% comment %}<title>
{{ page_title }}{% if current_tags %}{% assign meta_tags = current_tags | join: ', ' %} &ndash; {{ 'general.meta.tags' | t: tags: meta_tags }}{% endif %}{% if current_page != 1 %} &ndash; {{ 'general.meta.page' | t: page: current_page }}{% endif %}{% unless page_title contains shop.name %} &ndash; {{ shop.name }}{% endunless %}
</title>{% endcomment %}

{% if page_description %}
{% comment %}<meta name="description" content="{{ page_description | escape }}">{% endcomment %}
{% endif %}

<!-- Helpers ================================================== -->
{% include 'social-meta-tags' %}
<link rel="canonical" href="{{ canonical_url }}">
<meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
<meta name="theme-color" content="{{ settings.color_primary }}">

<!-- CSS ================================================== -->
{{ 'timber.scss.css' | asset_url | stylesheet_tag }}
{{ 'theme.scss.css' | asset_url | stylesheet_tag }}

<!-- Sections ================================================== -->
<script>
window.theme = window.theme || {};
theme.strings = {
zoomClose: {{ "products.zoom.close" | t | json }},
zoomPrev: {{ "products.zoom.prev" | t | json }},
zoomNext: {{ "products.zoom.next" | t | json }},
moneyFormat: {{ shop.money_format | json }},
addressError: {{ 'home_page.map.address_error' | t | json }},
addressNoResults: {{ 'home_page.map.address_no_results' | t | json }},
addressQueryLimit: {{ 'home_page.map.address_query_limit_html' | t | json }},
authError: {{ 'home_page.map.auth_error_html' | t | json }},
cartEmpty: {{ 'cart.general.empty' | t | json }},
cartCookie: {{ 'cart.general.cookies_required' | t | json }},
cartSavings: {{ 'cart.general.savings_html' | t: savings: '[savings]' | json }},
productSlideLabel: {{ 'products.product.slide_label' | t: slide_number: '[slide_number]', slide_max: '[slide_max]' | json }}
};
theme.settings = {
cartType: {{ settings.cart_type | json }},
gridType: {{ settings.collection_products_grid | json }}
};
</script>

{{ 'jquery-2.2.3.min.js' | asset_url | script_tag }}

<script src="{{ 'lazysizes.min.js' | asset_url }}" async="async"></script>

<script src="{{ 'theme.js' | asset_url }}" defer="defer"></script>

<!-- Header hook for plugins ================================================== -->
{{ content_for_header }}
{%- render 'bold-common' -%}

{{ 'modernizr.min.js' | asset_url | script_tag }}

{% comment %}
If you store has customer accounts disabled, you can remove the following JS file
{% endcomment %}
{% if request.page_type contains 'customers/' %}
{{ 'shopify_common.js' | shopify_asset_url | script_tag }}
{% endif %}

{% include 'alireviews_core' %}
{% include 'bucks-cc' %}

{% render 'shogun-head' %}
</head>
{% comment %}
Add the page template as a class for easy page or template specific styling.
{% endcomment %}
<body id="{{ page_title | handle }}" class="{% if customer %}customer-logged-in {% endif %}template-{{ request.page_type | handle }}">

{% section 'header' %}

<div id="CartDrawer" class="drawer drawer--right drawer--has-fixed-footer">
<div class="drawer__fixed-header">
<div class="drawer__header">
<div class="drawer__title">{{ 'cart.general.title' | t }}</div>
<div class="drawer__close">
<button type="button" class="icon-fallback-text drawer__close-button js-drawer-close">
<span class="icon icon-x" aria-hidden="true"></span>
<span class="fallback-text">{{ 'cart.general.close_cart' | t }}</span>
</button>
</div>
</div>
</div>
<div class="drawer__inner">
<div id="CartContainer" class="drawer__cart"></div>
</div>
</div>

<div id="PageContainer" class="page-container">
<main class="main-content" role="main">
{% unless request.page_type == "index" %}
<div class="wrapper">
{% endunless %}
{{ content_for_layout }}
{% unless request.page_type == "index" %}
</div>
{% endunless %}
</main>

<hr class="hr--large">

{% section 'footer' %}

</div>

{% comment %}
Template-specific js
{% endcomment %}
<script>
{% if resetPassword %}
$(function() {
timber.initCache();
timber.resetPasswordSuccess();
});
{% endif %}
</script>

{% comment %}
Ajaxify your cart with this plugin.
Documentation:
- http://shopify.com/timber#ajax-cart
{% endcomment %}
{% if settings.cart_type == 'drawer' %}
{% include 'ajax-cart-template' %}
{% endif %}

{% if request.page_type == 'product' or request.page_type == 'index' %}
<script>
// Override default values of shop.strings for each template.
// Alternate product templates can change values of
// add to cart button, sold out, and unavailable states here.
theme.productStrings = {
addToCart: {{ 'products.product.add_to_cart' | t | json }},
soldOut: {{ 'products.product.sold_out' | t | json }},
unavailable: {{ 'products.product.unavailable' | t | json }}
}
</script>
{% endif %}

<div id="SearchModal" class="mfp-hide">
{% include 'search-bar', search_btn_style: 'btn', search_bar_location: 'search-bar--modal' %}
</div>
<ul hidden>
<li id="a11y-refresh-page-message">{{ 'general.accessibility.refresh_page' | t }}</li>
<li id="a11y-selection-message">{{ 'general.accessibility.selection_help' | t }}</li>
<li id="a11y-slideshow-info">{{ 'home_page.slideshow.navigation_instructions' | t }}</li>
</ul>

{% include 'gtranslate', float: 'yes' %}
{% comment %}This is from goCart.{% endcomment %}{% include 'go-cart' %}</body>
</html

0 Likes
Highlighted
Shopify Partner
9252 1179 3248

@LigalBahiri 

Thanks 

i mean add code if you are able to code add on you

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
0 Likes
Highlighted
Excursionist
40 0 4

Sorry 

Can you explain me how I doing this animations? I tried 100 time but no success.. 

@KetanKumar 

0 Likes
Highlighted
Shopify Partner
9252 1179 3248

@LigalBahiri 

It can be done by doing some code customization. please send me a personal message and we can discuss what you'd like

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
0 Likes
Highlighted
Tourist
22 0 2

Hi where I can put this code? I just want this part of my homepage to be animated

btw here is my store url https://faxcable.com.ph/homepage.PNG

1 Like