[Scrolltrigger works on desktop and android phone and tablet. But not on iOS devices]

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.

 

[Scrolltrigger works on desktop and android phone and tablet. But not on iOS devices]

Hey thanks, I found the error. 

Had nothing to do with Scrolltrigger like you guys said.

Thank you

[Scrolltrigger works on desktop and android phone and tablet. But not on iOS devices]

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!

[Disable scrolltrigger after orientation change]

Hey,

 

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

Thanks

[Disable scrolltrigger after orientation change]

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!

 

[Disable scrolltrigger after orientation change]

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.

See the Pen mdMqyoJ?editors=1111 by dr_pxl (@dr_pxl) on CodePen

[store returned value by calling function in tween]

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!

[Why does my Scrolltrigger code not update my dynamically x value on window resize?]

Wow amazing! That was it. You awesome @akapowl

 

[Why does my Scrolltrigger code not update my dynamically x value on window resize?]

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!

See the Pen QWMjqPW by dr_pxl (@dr_pxl) on CodePen

[Stop scrollTrigger and animations when window is too small (after resize)]

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;

[Use functions to detect variables in tweens based on getBoundingClientRect()]

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!

[Use functions to detect variables in tweens based on getBoundingClientRect()]

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!