infinite Slider PIXI JS

Question

Hello :) I have tried to create an infinite slider like this website below: https://www.lamadone.studio/

I have almost recreate it but I have just an issue, the scroll is very too quick and I can't stop it. I don't know where is my issue in this code below:

class Sketch{
    constructor(){
 
        document.body.appendChild(this.app.view);
        this.margin = 50;
        this.scroll = 0;
        this.scrollTarget = 0;
        this.width=(window.innerWidth -2*this.margin)/3;
        this.height = window.innerHeight*0.8;
        this.container = new PIXI.Container();
        this.app.stage.addChild(this.container);
        this.images = [t1, t2, t3, t4, t5];
        this.WHOLEWIDTH = this.images.length*(this.width + this.margin)

        loadImages(this.images, (images)=>{
            this.loadImages = images;
            this.add()
            this.render()
            this.scrollEvent();
        })

  
    }


    scrollEvent(){
        document.addEventListener('mousewheel', (e)=>{
            this.scrollTarget = e.wheelDelta/3
        })
    }

    add(){
        let parent = {
            w: this.width,
            h: this.height,
        }
        this.thumbs = []
        this.loadImages.forEach((img,i)=>{
            let texture = PIXI.Texture.from(img.img)
            const sprite = new PIXI.Sprite(texture);
            let container = new PIXI.Container();
            let spriteContainer = new PIXI.Container();

            let mask = new PIXI.Sprite(PIXI.Texture.WHITE)
            mask.width = this.width;
            mask.height = this.height;

            sprite.mask = mask;


            sprite.anchor.set(0.5);
            sprite.position.set(
                sprite.texture.orig.width/2,
                sprite.texture.orig.height/2,
            )

            let image = {
                w: sprite.texture.orig.width,
                h: sprite.texture.orig.height,
            }

            let cover = fit(image, parent)

            spriteContainer.position.set(cover.left, cover.top)
            spriteContainer.scale.set(cover.scale, cover.scale)

            container.x = (this.margin + this.width)*i;
            container.y = this.height/10

            spriteContainer.addChild(sprite);
            container.interactive = true;
            container.on('mouseover', this.mouseOn)
            container.on('mouseout', this.mouseOut)

            container.addChild(spriteContainer)
            container.addChild(mask);
            this.container.addChild(container);
            this.thumbs.push(container);


        })
    }

    mouseOut(e){

        let e1 = e.currentTarget.children[0].children[0];
        gsap.to(e1.scale,{
            duration:1,
            x:1,
            y:1
        })

    }

    calcPos(scr, pos){

        let temp = (scr + pos + this.WHOLEWIDTH + this.width + this.margin)%this.WHOLEWIDTH - this.width - this.margin

        return temp;

    }

    mouseOn(e){
        let e1 = e.target.children[0].children[0];
        gsap.to(e1.scale,{
            duration:1,
            x:1.1,
            y:1.1
        })
    }

    render(){
        this.app.ticker.add(() => {
            this.app.renderer.render(this.container);

            this.scroll -= (this.scroll - this.scrollTarget)*0.1;
            this.scroll *=0.9
            this.thumbs.forEach(th=>{
                th.position.x = this.calcPos(this.scroll, th.position.x)
            })
        });
    }


}

new Sketch();

Thank you in advance for your return :)

score 0 · Answer 1 · answered Jan 23 '21 at 16:00

0

I suspect that this.scrollTarget is the velocity of your scrolling animation, right?

If yes, then i suppose you want to deaccelerate animation after mouse scroller was used - to do this you should decrease this.scrollTarget value.

try replacing this line:

this.scroll *=0.9

with:

this.scrollTarget *= 0.9

Another thing: please be careful when using e.wheelDelta - see: Normalizing mousewheel speed across browsers

answered Jan 23 '21 at 16:00

domis86

1,227
11
9

Hello, @domis86 thank you for the next time, I could resolve my issue, but i have an other one, I tried to make a canva which can scroll on mobile and desktop. I have succeeded to scroll on desktop and even with touchpad, but i can't to find a way to scroll on my mobile. I have already manage the scroll with mouse wheel but i haven't succeeded with touchscreen – Kévin Wernet Feb 04 '21 at 18:14
for that other problem you should add update to your question, or post new question. Also you should add code snippet - would be good if it is executable (via jsfiddle, codesandbox etc) so people will easily see what is the problem that you are facing. This way you have better chance to get right answer :) – domis86 Feb 04 '21 at 23:07

infinite Slider PIXI JS

1 Answers1