MCBS Posted December 14, 2023 Share Posted December 14, 2023 Hi, I'm trying to create a section (ideally a timeline). In this section there are 3 parts: 1) "intro": a div pinned 2) "marker" indicates scrolling level of history 3) History: list of milestones Additionally, I'm trying to place two divs (on top and bottom) with a gradient, to give effect to "gradually disappear" on History. I'm not very confident on this code, I think there's a way better to reach same result.. Also, this is not responsive, and my tests with refresh() or kill() doesn't work as expected. See the Pen vYbqOBX by smino (@smino) on CodePen Link to comment Share on other sites More sharing options...
Rodrigo Posted December 14, 2023 Share Posted December 14, 2023 Hi @MCBS and welcome to the GSAP Forums! Your code is actually doing what is supposed to, it's a nice effect for the reveal/hide under the top bottom gradients. The only thing I'd advise you is to change ScrollTrigger matchMedia (which is now deprecated) for GSAP MatchMedia: https://gsap.com/docs/v3/GSAP/gsap.matchMedia() Finally in terms of responsiveness: what is exactly the issue here? I see the list overflowing, but most likely that has to do with CSS rather than GSAP: The issue seems to come from something in your HTML/CSS, honestly I can't seem to understand why you have all these pseudo classes here: .marker-wrapper { .marker { &:before { content: ""; background: var(--color_light); position: absolute; width: 22px; transform: translateX(-11px); left: 50%; height: 3000px; bottom: 8px; z-index: 1; opacity: .1; } @media(min-width: $lg) { &:before { width: 36px; transform: translateX(-18px); } } @media(min-width: $xl) { &:before { width: 44px; transform: translateX(-22px); } } @media(min-width: $xxl) { &:before { width: 66px; transform: translateX(-33px); } } } } I've created and seen plenty of similar demos that work as expected and have no issues with responsiveness: See the Pen JjwdBJG by GreenSock (@GreenSock) on CodePen I created a fork of your demo and what gets my attention is that even with this simple ScrollTrigger instance, the start marker gets shifted when resizing the browser window: See the Pen abXgdZR by GreenSock (@GreenSock) on CodePen Oddly enough this happens only in chrome, on firefox (both tested in ubuntu 20 & 22) it works without any issue. I would strongly recommend you to simplify your HTML/CSS as much as possible in order to have even a single simple ScrollTrigger instance working as expected first, then move on to adding more ScrollTrigger instances. Happy Tweening! 2 Link to comment Share on other sites More sharing options...
MCBS Posted December 15, 2023 Author Share Posted December 15, 2023 I updated my original pen, replacing variables with functions, and fixing marker css (I forgot position: relative). The before pseudo class on .marker is a trail of marker (which changes his dimensions due to breakpoints). My primary issue is that resizing browser window, top and bottom gradients don't pin exactly on top/bottom of the trigger section, in some cases it's very wrong. I don't understand if it is an error in my code, or a wrong refresh of scrolltrigger, or else. Link to comment Share on other sites More sharing options...
mvaneijgen Posted December 15, 2023 Share Posted December 15, 2023 I've been resizing the page from small to big, big to small, but I see no issue. Also I see a lot of developers complaining about "it breaks if I resize", but I've never come across a 'normal' visitor that goes half way through a page and then goes "let me resize my browser now that I've seen half of the page", this is only something we as developers do to check our break points. So I don't know how much time wasting on that edge case no one will ever see is worth it, but maybe that's just me? Can you maybe elaborate what browser/OS you're using? GSAP is really smart and it will 'cache' all your values if you don't specifically tell it to recalculate its values. You can do this by passing in a value // This will cache the value y: getScrollDistance(), // This will get a new value when calling ScrollTrigger.refresh() y: () => getScrollDistance(), Hope it helps and happy tweening! 3 Link to comment Share on other sites More sharing options...
MCBS Posted December 18, 2023 Author Share Posted December 18, 2023 I tried another approach, pinning the entire section and scrolling the content (also thanks to some pen found around). I like this result, and works well on any resolution, but responsive still not working as expected. Is there a listener or a function I can use to force recalculation? "refreshInit" and refresh() seems not to work (I think I'm doing it wrong). Here new pen: See the Pen jOdgzRP by smino (@smino) on CodePen Link to comment Share on other sites More sharing options...
Rodrigo Posted December 18, 2023 Share Posted December 18, 2023 Hi, As mentioned before this is not a GSAP related issue, but something that stems either from the calculations you're making or your HTML/CSS setup. Here is a super simple demo that borrows the top/bottom gradient concept while pinning an entire section and moving one of the columns of said section: See the Pen vYbovRq by GreenSock (@GreenSock) on CodePen As you can see there is no responsive issue at all there. I still think that you could and should simplify this a bit. Hopefully this helps. Happy Tweening! 1 Link to comment Share on other sites More sharing options...
MCBS Posted February 6 Author Share Posted February 6 I haven't been able to simplify the code and do any testing yet, but for now thank you all for your input, I think that's not really gsap related issue. 1 Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now