Performance on mobile is really poor

This is a (multiple allowed):

• bug

• enhancement

• feature-discussion (RFC)

• Swiper Version: “^6.2.0”,

• Platform/Target and Browser Versions: Safari IOS

• Live Link or JSFiddle/Codepen or website with issue: www.joebentaylor.co.uk

What you did

I just used the react version of swiper. Heres my setup:

// Imports
// ------
import React, { useState, useEffect } from 'react';
import anime from 'animejs/lib/anime.es.js';
import TextSlide from './TextSlide';
import loadable from '@loadable/component';
import SwiperCore, { Controller, Pagination, Mousewheel, EffectFade, EffectCoverflow } from 'swiper';
import { Swiper, SwiperSlide } from 'swiper/react';

// Styles
// ------
import 'swiper/swiper.scss';
import 'swiper/components/controller/controller.scss';
import 'swiper/components/effect-fade/effect-fade.scss';

import {
    Jacket,
} from './styles';


// Component
// ------
SwiperCore.use([Controller, Pagination, Mousewheel, EffectFade, EffectCoverflow]);

const ImageSlide = loadable(() => import('./ImageSlide'));

const Slider = ({ content }) => {
    const [controlledSwiper, setControlledSwiper] = useState(null);

    const animationReset = {
        targets: '.swiper-slide .word .char',
        opacity: 0,
        duration: 1
    }

    const animationIn = {
        targets: '.swiper-slide-active .word .char',
        opacity: 1,
        translateY: [100, 0],
        delay: anime.stagger(50),
    }

    const animationOut = {
        targets: '.swiper-slide-active .word .char',
        opacity: 0,
        translateY: -50,
        delay: anime.stagger(50),
    }

    const imageSlider = {
        loop: true,
        speed: 750,
        direction: "vertical",
        slidesPerView: 1,
        grabCursor: false,
        watchSlidesProgress: true,
        effect: "coverflow",
        coverflowEffect: {
            rotate: 120,
            slideShadows: true,
        },
    }

    const textSlider = {
        loop: true,
        slidesPerView: 1,
        speed: 750,
        grabCursor: true,
        watchSlidesProgress: true,
        mousewheel: true,
        direction: 'vertical',
        effect: "fade",
        fadeEffect: {
            crossFade: true
        },
    }

    useEffect(() => {
        const Splitting = require('splitting');
        Splitting({ target: '.title-text' });
    }, []);

    return (
        <>
            <Jacket>
                <Swiper
                    {...imageSlider}
                    className="image"
                    onSwiper={setControlledSwiper}
                    pagination={{ type: 'progressbar' }}
                >
                    {content.featuredWork.map(({ featuredImage }, i) => (
                        <SwiperSlide key={i}>
                            <ImageSlide image={featuredImage.fluid} />
                        </SwiperSlide>
                    ))}
                </Swiper>

                <Swiper
                    {...textSlider}
                    className="text"
                    controller={{ control: controlledSwiper }}
                    onSlideChange={() => anime(animationOut)}
                    onSlideChangeTransitionStart={() => anime(animationOut)}
                    onSlideChangeTransitionEnd={() => anime(animationIn)}
                    onInit={() => setTimeout(() => { anime(animationIn) }, 25)}
                    onReachBeginning={() => anime(animationReset)}
                    onResize={() => anime(animationIn)}
                >
                    {content.featuredWork.map(({ titleLine1, titleLine2, projectLink, featuredImage }, i) => (
                        <SwiperSlide key={i}>
                            <TextSlide first={titleLine1} second={titleLine2} projectLink={projectLink} image={featuredImage} />
                        </SwiperSlide>
                    ))}
                </Swiper>
            </Jacket>
        </>
    );
}

export default Slider;

Expected Behavior

If you view desktop its perfect. Smooth. Just perfect.

Actual Behavior

On mobile its really janky

[snimavat]

i m facing similar issue on mobile, the swipe is jerky. I am using swiper vue component…

@joebentaylor1995 can u add some more details on ur fix

[roeeyossef]

adding cssMode: true solved the issue for me.