Jump to content

Search In
  • More options...
Find results that contain...
Find results in...


  • Content Count

  • Joined

  • Last visited

Community Reputation

4 Newbie

About sashaikevich

  • Rank
    Advanced Member
  1. 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?
  2. 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)
  3. 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?
  4. 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)
  5. 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
  6. Got it to work! For anyone interested, here is GS's pen that was particularly helpful: https://codepen.io/GreenSock/pen/QEdpLe?editors=0010
  7. 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) =>
  8. @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 quic
  9. Thank you. That explains why there's tl.invalidate(); in the demos I came across.
  10. 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
  11. Thanks GS team for providing the Keeping ScrollTrigger same progress on resize codepen. How can I adapt this part of the code for multiple ScrollTriggers? ScrollTrigger.addEventListener("refreshInit", () => progress = ST.progress); ScrollTrigger.addEventListener("refresh", () => ST.scroll(progress * ScrollTrigger.maxScroll(window))); I have 12 ScrollTriggers set up, and they are all set up anonymously, like this: gsap.timeline({ scrollTrigger: {... How can I reference and update the progress for each one? I'm hesitant to rewrite them with separate
  12. I think this got it to work, though there is probably a more elegant way. Thanks again! https://codepen.io/sashaikevich/pen/abNQqRz