Ramate

@Rodrigo it's finally fixed! It was my mistake on forgetting to refactor the way I was retrieving the height of some elements, that was necessary at certain point, but not anymore. Code blindness 😅 But it totally worth, as i didn't know that way of indenting and identifying the markers. That's soooo useful!!! Thanks a lot! Thanks to @mvaneijgen too

Thanks a lot for the answer @mvaneijgen. Yes, I am aware about the capabilities (and magic) of the timeline, but thanks for remembering. In the example function above, I use class toggling as a decision, as I am not planing actually to animate with a transition as the timeline could, but take advantage of the triggers to change the state from visible to invisible in each element, synchronised with my content. I could use display:none; for example, by removing the elements totally and adding it back. In the exemple function above I switch the visibility of one Lottie animation to the next animation, so I fake a seamless animation. One element appears exactly in the time and position the other disappears. My animation is made in many pieces (as required from the design I have). The animations themselves are actually controlled by lottie player in the case of my project. You can see it here: http://kunden.brueckner.studio/frankwords/ /// Unfortunately I could not reproduce the bug as I can see in my project on CodePen. There it seams I have a kind of limitation on the definition of the scroller defaults, (maybe) so it is quite not related to my trouble of resizing the window. So I would not focus on the minimal demo. But I add it here anyway. (: https://codepen.io/QuitoSometimesMarcos/pen/xxBawaM?editors=1111 /// So I still in the trouble of refreshing the markers after resize, when I have the scrolltriger defaults pointing another scroller. Any ideas? Thanks

Hello, I am using Scrolltrigger to animate several elements of my project. Everything works fine until I resize the window. I am already using ScrollTrigger.refresh(); everytime any element can potentially modify my flow, it still not working. I suppose my problem is caused by a custom container I am using as scroller to avoid the weird resizing on mobile browsers, I wrapped my content on and it works fine. But still thought the markers are not being updated when i resize the window. ScrollTrigger.defaults({ scroller: "#scrollable-container", }); Here is one example animation: function manageScrollAnimations() { //// CHANGE ANIMATION OPACITY ON SCROLL const contentRows = document.querySelectorAll(".has-animation"); contentRows.forEach((row, index) => { const animation = row.querySelector(".animation"); if (index !== 0 && index !== contentRows.length - 1) { animation.classList.add("invisible"); } ScrollTrigger.refresh(); ScrollTrigger.create({ trigger: row, start: "top center", end: `bottom center`, onEnter: () => { animation.classList.remove("invisible"); }, onLeave: () => { if (index !== contentRows.length - 1) { animation.classList.add("invisible"); } }, onEnterBack: () => { animation.classList.remove("invisible"); }, onLeaveBack: () => { if (index !== 0 && index !== contentRows.length - 1) { animation.classList.add("invisible"); } }, markers: true, scrub: true, }); }); //// resize window.addEventListener("resize", handleResize); function handleResize() { manageTopBarTextAnimations(); positionAnimatedWords(); updateTopBarHeight(); resizeAnimationWrappers(); manageScrollAnimations(); ScrollTrigger.refresh(); } I am kind of running out of options. I read something about ScrollTrigger.scrollerProxy, that (maybe) can solve my problem (not sure), but I could not understand how to implement it. I also used a eventListener, it logs and still thought the markers nothing. ScrollTrigger.addEventListener("refresh", function () { console.log("Refreshed"); }); Here is the link of the project, as a code pen would not serve the issue. http://kunden.brueckner.studio/frankwords/ Any thoughts about what can be wrong? Thanks a lot ✨

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});