fewture

Hi @Trapti and thank you for your fast reply!! Exactly, that section is the one which is breaking on mobile. Are you using a mobile device emulator or a cloud device? Unfortunately it seems, as if it is not reproducible on emulators... It's making it even harder for us to debug.

Hi Guys, we have a very strange issue regarding an animation which includes scrollTrigger with pinning and horizontal scrolling. It works PERFECTLY on desktop, but on mobile it's a catastrophy. The section simply disappears as soon as it should be pinned. The issue shows up on desktop only, if one resizes from mobiel to desktop view in Google's DevTools. On refresh, the page works nromally again. We have tried every solution that we could find since we are searching for a solution since 3 days... We tried providing a codepen as well, but somehow we can't reproduce it. You can have a look for yourself right here: atz.fewtureservicing.de Here is our ScrollTrigger setup: let st = ScrollTrigger.create({ animation: tl, trigger: $('.scroll-trigger-references'), markers: true, id: "referenceSliderGSAP", pin: true, // pin the trigger element while active start: "top top", // when the top of the trigger hits the top of the viewport end: "bottom", //tested with "+=6000" earlier scrub: 1, // reparentPin: true - tested as well }); And this is the basic structure of our horizontal scrolling container: <div class="scroll-trigger-references"> <div class="references-loop"> <div class="background--images"> </div> <div class="reference-tile"> </div> <div class="reference-tile reference-last-tile"> </div> </div> </div> With the following CSS: .scroll-trigger-references { height: 100vh; overflow-x: hidden; will-change: transform; //tested as well :( } .references-loop { height: 100%; display: flex; align-items: center; overflow: hidden; position: relative; } .reference-tile { width: 100vw; flex-shrink: 0; display: flex; justify-content: center; align-items: center; position: relative; } I know, that this is the worst possible way of providing code, but we are stuck with this issue for days now and can't reproduce it on codepen... We would appreciate any hint or help with our issue!! Thank you for your great work (Even if we don't get this issue resolved! )

Hi Jack, thank you very much for your reply! I tried that already, but unfortunately, it leads to another error which does not make any sense to me: Cannot read properties of undefined (reading 'svg') I do not get it... The lines where the error allegedly occurs have nothing to do with an svg, or am I missing something? It seems as if there is a conflict with a theme which uses gsap as well (Semplice 6). But I am not calling anything related to that theme, and am working in a child-theme. Edit: It definetly is a conflict with the parent theme Semplice 6. I removed the error throwing script, and it resolved the issue. Will have to figure that out. Thank you for pointing me in the right direction though!! Best regards, Walid

Hi guys, we are trying to use gsap.registerPlugin() to register the InertiaPlugin but it does not work unfortunately. We enqueue the InertiaPlugin via our functions.php (WordPress) and it shows up as loaded in DevTools. However, the error exists. We even load it as type="module" as it throws another error if we don't. We have set up a test website that demonstrates the issue: https://atz.fewtureservicing.de/ We are very grateful for any help guys, thank you!! Best regards, Walid

Hi Rodrigo, thank you for your reply! Unfortunately, that did not resolve my issue... The last element of a loop, which gets added to the front again, appears without the appropriate margin/padding and sometimes flashes. It sticks to the next element and breaks the whole loop. We need to add double the margin set on the other elements as 'paddingRight', so that it does not stick to the last element of the loop. But still, the distances are not adding up, causing the last slide and the first having different spacing between them, than the rest of the slides... I created a codepen which illustrates the issue. As soon as the last element is added as the first again it breaks the whole loop and breaks the margin specified. https://codepen.io/Fewture-Webdesign/pen/OJaoRgm Best regards, Walid

Hi Guys! Basically, we have used the helper function for horizontal loops: https://greensock.com/docs/v3/HelperFunctions#loop But we have an issue with margin applied. If we apply 50px of margin-right to the '.box' class for example, it breaks after the first loop, as the first element then sticks to the last element of the loop. How can we tackle this issue? Thank you for your help!