https://galtcountryclub.com/wp-content/themes/builderv2/blocks/par…/parallax-timeline-block.js?ver=6.8.10

1// SETUP FUNCTION
2
3(function($){
4
5    var initializeBlockParallaxTimelineBlock = function( $block ) {
6
7        $(document).ready(function() {
8
9            ScrollTrigger.matchMedia({
10
11                "(min-width: 1200px)": function() {
12
13                    gsap.registerPlugin(ScrollTrigger);
14               
15                    const sections4 = gsap.utils.toArray(".parallax-timeline-block article");
16                    let maxWidth = 0;
17                    
18                    const getMaxWidth = () => {
19                        maxWidth = 0;
20                        sections4.forEach((section4) => {
21                        maxWidth += section4.offsetWidth;
22                        });
23                    };
24                    getMaxWidth();
25                    ScrollTrigger.addEventListener("refreshInit", getMaxWidth);
26                    
27                    gsap.to(sections4, {
28                        x: () => `-${maxWidth - window.innerWidth}`,
29                        ease: "none",
30                        scrollTrigger: {
31                            trigger: ".parallax-timeline-block",
32                            pin: true,
33                            scrub: true,
34                            end: () => `+=${maxWidth}`,
35                            invalidateOnRefresh: true
36                        }
37                    });
38                    
39                    sections4.forEach((sct, i) => {
40                        ScrollTrigger.create({
41                            trigger: sct,
42                            start: () => 'top top-=' + (sct.offsetLeft - window.innerWidth/2) * (maxWidth / (maxWidth - window.innerWidth)),
43                            end: () => '+=' + sct.offsetWidth * (maxWidth / (maxWidth - window.innerWidth)),
44                            toggleClass: {targets: sct, className: "active"}
45                        });
46
47                    });
48
49                }
50
51            });
52            
53        });
54
55    }
56    
57    $(document).ready(function(){
58        initializeBlockParallaxTimelineBlock();
59    });
60
61    if( window.acf ) {
62        window.acf.addAction( 'render_block_preview/type=parallax-timeline-block', initializeBlockParallaxTimelineBlock );
63    }
64
65})(jQuery);