Updating visual slider counter text

[iamrufus 1 Likes (Newbie)]

Hi GSAP

 

Just looking for some advice on how to increase and decrease my visual slide counter text during my slider transition. Here is a code pen as an example

 

At the moment i have added the text to update after the timeline but as you can see it changes it before is fades the opacity out in the timeline. What i want is the opacity to fade out, the number to change and then fade back in.

 

Hope this kind of makes sense.

 

class Slider {
    constructor(slider) {
        this.slider = document.querySelector(slider);
        this.container = this.slider.querySelector('.slider--container');
        this.counter = this.slider.querySelector('.slider--counter--current');
        this.slides = this.slider.querySelectorAll('.slider--slide');
        this.slideTxt = this.slider.querySelectorAll('.slider--txt');
        this.slideWidth = this.slider.querySelector('.slider--slide').clientWidth;
        this.nextSlide = this.slider.querySelector('.next');
        this.prevSlide = this.slider.querySelector('.prev');
        this.currentSlide = 0;
        this.nextSlide.addEventListener('click', () => {
            this.slideNext();
        });
        this.prevSlide.addEventListener('click', () => {
            this.slidePrev();
        });
    }

    slidePrev() {
        if (this.currentSlide === 0) {
            return;
        } else {
            this.currentSlide--;
            sliderTl
                .to(this.container, {
                    x: -this.slideWidth * this.currentSlide
                })
                .to(this.slideTxt[this.currentSlide], {
                    xPercent: 0
                }, '-=1')
                .to(this.counter, {
                    opacity: 0,
                    y: 5,
                    duration: .3
                }, '-=1')
                .to(this.counter, {
                    opacity: 1,
                    y: 0,
                    duration: .3
                }, '-=.5')
                
                this.counter.innerText = `0${this.currentSlide + 1}`
        }
    }
    slideNext() {
        if (this.currentSlide === this.slides.length - 1) {
            return;
        } else {
            this.currentSlide++;
            sliderTl
                .to(this.container, {
                    x: -this.slideWidth * this.currentSlide
                })
                .to(this.slideTxt[this.currentSlide - 1], {
                    xPercent: -65
                }, '-=1')
                .to(this.counter, {
                    opacity: 0,
                    y: 5,
                    duration: .3
                }, '-=1')
                .to(this.counter, {
                    opacity: 1,
                    y: 0,
                    duration: .3
                }, '-=.5')
                this.counter.innerText = `0${this.currentSlide + 1}`
        }
    }
}

let mySlider = new Slider('.slider--1');
const sliderTl = gsap.timeline({
    defaults: {
        duration: 1,
        ease: 'power2.inOut'
    }
});

 

See the Pen gOPEbpL by iamrufus (@iamrufus) on CodePen

[ZachSaucier 7,127 Likes (Superhero)]

Hey Rufus. You can just use a .set() call to set the innerText: 

See the Pen XWXGbjX?editors=0010 by GreenSock (@GreenSock) on CodePen

 

I recommend checkout out the post about the position parameter if you haven't already:

 

[iamrufus 1 Likes (Newbie)]

Thanks so much for this Zach much appreciated! I shall check out the position parameter as well, still learning my way round javascript and GSAP.

 

Thanks a ton for your help