dr.Pxl

Hey @Reetchy, like @Cassie said, it was a mobile Safari issue with a function that had nothing to do with Scrolltrigger. I wrote you a message with instruction on how to debug iOS Safari via cable and macOS Safari.

Hey thanks, I found the error. Had nothing to do with Scrolltrigger like you guys said. Thank you

Hey, I know a demo helps but my code is very large so I try to ask a general question first: My scrolltrigger are working perfectly on Android tablets and smartphones, but not on iPad and iPhone (models are not old or something). Is there a problem or typical mistake known leading to that problem? Thank you!

Hey, yeah quite. I only want to kill some of them. So I push those into an array an kill them? Thanks

Hey @Cassie, thank you for your help! Your answer is a good start for me, but I need a bit more input at this point - sorry for that. The thing is: I want to deliver the on scroll animation for either - landscape or portrait - but if the orientation changes I want to switch into a static mode. Everything works finde, but the scrolltrigger is still enabled. I thougt of maybe a variable that handles that stuff. Something like: ScrollTrigger.matchMedia({ `(orientation: ${originalOrientation}`: function() { // do stuff }, `orientation: ${changedOrientation}`:function () { // do nothing or either kill }, }) But scrolltrigger does only acceppt strings in typical "". Maybe you have some idea :). Bye!

Good evening, I have a little trouble with a Scroltrigger topic. I basically want to disable a scrolltrigger and all connected tweens when a user rotates it's device. I tried to change a variable so the if-loop would not be entered any more. Unfortionally this does not work. Maybe someone has a idea.. Thank you in advance.

Hey quick question: Can I get a return value from a function called via .call in a tween? Example: const value = timelineName.call(doStuff); function doStuff() { const returnedValue = "xyz"; return returnedValure; } Unfortionally the variable stores the whole tween. I would be happy if someone could help me :). Thanks!

Wow amazing! That was it. You awesome @akapowl

First things first. I absolutely love GSAP and their Scrolltrigger. Everything works fine, but unfortunately, the object I move on the x-axis based on scroll does not update when the user resizes his browser window.' The x value is based on a formula I wrote. Here is a part of the function later added in a master timeline with matchMedia Scrolltrigger: var seoShowBenefitsTl = gsap.timeline(); seoShowBenefitsTl.addLabel("first Benefit") .to(".anim-screen-item-0", {opacity: 0, duration: 0.5}, "first Benefit") .to(seoATFHardware, {x: () => (document.documentElement.clientWidth - seoATFHardware.clientWidth) / 2 + calculateOffsetToElement(document.querySelector('.anim-point-item.--revenue'), 120, "right"), duration: 1, ease: Power3.in, onUpdate: function() { if (this.progress() >= 0.5) { document.querySelector('.anim-screen-item.--revenue').classList.add("js-screen-item-engaged"); document.querySelector('.anim-point-item.--revenue').classList.add("js-point-item-engaged"); } else { document.querySelector('.anim-screen-item.--revenue').classList.remove("js-screen-item-engaged"); document.querySelector('.anim-point-item.--revenue').classList.remove("js-point-item-engaged"); } }}, "first Benefit") //some more code return seoShowBenefitsTl I also built a little demo via codepen: The red cube should move to the center of the window after scrolling. It works fine, but after resizing the window, it moves not to the center. If I reload the pen (on same window size it didn't work before) and try again it works again. You habe to open the pen for a better view. Maybe someone can give me a little help. Thank you in advance!

Hey, I am so confused and nearly at the end of my nervs after hours of trying. I am not able to disable the scrollTrigger of my master TL or kill the masterTL and underlying tweens. I basically want to stop GSAP animations if the window is to small. Maybe you guys can take a look at my code and espacially at the comments I made. Thank you so much! var seoIntroMasterTl = gsap.timeline({ scrollTrigger: { trigger: sectionHeroSeo, start: "top top", end: "bottom bottom", scrub: 0.2, pin: false, } }); if (play === false) { console.log(seoIntroMasterTl.scrollTrigger) //this fires at proper moment seoIntroMasterTl.scrollTrigger.disable(); //this doesn't work } seoIntroMasterTl.scrollTrigger.disable(); //this works seoIntroMasterTl.add(createFadeOutUpTl(seoATFHeroContent, seoATFHeadlineGroup)) .addLabel("Macbook fly in") .add(createScaleDownFullScreenDeviceTl(seoATFHardware, seoAtfMacbookMatrixStart, seoAtfMacbookMatrixEnd), "Macbook fly in") .add(createFlyingScreenWindowsTl(seoAtfWindows), "Macbook fly in") .add(createDeviceHideIntroTl(seoATFHardware, seoBenefitsIntro, yShowSeoBenefitIntroDevicePosition, yHideSeoBenefitIntroDevicePosition, yHideSeoBenefitIntroIntroPosition)) .add(seoShowBenefitsTl); return seoIntroMasterTl;

Hey Blake, thanks for your answer. The problem is, that the bounding fires before transform happens. So I need a solution where I can fire a function in the tween right before the tween animates on scroll. Thank you!

Hey, I am looking for a solution to my problem. I want to use some functions to position my elements in my tweens. It looks like this: .to(seoATFHardware, {y: centerElementBasedOnAxis(seoATFHardware, "y"), 180, "right"), duration: 1, ease: Power3.in}) So far, so good. In the function I do stuff like that: function centerElementBasedOnAxis(elem, axis) { ... if (axis === "y") { let windowHeight = document.documentElement.clientHeight; centeredPosition = (windowHeight - element.getBoundingClientRect().height) / 2 ; } ... return centeredPosition; } The problem: The tween above is part of a timeline based on scroll progression. I scale the element "seoATFHardware" in the tween before and the getBoundingClientRect returns the unscaled height the element had when the page loads. Is there a way to fire the function right before the tweens starts so that the Bounding gets the "correct" size of the element. Or do you guys know a better solutions for my approach? Thank you very much in advance!