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