Hi again,
After reading the article you recommended me and applying some of the suggestions, this is what I came up with.
// Animate title outline
const animOutline = () => {
const title_ease = 'power2.in',
title_stag = 0.02,
title_anim = gsap.timeline({
defaults: {
ease: title_ease,
stagger: title_stag
},
});
title_anim
.to(".title-outline .char", {
yPercent: '+=100'
})
return title_anim;
}
// Animate title fill
const animFill = () => {
const title_ease = 'power2.in',
title_stag = 0.02,
title_anim = gsap.timeline({
defaults: {
ease: title_ease,
stagger: title_stag
},
});
title_anim
.to(".title-fill .char", {
yPercent: '+=100'
})
return title_anim;
}
// Animate image
const animSlide = () => {
const slide_ease = CustomEase.create('custom', '0.76, 0, 0.24, 1'),
slide_dur = 0.6,
slide_anim = gsap.timeline({
defaults: {
ease: slide_ease,
duration: slide_dur
},
});
slide_anim
.to(".image-wrapper img", {
xPercent: '-=100'
})
return slide_anim;
}
// Create and add timelines to the master one
const master = gsap.timeline({
paused: true
})
master.add(animOutline())
.add(animFill())
.add(animSlide())
$('.slider-nav').on('click', function (ev) {
if (ev.target.classList.contains('slider-previous')) { // If previous slide
master.reverse()
} else if (ev.target.classList.contains('slider-next')) { // If next slide
master.play()
}
})
The thing is that I need that xPercent and yPercent to increase anytime that the master timeline is played or reversed. What I suspect is that, if I want to keep using play() and reverse(), I need to somehow update the target, but I don't know how. Maybe by remaking the whole timeline, but that would kill the efficiency pointed out later.
Hope that snippet is enough, if not, I'll try to recreate it in a codepen.