Creating a slider which slides the the width of each individual element.

[Soundgeist]

hi, I wanted to create a Slider which slides the width of each individual element. The elements are images so they all have a different width.

For this i created a array with the widths of each element. So i loop through that array to add it to the timeline. Unfortunately this doesn't check out as i wanted it.

See the Pen WNobggq by Soundgeist (@Soundgeist) on CodePen

[Soundgeist]

I figured it out myself.

the problem was that i was using

 

x: {with of next element}

That meant that i was always sliding the element width relative to the starting position.

 

Now I add the width of the next element to the width of all previous Elements.

 

var realSlideWidth = 0;

    for (let i = 0; i < slideWidth.length; i++) {

    	realSlideWidth += slideWidth[i];

        t1.to('.gallery-slider', {x: -realSlideWidth, duration: slideDuration});

    }