The GSAP Scroll Trigger not working in the safari 16.2 and below versions

[Hitendra]

The section is scrolling horizontally in all other broiwsers but in safari it goes down with blank space. Can anyone help me with this?

I have used this same script with minor modifications in my webflow project .

Here is the script:

<script type="text/javascript">
if($(window).width() > 992){
    let pe_events = $(".pe-events");
  if (pe_events.length) {
    let pe_event_list = $(".pe-events__item");
    let events_wrapper = $('.pe-events__wrap');
    pe_event_list.last().addClass('mr-0');

    if (pe_event_list.length === 2) {
      events_wrapper.addClass('empty');
    } else {
      var events_duration = 1,
          events_tl = gsap.timeline({
            scrollTrigger: {
              trigger: ".pe-events",
              pin: true,
              scrub: 0.2,
              start: () => "bottom bottom",
              end: () => "+=" + document.querySelector('.pe-events__wrap').offsetWidth / 2,
              invalidateOnRefresh: true
            }
          });
            
      function getValue() {
        
        let containerWidth = events_wrapper.parents('.container').width(),
            sideOffset = (window.innerWidth - containerWidth) / 2,
            percentTranslate = 100 - ((containerWidth + sideOffset) / events_wrapper.width() * 100); 
        return percentTranslate;
      }
      events_tl.to(events_wrapper, {
        xPercent: () => { return -1 * getValue() } ,
        duration: events_duration,
        ease: "none"
      });
      
    }
  }
}
</script>

In apple it shows that "Can't find events_wrapper" variable

 

See the Pen 7a70cc3ee757fd73d03f9d308bf4cb0b by akapowl (@akapowl) on CodePen

[mvaneijgen]

If I move the following two variables outside the if statement it works on safari 16.3 

 

 let pe_event_list = $(".pe-events__item");
 let events_wrapper = $('.pe-events__wrap');

 

I would love to post an example but the pen is blocked from forking. 

 

See the Pen ExdxwMX by mvaneijgen (@mvaneijgen) on CodePen

[Hitendra]

On 4/6/2023 at 7:16 PM, mvaneijgen said:

If I move the following two variables outside the if statement it works on safari 16.3 

 

 let pe_event_list = $(".pe-events__item");
 let events_wrapper = $('.pe-events__wrap');

 

I would love to post an example but the pen is blocked from forking. 

 

 

 

Thaankyou @mvaneijgen for the perfect solution!!