scrolltrigger ScrollTrigger does not animate on iPad only

[Mardzis]

Hello, I've using in past ScrollMagic with combinations before I discover ScrollTrigger, main reason was that I could make it work on mobile and table (iOS tested only) and since I moved from ScrollMagic to the awesome ScrollTrigger from gsap, I moved just two timelines both works on mobile (iPhone) but still without any changes on iPad. Is there any special thing I have to do to make it work on iPad? 

 

I'm using Webpack with GSAP 3.4.0.

 

I don't see anything special why it shouldn't work. What could cause the problem? 

 

import {gsap, TweenMax, TimelineMax} from 'gsap';
import 'imports-loader?define=>false!scrollmagic/scrollmagic/uncompressed/plugins/debug.addIndicators';
import {TextPlugin} from 'gsap/TextPlugin';
import {CSSRulePlugin} from 'gsap/CSSRulePlugin';
import { ScrollTrigger } from "gsap/ScrollTrigger";

gsap.registerPlugin(TextPlugin, CSSRulePlugin, ScrollTrigger);

$(function() {

  if (document.querySelector('.IntroAnimation')) {

    let introTl = gsap.timeline({
      scrollTrigger: {
        trigger: '.IntroAnimation',
        start: "40px center",
        end: "bottom center",
        scrub: true,
        toggleActions: "restart pause reverse pause",
        markers: true
      }
    });

    introTl.to('.IntroPlatform-base', {opacity: 0, scale: 0.8});
    introTl.to('.IntroPlatform',
      {rotateX: 0, className: 'IntroPlatform hasShadowRow'});
    introTl.to('.IntroPlatform-slide.isHidden', {
      display: 'block',
      opacity: 1,
      onReverseComplete: hideSlides,
      onComplete: allowSwipeIntro,
    }, '<');
    introTl.to('.IntroPlatform.hasShadowRow', {opacity: 1}, '-=1');
    introTl.to('.IntroPreview-play', {opacity: 1});

    function hideSlides() {
      introSlider.slideTo(2);
      introSlider.allowSlideNext = false;
      introSlider.allowSlidePrev = false;
    }

    function allowSwipeIntro() {
      introSlider.allowSlideNext = true;
      introSlider.allowSlidePrev = true;
    }
  }
  
});

 

See the Pen rNeQppJ by Mardzis (@Mardzis) on CodePen

[GreenSock]

I just checked on my iPad and it behaves the same as on my desktop. I do see animation (although it's a little odd because of how you have your start/end values set up). 

 

You should definitely remove the ScrollMagic indicators import. 

 

There is no "className" animations in GSAP 3 (at least not officially). That was removed because it's generally much faster to just define the specific properties you want to animate (rather than having GSAP loop through and compare literally every...single...property) and to save kb. If you really need it, there's an "unofficial" one here: 

See the Pen BaNRejV?editors=0010 by GreenSock (@GreenSock) on CodePen

 

Lastly, there's no need to define BOTH a scrub AND a toggleActions because toggleActions only apply to non-scrub ScrollTriggers. Logically it cannot be both. It doesn't hurt anything to have them both defined - ScrollTrigger will just ignore toggleActions if you have scrub declared. It's just unnecessary. 

 

Happy tweening!

 

 

[Mardzis]

Yeah, I saw that the Codepen example works on iPad/iPhone. I will try implement all the changes you suggest which are necessary and I will see if it helps. Thanks

[Mardzis]

@GreenSock is there any other catch? I can't make it work on iPad, it works perfectly on iPhone.

[GreenSock]

Have you tried a different iPad? It sure sounds like there's a problem with your iPad - it works fine on mine and I cannot imagine how/why it'd work fine on your iPhone (and my iPad) but not your iPad. It's iOS Safari on both, right? Or is one super old/outdated? 

[Mardzis]

It hasn't worked on Browserstack either, but after I updated my ipad to latest iOS it works. Not sure what causes the problems. Thank you