PARALLAX
Directions:
Add the Animation Toolset to your Site Header Code Injection area. (If you already have GSAP installation you can remove lines 1 - 3)
Add the Usage code into the Page Header Code Injection area of the page with your image block.
Replace the #block-id with the Block ID of your image block.
Adjust any of the properties to your liking.
Squarespace Block ID Finder Extension
<!-- GSAP Animation Library -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js"></script>
<!-- Scroll Animation Tools From crangrp.com -->
<script>
(function(){
const buildScrollAnimation = (el, start, end, mobileStart, mobileEnd) => {
if (!start && !end) return;
let params = {
start: start,
end: end
};
if (window.innerWidth <= 768) {
params.start = mobileStart;
params.end = mobileEnd;
}
document.querySelector(el).closest('.page-section').style.overflow = 'hidden';
if (params.start.opacity === 0) params.start.opacity = 0.01;
if (params.end.opacity === 0) params.end.opacity = 0.01;
const tl = gsap.timeline({
scrollTrigger: {
trigger: el,
start: "top bottom",
end: "bottom top",
scrub: params.end.momentum || 1
}
});
tl.fromTo(el, {
opacity: params.start.opacity || 1,
scale: params.start.scale || 1,
x: params.start.x || 0,
y: params.start.y || 0,
rotation: params.start.rotation || 0,
}, {
opacity: params.end.opacity || 1,
scale: params.end.scale || 1,
x: params.end.x || 0,
y: params.end.y || 0,
rotation: params.end.rotation || 0,
ease: 'none'
});
return tl;
}
window.wmScrollAnimations = [];
window.wmScrollAnimation = (el, start, end, mobileStart = {}, mobileEnd = {}) => {
if (document.readyState === 'complete' || document.readyState === 'interactive') {
let tl = buildScrollAnimation(el, start, end, mobileStart, mobileEnd);
console.log(tl)
window.wmScrollAnimations.push({el:el, start:start, end:end, mobileStart:mobileStart, mobileEnd:mobileEnd, tl:tl});
} else {
window.addEventListener('DOMContentLoaded', () => {
let tl = buildScrollAnimation(el, start, end, mobileStart, mobileEnd);
window.wmScrollAnimations.push({el:el, start:start, end:end, mobileStart:mobileStart, mobileEnd:mobileEnd, tl:tl});
});
}
};
const killAll = () => {
window.wmScrollAnimations.forEach(animation => {
animation.tl.kill(true)
gsap.set(animation.el, {clearProps: true})
})
window.wmScrollAnimations = [];
}
const handleResize = debounce(() => {
const allAnimations = window.wmScrollAnimations;
killAll();
allAnimations.forEach(animation => {
window.wmScrollAnimation(animation.el, animation.start, animation.end, animation.mobileStart, animation.mobileEnd);
});
if (document.body.matches('.sqs-edit-mode-active')) killAll()
}, 250);
window.addEventListener('resize', handleResize);
function debounce (func, delay){
let inDebounce;
return function() {
const context = this;
const args = arguments;
clearTimeout(inDebounce);
inDebounce = setTimeout(() => func.apply(context, args), delay);
};
};
}());
</script>
<!-- Scroll Animation -->
<script>
window.wmScrollAnimation("#block-id", {
// "Start" Position
x: 0,
y: -50,
rotation: 0,
scale: 1,
opacity: 1,
},{
// "End" Position
x: 0,
y: 50,
rotation: 0,
scale: 1,
opacity: 1,
momentum: 1,
}, {
// Mobile "Start" Position
x: 0,
y: 0,
rotation: 0,
scale: 1,
opacity: 1,
}, {
// Mobile "End" Position
x: 0,
y: 0,
rotation: 0,
scale: 1,
opacity: 1,
});
</script>
If you’d like an expert to reach out and trouble shoot any issues you maybe having please submit a form. Typical callback time is 1 hour but can be up to 24 hrs.
For general questions please reach out to us at info@crangrp.com
