sashaikevich

Hi @Carl, I recognize your logo! I've been watching your youtube videos! Thanks for the link. Your Beyond The Basics series might be what I"m looking for. I'll have to check that out,... and check out Framer Motion. I'm not sure yet which deep dive I want to take. There's just so much interesting stuff to learn, you know. Anyway, thanks!

Let me begin by saying that this community is fantastic! Over the last few years I picked up a wealth of knowledge, and feel comfortable recreating most animations individually. What I feel I need now, is a deeper understanding of the more advanced stuff. Topics like: - How to monitor if the element is on screen and/or best practices for handling the listeners to minimise resource load (by throttling, by destroying listeners, etc) - Scroll smoothing approaches (via a library like locomotive or using gsap's scrub) Basically I want to take a deep dive into how sites likes these are made: https://ferrumpipe.com, https://revistaelduende.com Have you any forum posts or external resources / tutorials (free or paid) that you can point me to? Thank you!

Thanks, will do!

Is there a submit / vote page for the demos? With some key assists from the gsap community, I now have a site I'm genuinely proud of. It would be cool if it were added to the showcase. I'm wondering if there's a process for that?

It's so smooth in Safari. Meanwhile Chrome is strobing like it's a techno rave. Do you think moving the animation to canvas would help? (I know nothing about canvas, and before I go down that rabbit hole, I'd like to find out if its even worth it)

Ok, so if this can be called narrowing it down...I only see the issue on my 4k monitor. When I switch over to my 1920 no issue! I swear debugging is like 95% of my time... Any ideas what could be causing this behaviour?

Thanks for the quick reply and the ideas. The will-change didn't help. Nor did force3d. Oddly adding a width did, which is what I might have had when you loaded the animation. This simple line fixed it in my demo .tidy-team-layered-wrapper { width: 70vmin; But in my project the flickering remained, so width is not enough. Though why that of all things fixed the flicker I do not know. Gha! (I removed it from the demo, so the issue should be visible again)

As my animation runs, and the layers transition through their x, y, z rotations and font size (which does something fun with the perspective) I"m getting this weird flicker in Chrome that I've noticed in the last 24 hours. I've learned here, that flickering might be a chrome bug, but the "will-change" fix didn't do it for me there. Is there anything else you guys can think of for me to try? I set up a demo of just the problematic component, but the flickering isn't there 100% of the time: https://codepen.io/sashaikevich/pen/poymMvK?editors=0010

Got it to work! For anyone interested, here is GS's pen that was particularly helpful: https://codepen.io/GreenSock/pen/QEdpLe?editors=0010

Thanks @ZachSaucier!

I recall seeing a nice marquee example, but I can't track it down. Undoubtedly this is a common use-case for a horizontal marquee / scroller (logos, testimonials, etc.). I'd like the beginning of the next animation to trail the end of the one that's about to end. As it is, I have a space between the two. Please point me to the example, or check out my code and codepen below: gsap.timeline({ repeat: -1, defaults: { ease: "none", }, }) .fromTo( ".card", { x: (i, el) => innerWidth * i }, { x: (i, el, t) => -innerWidth * (t.length - i ), duration: d, } ); Thanks

Thanks for the quick reply! I'll go rewrite some stuff...

@ZachSaucier, thank you very much for all your help, every time I get something working I get so excited (and come up with 10 more animation ideas)! I have just a small thing left (hopefully), and this page that's been 1 year in the making will be perfect! I still cannot get the elements to recalculate their animations in relation to the new innerWidth/Height after a window resize. When I added invalidateOnRefresh: true property to all my ST objects that seemed to do the trick, BUT as a side effect many of my elements lost their correct positions. I did a quick check, and I think its everything with the .from() method that's been affected, because my few remaining fromTo animations are still correct (but it might be others as well (.to() maybe, or .set()?). If I understood your animation guide correctly, the fewer .fromTo() methods - the better, but is that still the case here? Should I go back to using .fromTo() animations and add invalidateOnRefresh OR, should I keep my .from() and my .to() animations and do something else instead of invalidateOnRefresh? I've included a simplified version of my code below if it helps. (Maybe it's some other rookie mistake that's interfering) function customCode() { gsap.registerPlugin(ScrollTrigger); ScrollTrigger.matchMedia({ // all "all": function () { gsap.set(...); }, // desktop "(min-width: 1024px)": function () { let instWrapperHeight = Math.floor(document.querySelector(".instructions-items-wrapper").getBoundingClientRect().height); function distFromBottom(el) { return instWrapperHeight - (Math.floor(el.offsetTop)) + el.offsetHeight * 1.5; }; gsap.timeline({ scrollTrigger: { ... end: () => innerHeight * 4, } }) .to(".welcome-splash", { y: () => -innerHeight * 0.5, }) .fromTo(".text-bold", { y: (i, el) => distFromBottom(el), }, { y: 0, }) // SCENE show options gsap.timeline({ scrollTrigger: { end: () => "+=" + innerHeight * 6, } }) .fromTo(".option-3", { x: () => innerWidth * .1, y: "-100%", }, { y: () => innerHeight }) } }); ScrollTrigger.sort(); let allST = ScrollTrigger.getAll(); let allSTProgress; ScrollTrigger.addEventListener("refreshInit", function () { allSTProgress = allST.map((st) => st.progress) }) ScrollTrigger.addEventListener("refresh", function () { allST.forEach((st, i) => st.progress = allSTProgress[i]) }) } window.addEventListener("load", (e) => customCode()); What do you recommend I do?

Thank you. That explains why there's tl.invalidate(); in the demos I came across.

Sweet! I knew GS must have a clever way! Praise be GS creators, praise be. Cool. That would explain why some of my animations work on resize automatically, while others do not. Time to refactor