Check out the codes below to add awesome scroll animated section in Shopify
First Step:
Add the following code in theme.liquid file below <head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>Second Step:
Create a new section “animated-section.liquid” with the following code:
{% schema %}
{
"name": "Scroll Animated Section",
"settings": [
{
"type": "text",
"id": "heading",
"label": "Heading",
"default": "Add Your"
},
{
"type": "text",
"id": "subheading",
"label": "Subheading",
"default": "Announcement or Discount Notifications"
},
{
"type": "image_picker",
"id": "hero_image",
"label": "Hero Background Image"
},
{
"type": "image_picker",
"id": "overlay_image",
"label": "Overlay Image"
},
{
"type": "color",
"id": "heading_color",
"label": "Heading Color",
"default": "#ff0000"
}
],
"presets": [
{
"name": "Scroll Animated Section",
"category": "Interactive Sections"
}
]
}
{% endschema %}
<style>
.spooky-story {
position: relative;
width: 100%;
height: auto;
background: black;
font-weight: 400;
font-style: normal;
font-family: "Chelsea Market", system-ui;
font-size: 34px;
overflow: hidden;
}
.spooky-story__wrapper {
position: relative;
width: 100%;
height: 100vh;
}
.spooky-story__intro {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
z-index: 2;
pointer-events: none;
}
.spooky-story__intro h1 {
font-size: 40px;
font-family: "Beth Ellen", cursive;
color: {{ section.settings.heading_color }};
text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
margin-bottom: 20px;
}
.spooky-story__intro p {
font-size: 60px;
font-family: "Chelsea Market", system-ui;
font-weight: bolder;
color: {{ section.settings.heading_color }};
text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
text-align:center;
}
.spooky-story__hero {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100vh;
z-index: 1;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.spooky-story__image-container {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100vh;
z-index: 2;
perspective: 500px;
overflow: hidden;
pointer-events: none;
}
.spooky-story__image-container img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
position: relative;
z-index: 1;
}
@media (max-width: 768px) {
.spooky-story__intro h1 {
font-size: 20px; /* Reduce font size for mobile */
}
.spooky-story__intro p {
font-size: 40px; /* Reduce font size for mobile */
text-align: center;
}
}
</style>
<div
class="spooky-story"
data-section-id="{{ section.id }}"
data-section-type="spooky-story"
style="
background-image: url('{% if section.settings.hero_image %}{{ section.settings.hero_image | image_url: width: 2000 }}{% else %}https://cdn.shopify.com/s/files/1/0601/0185/3358/files/happy-new-year.jpg?v=1737189520{% endif %}'); background-position: center center;
background-repeat: no-repeat;
background-size: cover;
transition: opacity 0.5s ease;
"
>
<div class="spooky-story__wrapper">
<div class="spooky-story__intro">
<h1>{{ section.settings.heading }}</h1>
<p>{{ section.settings.subheading }}</p>
</div>
<div
class="spooky-story__hero"
></div>
<div class="spooky-story__image-container">
<img
src="{% if section.settings.overlay_image %}{{ section.settings.overlay_image | image_url: width: 2000 }}{% else %}https://cdn.shopify.com/s/files/1/0854/8669/8790/files/rb_2149159187.png{% endif %}"
alt="{{ section.settings.overlay_image.alt | escape }}"
>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/ScrollTrigger.min.js"></script>
<script>
// Flag to track if the section is already added
let spookySectionAdded = false;
document.addEventListener('shopify:section:load', function(event) {
if (event.target.dataset.sectionType === 'spooky-story') {
if (spookySectionAdded) {
// If the section is already added, prevent adding it again
event.target.remove();
} else {
// If it's the first time, initialize the section and set the flag
spookySectionAdded = true;
initSpookyStory(event.target);
}
}
});
function initSpookyStory(section) {
gsap.registerPlugin(ScrollTrigger);
const timeline = gsap.timeline({
scrollTrigger: {
trigger: section.querySelector('.spooky-story__wrapper'),
start: "top top",
end: "+=150%",
pin: true,
scrub: true
}
});
// Animation for overlay image
timeline.to(section.querySelector('.spooky-story__image-container img'), {
scale: 2,
z: 250,
transformOrigin: "center center",
ease: "power1.inOut"
});
// Animation for background image
timeline.to(section.querySelector('.spooky-story__hero'), {
scale: 1.4,
transformOrigin: "center center",
ease: "power1.inOut"
}, "<");
}
document.addEventListener('DOMContentLoaded', function() {
document.querySelectorAll('[data-section-type="spooky-story"]').forEach(initSpookyStory);
});
</script>
Third Step
Hide section on mobile with the following code as currently it’s not supported in mobile
@media screen and (max-width: 750px) {
.spooky-story {
display: none;
}
}
