Jump to content
Search Community

Updating visual slider counter text

iamrufus test
Moderator Tag

Recommended Posts

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

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...