Jump to content


ScrollTrigger does not animate on iPad only

Recommended Posts

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});
      {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.allowSlideNext = false;
      introSlider.allowSlidePrev = false;

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


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

Link to comment
Share on other sites

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!



  • Like 1
  • Thanks 1
Link to comment
Share on other sites

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

Link to comment
Share on other sites

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? 

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.