Jump to content
GreenSock

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

gmullinix

Members
  • Content Count

    37
  • Joined

  • Last visited

Community Reputation

17 Newbie

About gmullinix

  • Rank
    Advanced Member

Recent Profile Visitors

1,589 profile views
  1. Habit, I guess. 😄 The menu is animated with GSAP. There was a CSS transition leftover in my CSS code for a different element that wasn't doing anything. I removed it for clarity. And good news, I was able to fix the issue with a force3D: false on the tween. Thanks for that tip!
  2. First of all, I'm pretty sure this is a browser issue and not any kind of bug in GSAP, but I'm posting here in hopes someone knows how to fix it. In the attached Codepen, the #main_wrapper is set up to transform: scale to fit the window. As the blue #menu animates left and right, it will leave behind some streaks of blue. The streaks only appear in Chrome and new Edge. The streaks will not appear if I remove the transforms on #main_wrapper. They also won't appear if I put a will-change: transform on #menu. Anyone have ideas on how to fix this, or should I open an issue
  3. It appears to be the OS scaling specifically. I was able to recreate the shaking effect in my project by scaling my display to 150% and viewing it in Chrome. Unfortunately, only my project breaks. Your Codepen works fine. I spent a few hours debugging and trying to pinpoint what is causing the error in my project, but was unable to isolate a specific cause. I have a lot of element and div heights based on vw and %ages, so perhaps that is the culprit. I also figured out if I set the #main_wrapper's overflow-y to hidden, it hides the issue since the extra scrollbar will n
  4. Had a bug report from a user on a 4K monitor who has the Windows OS zoomed/scaled. When he reaches the horizontal scroll section, the entire screen starts to shake. It appears that a scrollbar is rapidly appearing and vanishing on the #main_wrapper (the pinned div). If he turns off the Windows OS zoom, the problem goes away. The issue only happens in Chrome, not Firefox. He had the most current versions of both browsers. The problem also went away if I pin just the horizontal scroll section, though the effect isn't as nice (the panels don't stick together). Have you encountered bu
  5. This works beautifully! Thank you for the quick reply, and also thank you for the cleaner syntax in the horizontal_scroll_tl scrollTrigger object.
  6. I have a project with a bunch of panels, all stacked vertically. There are images inside some panels that animate via Scrolltriggers attached to that panel. There is also one fancy panel that gets pinned, content inside it animates horizontally, then the panel unpins at the end. However, I don't want the fancy panel to visually separate from the panels above and below it, so I made its Scrolltrigger pin the entire main_wrapper, with some custom math to determine the start pin location. However, this breaks the Scrolltriggers for panels underneath the fancy panel. In the
  7. I often play around with eases in the Ease Visualizer and copy the code from there, into my project. The code used to copy/paste cleanly, like this: ease: "power2.out" Now, it copy/pastes poorly with extra data: ease: " power2. out out" Did something change in the visualizer to break the old functionality?
  8. Set up your timeline as a .to like your second example, and then immediately set the progress of that timeline to 1. You might also want to pause the timeline by default, so there isn't a flash of animation as it starts to render before setting the progress. https://codepen.io/gem0303/pen/WNQxpOX
  9. @ZachSaucier Thanks for the info. We will do our best to be patient! In the meantime, we're going to use the Intersection Observer unless you have a different suggestion.
  10. My team is really interested in this as well. Is there an estimated release date for either a beta or final version? Any way to be notified when it's available? (I'm signed up for the newsletter but it seems like only big/major releases are announced there.)
  11. Getting some weird behavior when animating elements with the sine ease. The boxes should all start from display: none, animate to display: flex, and then animate back to display: none. However, boxes animated with the sine ease do not follow this logic and are set to display: flex at the wrong times. Additionally, sine vs sine.in seem to break in different ways. I tested with several other eases and did not encounter this same problem. Please see the Codepen for more details.
  12. I changed your "from" tween to a "fromTo" and it appears to animate as desired. Also, autoalpha automatically sets the "visibility" and "opacity" properties so no need to specify it in the tween. https://codepen.io/gem0303/pen/PoqGdyv
  13. Here's some places I have bookmarked. Obviously don't have to use the library, you can just recreate the effect on your own. Converting CSS animations to GSAP animations is good practice, too. https://tympanus.net/Development/PageTransitions/ jsfiddle version: http://jsfiddle.net/EbhdM/3/ https://codepen.io/chriscoyier/pen/ydrGYw https://codepen.io/chriscoyier/pen/EBLZVG https://www.minimamente.com/project/magic/ https://daneden.github.io/animate.css/ https://css-tricks.com/css-animation-libraries/
  14. @GreenSock Perfect, thank you for providing that! I will report to Chromium tomorrow. edit: reported here https://bugs.chromium.org/p/chromium/issues/detail?id=1054433
  15. @ZachSaucier Thanks for the link to info on the stacking context. The green squares already had a z-index (value of 70), and that was not changing anything. I added a z-index of 10 to the purple square and that didn't change it either. will-change: transform on the purple square didn't change anything. Here's some system specs for my desktop: OS Name Microsoft Windows 10 Home Version 10.0.18363 Build 18363 System Manufacturer Gigabyte Technology Co., Ltd. System Type x64-based PC Processor Intel(R) Core(TM) i5-6500 CPU @ 3.20GHz, 3201 Mhz, 4 Core
×