0

I have this animation that plays on every page scrolling. What I want to achieve is to play the whole animation when it triggers the id section of the pinned element. So when it enters the pinned element, it should play the whole animation, not by every page scroll.

A good reference is in here to better understand what will be the output

https://squareup.com/us/en/why-square under Look and feel like a pro.

Is this possible using scrolltrigger and gsap? I'm very new to this jquery plugin and still discovering the features and controls of this.

const canvas = document.getElementById("hero-lightpass");
const context = canvas.getContext("2d");

const frameCount = 108;

const currentFrame = index => (
  `https://dev.jin.services/fazz/wp-content/themes/hello-elementor/assets/images/imagesequence/home-banner-${(index + 1).toString().padStart(3, '0')}.jpg`
);

const images = []
const banner = {
  frame: 0
};

for (let i = 0; i < frameCount; i++) {
  const img = new Image();
  img.src = currentFrame(i);
  images.push(img);
}
gsap.registerPlugin(ScrollTrigger);

gsap.to(banner, {
  frame: frameCount - 1,
  snap: "frame",
  ease: "none",
  scrollTrigger: {
    scrub: true,
    pin: "#pin-banner",
    trigger: "#hero-lightpass",
    duration: '100%',
  },
  onUpdate: render // use animation onUpdate instead of scrollTrigger's onUpdate
});

images[0].onload = render;

function render() {
  context.clearRect(0, 0, canvas.width, canvas.height);
  context.drawImage(images[banner.frame], 0, 0); 
}
html {
height: 100vh;
}

body {
height: 5000px;
background: #000;
}
#pin-banner {max-width:1220px;margin:0 auto;padding:0;width:100%;}
#hero-lightpass {width:100%;}
.pin-spacer {padding:0 !important;}
<body>
    <div style="height:600px;"></div>
    <div id="pin">
        <div id="pin-banner">
            <canvas id="hero-lightpass" width="1920" height="1080"></canvas>
        </div>
    </div>
    <div style="height:600px;">
    <h1 style="font-size: 42px;color:#fff;">TEST</h1></div>

</body>

<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.0/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.0/ScrollTrigger.js"></script>
laurence keith albano
  • 1,409
  • 4
  • 27
  • 59

1 Answers1

0

first you're using very old versions of GSAP and ScrollTrigger so I'd recommend you to update them.

Regarding what you're trying to do, basically remove the scrub: true key:value pair in your config and that should do it. Also in the newest versions duration is deprecated in favor of setting a specific end value, which can use a relative value:

https://greensock.com/docs/v3/Plugins/ScrollTrigger

Scroll down to Usage & special properties to find it.

Finally if you're still having issues, please head to the GSAP forums.

Rodrigo
  • 1,638
  • 1
  • 15
  • 27