Hitendra Posted April 6, 2023 Share Posted April 6, 2023 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 Link to comment Share on other sites More sharing options...
Solution mvaneijgen Posted April 6, 2023 Solution Share Posted April 6, 2023 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 Link to comment Share on other sites More sharing options...
Hitendra Posted April 21, 2023 Author Share Posted April 21, 2023 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!! 1 Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now