| 593 | |
| 594 | // Main function to apply scroll-triggered animations |
| 595 | const scroll = () => { |
| 596 | // Define items and associate them with their animation profiles and options |
| 597 | const items = [ |
| 598 | { |
| 599 | id: '#item-1', |
| 600 | animationProfile: fx1, |
| 601 | interactiveTilt: true, // This item should have the InteractiveTilt effect |
| 602 | options: { |
| 603 | perspective: 1000 |
| 604 | } |
| 605 | }, |
| 606 | { |
| 607 | id: '#item-2', |
| 608 | animationProfile: fx2, |
| 609 | interactiveTilt: true, // This item should have the InteractiveTilt effect |
| 610 | options: { |
| 611 | clipPaths: { |
| 612 | step1: { |
| 613 | initial: 'polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%)', |
| 614 | final: 'polygon(40% 50%, 60% 50%, 80% 50%, 20% 50%)', |
| 615 | }, |
| 616 | step2: { |
| 617 | initial: 'polygon(20% 50%, 80% 50%, 60% 50%, 40% 50%)', |
| 618 | final: 'polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%)', |
| 619 | } |
| 620 | }, |
| 621 | scrollTrigger: { |
| 622 | start: 'center bottom', |
| 623 | end: 'top top' |
| 624 | }, |
| 625 | perspective: 500 |
| 626 | } |
| 627 | }, |
| 628 | { |
| 629 | id: '#item-3', |
| 630 | animationProfile: fx3, |
| 631 | options: { |
| 632 | clipPaths: { |
| 633 | step1: { |
| 634 | initial: 'polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%)', |
| 635 | final: 'polygon(50% 0%, 50% 50%, 50% 50%, 50% 100%)', |
| 636 | }, |
| 637 | step2: { |
| 638 | initial: 'polygon(50% 50%, 50% 0%, 50% 100%, 50% 50%)', |
| 639 | final: 'polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%)', |
| 640 | } |
| 641 | }, |
| 642 | scrollTrigger: { |
| 643 | start: 'center center', |
| 644 | end: '+=150%', |
| 645 | pin: true |
| 646 | }, |
| 647 | perspective: 400 |
| 648 | } |
| 649 | }, |
| 650 | { |
| 651 | id: '#item-4', |
| 652 | animationProfile: fx4, |