Ramate

Thanks a lot Rodrigo, I will definitely take a look on the resources you recommended, hope I can find a solution there. Also I will take a look on the possibility of removing the css filters to improve the performance. At the moment I know no other option to achieve the effect of merging bubbles, but there must be another option. Thanks again <3

Hey! I have been studying possibilities to create a repelling effect triggered by my cursor on the "blob-mask" elements of that animation I am creating. The fact is that, after trying different approaches, I have no idea how to do something like this. I found this topic and tried to apply what I leaned there. But the only thing I could do was to break my original code Does someone could give me some guidance on that task, I am pretty lost. Thanks a lot!

Thanks for your answer, @OSUblake. I experimented changing the duration to really small or really big values and now I can see how it influences. It was kind of hard to determine the right duration, in my case it means that secondary animation should end together with the others. Is there a way to precise it?

Hello @Cassie, thanks a lot for your answer. It worked! ((((:::: Funny that I have been trying something similar before, adding the last animation to the first timeline, but in my attempt I didn't include the duration and position parameter. So I am now asking myself why the duration would influence the scrollTrigger, as the animation is connected to the scroll distance, and has no defined time in seconds. I am kind of surprised. Would you give me a glimpse of it? Thanks again!

Hello! I would like to have different animations triggered by the same scrollTrigger settings. Most of the animations are added to an Array with a loop, and they work pretty fine. One of them is not in the array and didn't worked until I created another timeline with the same scrollTrigger settings. So I was wondering if there is another (and more elegant) solution with just one timeline. Following the code I wrote until now. I could not add a codepen as I don't have an pro account to upload the assets. Thanks a lot! (: let tl = gsap.timeline({ scrollTrigger: { trigger: "#cover", start: "top top", end: "bottom top", pin: true, pinSpacing: false, scrub: true, markers: true, }, }); const delayValue = -30; tl.set(".slices", {opacity: 0, scale: 0.1, delay: delayValue}); const slices = gsap.utils.toArray(".slices"); // SHUFFLE ARRAY const shuffle = (arr) => { for (let i = arr.length - 1; i > 0; i--) { const j = Math.floor(Math.random() * (i + 1)); [arr[i], arr[j]] = [arr[j], arr[i]]; } return arr; }; const shuffled = shuffle(slices); // slices.forEach((slice) => { tl.to(slice, { scale: 1, opacity: 0.85, delay: delayValue, }).to(slice, { scale: 0.85, opacity: 0, }); }); // GRADIENT const gr1 = "linear-gradient(90deg, rgba(87, 103, 56, 1) 0%, rgba(204, 128, 97, 1) 20%, rgba(138, 128, 186, 1) 100%)"; const gr2 = "linear-gradient(120deg, rgba(138, 128, 186, 1) 0%, rgba(204, 128, 97, 1) 80%, rgba(87, 103, 56, 1) 100%)"; let tl1 = gsap.timeline({ scrollTrigger: { trigger: "#cover", start: "top top", end: "bottom top", pin: true, pinSpacing: false, scrub: true, markers: true, }, }); tl1.fromTo(".headline", {backgroundImage: gr1}, {backgroundImage: gr2});