gmullinix
Content Type
Profiles
Forums
Store
Blog
Product
Showcase
FAQ
Downloads
Posts posted by gmullinix
-
-
Would it be possible to add a feature to Scrolltrigger to support multiple start values?
Here's the use case: I have an element with a start value of "top 40%". However it's a short div located near the end of the page. On certain mobile devices, the top of the div never reaches the 40% mark, so the Scrolltrigger never fires. If I could pass in a second start value of "bottom bottom" as backup, then I know the tween will always fire regardless of the screen size.
I know a workaround is to set up two ST's with different start values using matchMedia, but was hoping for a simpler solution.
Possible way it could look, passing in an array of values:
gsap.from("#el", {scrollTrigger: {trigger: "#el",start: ["top 40%", "bottom bottom"]},y: 200}); -
On 11/16/2020 at 5:14 PM, ZachSaucier said:
Why's that? Using will-change is exactly what I was going to recommend
Habit, I guess. 😄
QuoteIf you're going to load and use GSAP, why not animate with GSAP instead of using CSS transitions?
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!
-
1
-
-
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 at bugs.chromium.org? Hesitant to use will-change unless there's no other solution.
-
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 never appear.
-
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 bugs like this before? Any suggestions or theories on how to fix it for Chrome?
-
This works beautifully! Thank you for the quick reply, and also thank you for the cleaner syntax in the horizontal_scroll_tl scrollTrigger object.
-
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 codepen, you will see the red squares in panels #B and #C animate even though they are not at "top 0%". I'm assuming pinning the main wrapper is causing the issue.
You can also see some commented out code that fixes the problem, but there's a whole function involved with extra steps to get the correct math. In my actual project, I have 20+ divs to animate below the fancy one, and would prefer to not customize a start function for all of them.
Any suggestions on how to fix this code so
a) all of the panels stick together on the screen, and
b) the panels under the fancy panel animate at the appropriate start point?
Thank you for your time!
-
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?
-
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.
-
3
-
1
-
-
@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.
-
3 hours ago, ZachSaucier said:
No, it is still in a private testing phase.
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.)
-
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.
-
1
-
-
-
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/
-
See the Pen ydrGYw by chriscoyier (@chriscoyier) on CodePen
-
See the Pen EBLZVG by chriscoyier (@chriscoyier) on CodePen
- https://www.minimamente.com/project/magic/
- https://daneden.github.io/animate.css/
- https://css-tricks.com/css-animation-libraries/
-
https://tympanus.net/Development/PageTransitions/
-
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
-
2
-
-
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(s), 4 Logical Processor(s)
BaseBoard Manufacturer Gigabyte Technology Co., Ltd.
Installed Physical Memory (RAM) 16.0 GB
Total Physical Memory 16.0 GB
Available Physical Memory 10.3 GB
My coworkers were able to see the bug. Some of them have similar desktops and some don't (laptops, different manufacturers, etc). We are all running Windows 10.
Can confirm that a negative z-index on the purple square fixed the issue. I also figured out that backface-visibility: hidden on the green squares fixes the issue too.
When making the bug report, I wanted to link to a Codepen like I did here to help illustrate the problem. However, I'm not sure how to re-create it without Greensock. As demonstrated in the second Codepen, CSS animation doesn't appear to break. Any ideas?-
1
-
-
I'm noticing a strange issue when combining transforms and animations. Divs are being covered by other divs when they shouldn't be. However this only happens at large screen sizes, and only on Chrome and Chromium Edge.
It's a little bizarre to explain and hard to replicate so please bear with me.
Please view Codepen #1 at full screen and in "full page" view:- The green boxes should always be on top of the purple square.
- At HD size (1920x1080) it displays as expected.
- However, once you view it on a 4K monitor (either simulated with device mode or on an actual monitor), the green square on the right is covered by the purple square.
Some comments about this:- If you add force3D: false to the tween, the bug will not happen.
- If you remove one of the transforms (either on the purple square, or on #main_wrapper), the bug will not happen.
- The square's position on the gray stage can impact whether the bug happens or not. Originally all 3 squares were positioned on the left side of the stage, and there was no bug at any screen size.
- z-index doesn't help or change anything.
This is where it gets weird(er). Please view Codepen #2 at full screen and in "full page" view:
See the Pen poJbdoQ by gem0303 (@gem0303) on CodePen
- I added a second set of boxes which uses a translateX CSS animation to move the blue box. The presence of the CSS animation code fixes the bug. The green squares appear on top of everything at all screen sizes.
- The CSS animation has to be a transform, though. If you do an opacity animation, the bug comes back.
- ???
Additional comments:
- This same bug can happen if you are doing transform animations with png images.
- Sometimes the bug can happen at a 2K screen size. But it never seems to happen at 1920px width or lower.
I'll probably end up reporting this to Chrome because it seems more their issue than GSAP's. However I wanted to see if anyone here had run into this issue or had any insight.
The only consistent workaround we've found is setting the timeline default to force3D: false.
-
I would also like to see this feature come back. There are certain cases where it's better to keep the css styling separate, and use gsap to animate the state change via "className".
-
I changed my code as Zach suggested. Thanks for the quick update!
-
-
Thank you for looking into this and putting a fix in the next release! I reported the issue on VideoJS's Github.
-
1
-
-
Loading GSAP 3 and then VideoJS (in that order) breaks VideoJS. In my Codepen, the video is still playable, but VideoJS doesn't initialize and there's a few console errors.
FYI If I reverse the load order, everything works fine.
Any idea what's going on?
-
I have an SVG path styled to look like a dotted line. I want the path to look like it's drawing in. I created a mask and tried to animate the mask path but it refuses to draw.
In the Codepen example, I found that the mask animation worked if I modified the SVG and gave the path a few bends. Does the straight line confuse DrawSVG because it doesn't know what the start/end points are? How can I get the straight line's mask to animate?
edit: Fix appears to be adding maskUnits="userSpaceOnUse" to the mask definition in the SVG. Stack Overflow link
-
1
-
-
That's what I was missing, thanks!
-
2
-
ScrollTrigger feature request: multiple "start" options
in GSAP
Posted
Got this working for two different scenarios I often run into. I'm happy with the solve for #1, but would appreciate some eyes on my solve for #2
Scenario #1 ---------------------
Problem: Div height changes because of media query
Solution: Swap start value at breakpoint using MatchMedia
In this example, the pages are full height above 769px but swap to height: auto for mobile. Since there is a clear pixel value for the breakpoint, I used Match Media contexts to change my start value. Seems pretty straightforward and easy to code. 👍🏻
See the Pen LYqNmJJ by gem0303 (@gem0303) on CodePen
Scenario #2 ---------------------
Problem: Div height changes because translated text is different lengths
Solution: Start function checks the height of the div and returns different start point if div is too short
Some context on this example: we create content that is translated into 20+ languages. Some languages have very long translations (German, Russian) while others are quite short (symbol languages like Japanese and Korean). This means we occasionally run into short languages not triggering start values depending on layout and/or screen size. We typically avoid coding custom animations on a per-language basis because we build tons of these.
In my solution, I wrote a function that checks the div height against the window height and returns a different start value if needed. Haven't tested thoroughly but seems to be working ok. Thoughts? I couldn't figure out how "clamp()" would help me in this instance (though the video linked by @mvaneijgen was excellent, thank you for including it).
See the Pen LYqNrxo by gem0303 (@gem0303) on CodePen
I envisioned the Scrolltrigger would be watching both of the start values and fire when it hits either/any of them. Subsequent hits would just be ignored.