Jump to content

iDad5 last won the day on August 2

iDad5 had the most liked content!


  • Posts

  • Joined

  • Last visited

  • Days Won


Everything posted by iDad5

  1. Had another idea: A option there would be combining two range sliders <input type="range"> visually into one. In modern browsers to my experience there is a good chance of getting the desired look and fallbacks are not too hard to implement. Linking both would need javascript event-listeners but if accessibility is a concern for you that could probably be the best option. (You can make controls you built with gsap accessible, butt doing _ in your case - might require some extra effort...)
  2. iDad5

    Animation ligh

    You could (in theory) also duplicate the image itself if it is png or webp with transparency and use it as a mask and animate the the shine inside with a background position or css-custom-properties. That way you wouldn't need an svg for every image, if you need more than one. Even with using the css attribute selector maybe.... As i mentioned it is a theoretical possibility, and probably only worth the (testing-) effort id you need to be able to change the image via CMS or other frequent means. If that's the case, I'd be interested in the outcome, and happy to elaborate on my conceptual idea - without any guarantees...
  3. Could you share a URL (via PN not publicly)? I'd try to take a look, and I promise my lips are sealed (Nobody listens to me anyhow ;-))
  4. @GreenSock I actually had to look up how this works... It's a far too clever solution for me to ever use it though, as I might die of old age before figuring out what I have done there if I will ever have to revisit the code at some future point. Your deep deep understanding of that stuff never ceases to impress me.
  5. That sounds (somewhat) understandable, as the browser surely knows more about the element's dimensions than JavaScript will tell us. In that case probably solution 3 or some variant would be the way I'd go. Maybe also a custom-cursor would do the trick (ignoring touch devices for now...) Knowing how 'magnifying' is supposed to work though would likely help in suggestion a solution.
  6. Assuming, that the actual value you need is set/read only from one source anyhow, and not wanting to go into all the details of missing/not working cross-linked event-listeners, my suggestion would be to use CSS custom properties onDrag that all sliders are connected to. Percentages would even give you high flexibility.
  7. MotionPathHelper is a separate Plugin, that you have to load to function. I'm not sure, if the rest is what you want though, because once you include the plugin, the helper path is drifting around
  8. The ::after element isn't counting to the dimensions of the box element, as it is positioned absolutely and therefore out of the elements flow. It might be possible for Jack aka @GreenSock to apply some of his magic to try to consider absolutely positioned ::after and ::before (etc...) elements if the dragged element is a display parent - but that seems tough as accessing pseudo-elements wit JavaScript is near impossible... (not to mention shadow DOM et al...) So there are several feasible directions I'd see: - Changing the ::after element to a 'real' (JS-generated) element that count to the elements dimensions. - Changing the overflow (and scroll- ?) properties of the container so that the problem isn't visible. -Moving the magnifying-handle with script outside the container context with observer and maybe quickSetter()... there might be more...
  9. Hi, (I could not reproduce it) I'd guess that the mouseleave fires not (correctly?) when you move fast enough to leave the window (browser window) - likely the mouse-events are pulled at some interval and when the mouse leaves the window before the event is fired, the event probably won't be fired at all. Well I'm not sure what browsers (ans OSs) do in that case, but it seems likely to be connected to something like that, as you say it does not happen as often on codePen - where leaving the window take somewhat longer usually. There might be a change of adding a window onblur event, but you should make sure that it only fires, if the conditions are right. And I have never used it in production and wouldn't be surprised if it came with restrictions...
  10. Just to clarify my idea: I would use Observer, to do the video scrubbing. (Fixing the video or better its' container with css), then I would an EventListener ('ontimeupdate') on the video itself that would in turn trigger a timeline (or tween if that's enough) to animate the text in (and out....)
  11. The thing is, that making responsive animations start with responsive layouts, and those used to me mostly percentages then we had hv and vw units, but now we also have css-custom-properties and calc - there is real magic in this combination.
  12. I'm not sure if I understand what you want to achieve. You want to 'scrub' the video with scroll? Otherwise the text, as it is to be displayed at a synchronized point with the video would not be connected to the scroll - is that right? would likely go for an GSAP Observer, especially as you want it to be scalable. This way it seems rather easy to concoct video progress to a certain amount of scroll. If you fix the Video with css you could just set a certain scroll amount to a certain time. Provide that you have lagre enough scroll way, which should be easy to do hat seems easier to me than dealing with a ScrollTrigger. As You have to control the video element anyhow, I would probably think of a solution that ties the text to a 'ontimeupdate' event of the media element. If something goes wrong with scrubbing you stay in sync and also if you want to add an optinon of just (auto-) playing the video, it would still work... Or am reading you totally wrong?
  13. The best way to go about it would (in my mind) be to only activate ScrollSmoother if you detect the kind of device you want to activate it for. window.matchMedia usually is a good way to go with, checking for @media (hover: none) and (pointer: coarse) but maybe you could have a go with the wheel event? It totally depends on your use-case. Also there are a lot of fringe-cases like tablets with pens, or convertible laptops, and various implementations depending on os and hardware. That swiping down for refresh isn't possible seems strange to me, (which device are we talking) - but if should be possible to fix this, by simply reacting when the page is on top and pausing scrollTrigger, or changing some configuration detils.
  14. Well that depends on your tween, and will likely look the same (during animation) with any other variant where you tween lets the characters grow without moving them apart first. Or you could animate the stroke width too.... The expectation that everything is readable during animation is somewhat strange in my thinking. But it is you project and no one wants to convince you of anything - we just provided ideas. @Cassie's way of solving your pseudo-element solution is really a great prove of a concept, that probably wasn't (in her own words) a 'good' approach from the start. But it is working quite well in my eyes. If you have specific questions I can help with, feel free to ask, but with comments like you last one, I don't really know what to do.
  15. Hi, @monolith I work with the typescript definitions in the downloaded zip-package all the time, and they work perfectly for me. But I have a very lean setup and I guess that you have a very different setup that might need the type-definitions to be exported?
  16. @joxd As you brought up this thread again, I would like to use the opportunity to - A) express my relive that that tone of voice has improved. offer my two cents on the issue off accessibility in context with GSAP: I'm all for keeping things accessible, and do argue here often to not overdue fancy stuff at the cost of accessibility. On the other hand, most of us want to give some extraordinary experience to users, being it for fancy or very sensible reasons. GSAP is primarily about motions, visuals and interaction. To best enjoy either you usually need to have stable vision as good (large enough) screen an often good hand-eye coordination. A lot of times what is beding done with gasp (no disrespect meant - to the contrary) is eye-cany. and only in a fraction of cases, information depends on the animation. In an ideal world, one would expect that for example a Tetris-like game should offer voice commands for people with movement disorders. But most of us have to earn their living with our work, and we will not get paid to do that in 99.9% of the cases. I'm totally on you side that we need to raise attention to the issue and to help finding workable solutions though. My first approach to building almost anything for the public web is to make it work and look at least ok without any animation. Also I try to take a lot of care on using good semantic structuring. Like with SEO, my experience however is that often those who focus very much on the topic tend to overdue the technical-side and sacrifice the much more important content-side of things... I will try to make better use of prefers-reduced-motion in the future regarding GSAP and I try to honor high-contrast user whishes. I guess, that @GreenSock would probably accept a gues-authored blog article on how-tos regarding accessibility with GSAP as long as it is competent and friendly. I myself would gladly offer to help you with feed-back and suggestions, if you would want me to. The topic is important, and it deserves better attention. If here is not the place for such an article - I'm sure a lot of websites or blogs would take it and one or the other link here still could further your goals.
  17. I see the snap callbacks firing in your codePen. The snap start callback ir firing rather often, maybe that due your scrollTrigger setup, but the complet callback is likely anyhow the one that you want. My gut feeling tells me that using the scroll-snap-type CSS property probably isn't a good idea, and I'd guess that Jack would have thought of that too and disabled it, ore used it - still I don't see why you would need it. If only as a fallback, you should easily be able to remove a class when you successfully initiate ScrollTrigger.
  18. Well that reminds me - and I have to offer up a little boring old-man anecdote - because the only people in the world, that can probably appreciate it is the crazy lot around here: My challenge was similar: I had (scrollTriggerd) full-size sections. Each of them with an unknown (user changeable) background of type 'cover'. I each section were 3 elements (a hamburger, a small legal navigation and a description text) - places according to media-queries 'somewhere'. I ended up, measuring the boundingClient-rectangles for the three elements, then calculated the position and scaling of the background image (trickier than I thought), did an of scoren canvas calculation for each section that is covered by each element and set it to white or black if the average (perceptional) pixel lightness was light or dark. In cases that are hard to decide (large variance) I add a glow or drop-shadow. Have to repeat on each resize of course... In 99% of the cases it works our ok. End of boring story, but if not al least one of you can appreciate it - probably no one ever will, so please forgive me and feel free to share your crazy stories what you did for perfection. (But please, pleas pretty please. @GreenSock don't make fun of the little people, your level of crazy perfection is out of the world most of the time... :-) )
  19. https://codepen.io/mdrei/pen/GRxQXZO that's what --dist-correction is for. You could do a lot of fine-tunin of course by introducing mor complex logic. And kernig as it is still is more or less whishful-thinking in web typography - but hey there as fine libraries out there and you could try to build your own kerning-table for each character, after all you can easily get the content of each div and fine-tune with a CSS custom property (or two) for each character. :-)
  20. You can manipulate the values of --bold-stroke: 0.25em; --stroke: 0.11em; --dist-correction: .1em; That should get you close (enough) to what you need
  21. iDad5

    Mouse Cursor Effect

    Well, it (mostly) worked for me - but I found that sometimes it crashes.... https://codepen.io/mdrei/pen/ExEQpqY
  22. @Cassie You are a true legend Milady (seems to be a thing around here lately...) @friendlygiraffe That thing with overlapping letters made me do a little rain-dance.... https://codepen.io/mdrei/pen/jOzZpRp
  23. I wouldn't put it behind @GreenSock that he could find a solution, but to us mere mortals, the elements generated via ::before etc. aren't usually accessible by script. You could try a workaround through changing the title attribute on the fly, and setting classes to the spilt elements (newClass parameter) and maybe do a little CSS-custom-properties rain-dance. I would jut go back to your first solution if I where you, if it's still working four you....
  24. Sounds very much like that old couple across the street
  25. iDad5

    Mouse Cursor Effect

    In the config section at the top set: BACK_COLOR: { r: 255, g: 255, b: 255 }, and set the background color in css to white....