iamrufus Posted July 23, 2020 Share Posted July 23, 2020 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 More sharing options...
ZachSaucier Posted July 23, 2020 Share Posted July 23, 2020 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: 1 Link to comment Share on other sites More sharing options...
iamrufus Posted July 23, 2020 Author Share Posted July 23, 2020 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 1 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now