ブラーが入ったマスクを使って、タイトルが左から右にあらわになるアニメーションを作ります。
1. クラス「blur-reveal」をウィジットにつける
2. 以下のCSSを入れる
HTML
<style>
.blur-reveal .elementor-heading-title {
display: block;
-webkit-mask-image: linear-gradient(115deg, #000 33%, transparent 66%);
mask-image: linear-gradient(115deg, #000 33%, transparent 66%);
-webkit-mask-size: 300% 100%;
mask-size: 300% 100%;
-webkit-mask-position: 100% 0;
mask-position: 100% 0;
}
</style>2. 以下のJSを入れる
（このコードの上にGSAP読み込みコードを入れてください。）
HTML
<script>
document.addEventListener('DOMContentLoaded', () => {
gsap.registerPlugin(ScrollTrigger);
// --- blur-reveal animation ---
gsap.utils.toArray('.blur-reveal').forEach((container) => {
const target = container.querySelector('.elementor-heading-title');
if (!target) return;
gsap.to(target, {
webkitMaskPosition: '0% 0%',
maskPosition: '0% 0%',
duration: 2.8,
ease: 'power2.out',
force3D: true,
scrollTrigger: {
trigger: container,
start: 'top 80%',
toggleActions: 'play none none none',
}
});
});
});
</script>