Jump to content
Search Community

ScrollTrigger does not animate on iPad only

Mardzis test
Moderator Tag

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});
    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

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

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.
×
×
  • Create New...