Hello,
Having a bit of an issue with setting up my triggers correctly within a wordpress template . Currently have lotties setup for two sections within the page and having no issues as far as the first section of lotties firing off as directed. However, I do need a little assistance as to how I would go about setting up another trigger to set off the second set of lotties without interference with the first set. Here is the code in which I have in place at the moment:
gsap.utils.toArray(".color-blah").forEach((el, i) => {
const ColorOne = gsap.timeline({
scrollTrigger: {
trigger: el,
onEnter: this.playLottie,
start: "top left",
end: "bottom top",
markers: true,
}
})
});
//FUNCTION PLAY
function playLottie (){
lottie.play()
};
// PAGE - HOME (GROUP ONE)
const yellow = lottie.loadAnimation({
container: document.querySelector('.slide-content_group-one.test-0'),
renderer: 'svg',
loop: false,
autoplay: false,
path: 'https://lottie.host/eb1cb11d-87e5-42af-bff2-8c8d8549da0a/XQo1JSHp3Y.json'
});
const red = lottie.loadAnimation({
container: document.querySelector('.slide-content_group-one.test-1'),
renderer: 'svg',
loop: false,
autoplay: false,
path: 'https://lottie.host/95c2b04c-28fd-411f-8add-8cc8380d3399/5FNf1cSzsq.json'
});
const blue = lottie.loadAnimation({
container: document.querySelector('.slide-content_group-one.test-2'),
renderer: 'svg',
loop: false,
autoplay: false,
path: 'https://lottie.host/fb01223d-4298-4acf-a811-a018adc887a9/PMlDJX47Kc.json'
});
</script>
Greatly appreciate any help provided!!
