ajmnz

Updated the one from yesterday: https://codepen.io/ajmnz/pen/JjXwbOg What I want to achieve is having that xPercent and yPercent values (inside animFill, animOutline and animSlide) to actually increment (+=100) every time the master timeline is played or reversed. Maybe there's a way to redeclare the target before calling play() and reverse() or something like that?

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.

Thank you!

Hey Zack! Thanks for the fast reply. I will definitely take a look at that article and surely it'll help me understand better how to manage GSAP efficiently. On the other hand, by you mean the callback firing within onComplete, right? I really appreciate this feedback too, didn't know of xPercent and yPercent! And finally, if that's not an inconvenience, could you please specify what do you specifically mean by this statement? Many thanks for the help and the quick and useful reply!

Hello, First of all, sorry for just copying and pasting the whole project, but I didn't have enough time to replicate the issue in a minimalistic way. Hope it's useful to solve the problem I'm facing. I'm currently working on my personal site which its homepage consists of a slider. When the slide changes, a div covering the whole viewport with a background image should also change accordingly. It is done using gsap.timeline() and as you can notice, there's a really noticeable amount of lag when the animation happens. Without the background change, everything is smooth. Tested on a 2018 15inch Macbook Pro running macOS Catalina 10.15.6 on Google Chrome v84.0.4147.89 (laggy), Firefox v79.0 (really really laggy) and Safari v13.1.2 (somehow smooth). Thank you in advance, Arnau. ps: I was just testing and I know the background image is incredibly stretched, already tried with a properly sized one and same results. ps2: As of now, only the next page button works ("següent").