Jump to content

iDad5 last won the day on August 2 2022

iDad5 had the most liked content!


  • Posts

  • Joined

  • Last visited

  • Days Won


iDad5 last won the day on August 2 2022

iDad5 had the most liked content!

About iDad5

Profile Information

  • Gender
  • Location
    Munich, Germany
  • Interests
    art, sports (running, biking ...), single-malt, life in general

Recent Profile Visitors

2,768 profile views
  1. Thank you for your answer @Rodrigo. I tried the disabled method back then extensively, but as the height of the window might have changed, the whole metrics for the ScrollTrigger had to be renewed. As I mentioned, I might have worked with 3.11, but that just wasn't there. The scroll back is actually the only feasible solution I could come up with. I already do a lot “reverse -engineering” of CSS to get the correct position of the text-elements and grab the appropriate cut-outs from the image. Because of media-queries and some other “conditionals” in the CSS system trying to get the entire thing calculated is beyond me—and should not be necessary—as the system worked very well before. It is only the second time in a decade that a minor version update breaks things with Greensock. I really hope for a hint how to not have that refresh happen. I need to fix it, I already invested a lot of time in research, and rewriting stuff, but I cannot bill my client for that. As much as it might be a good thing to rewrite the whole thing from scratch—I simply cannot afford it right now. The complete thing is just shy of a thousand lines of code in typescript alone, not to mention PHP and CSS. I do hope for a magic hint from @GreenSock and fully expect to be humbled by it—feeling dumb for not having seen it myself. And yes, if needs be, I will (try to) build a CodePen instead of sleeping tonight. (Enough whining for the rest of the week—I promise.)
  2. ( I'm sorry for not being able to provide a simple CodePen right now. I hope you will understand my trouble without that.) I have built a ScrollTrigger page before ScrollTrigger 3.11 and its' responsive updates. I'm not 100% sure if I would have / could have built it another way with 3.11... My ScrollTrigger is Timeline-based, but I doubt that this makes a difference. On the outside, it is a rather simple full-page full-picture panel construct. But there is a catch: text (and a hamburger) on the picture-backgrounds that need to be readable. As I cannot predict upfront which text will be placed on what part of the picture, I must calculate the brightness/darkness of the areas where tests are placed. And I have to redo this with every resize. A resize triggers the following sequence: Kill the ScrollTrigger scroll the Window to 0, 0 (necessary for my brightness canvas-based calculations) check if I need better/larger pictures do my calculations recreate the ScrollTrigger scroll the window with ScrollTrigger.scroll() back to the panel that was in view before the resize happened. (Recalculated to the new value if height has changed) This used to work fine and was tested extensively. It is broken now (I guess since 3.11). What happens now is the following: after the above sequence is finished: ScrollTrigger updates and stays where it should be onEnter is triggered—still fine another update—still peachy and then a refresh is triggered (belatedly after some requestAnimaitionFrame calls) and self.scroll() reports to be scrolled to the absolute bottom of the window. (another update, where self.scroll() reports to be 0 and another refresh down to rock bottom follow) I have set: ScrollTrigger.config( { autoRefreshEvents: "load", } ); with hopes that this will avoid a (delayed) refresh to be triggered from the resize. It did not work. I do not understand why those two refreshes happen, nor do I understand why they scroll everything to the end of the ScrollTrigger. Can anyone give me a hint? Edit: I found the 3.11.5 beta and tried it too—did not change the behavior.
  3. My standard advice would be to first build a timelline without scroll(-trigger) and once that does what you want add scroll trigger.
  4. iDad5

    GSAP 3.11 Released

    Great work as always! I'm impressed! You are giving us great tools to do the right things - but it also goes to show, how complex doing 'perfect' web-design/development... has become - especially once you realize that mobile and desktop (while gerat for tutorial explanations) aren't by far the only interesting environments and reduced-motion also has partners in crime with high contrast, dark mode etc... So thank you for giving us the option, and no thanks for taking away the excuses...
  5. @Quang Anh Sorry, I've been rather busy the last weeks, and still am, so I cannot offer you help soon. I'm also not sure, if the effect you want to achieve really needs so much sophistication. A lot of times I find that a good 'fake' works just as well...
  6. It might sound like a strange question, but why don't you just go for video? with all the effort you put in you surely could render several size videos that shouldn't be too large considering the kind of content you have. if you need some interactivity putting a small number of animated elements on top should visually work fine...
  7. iDad5

    Typescript errors

    Well, there is no shame in not being able to follow @greensock as we are mere humans. 😬 I couldn’t follow his code especially on mobile right now. It might be that there is an (intentionally) undocumented property isPressed on Draggable, that‘s not in the definitions. haver your tried to use @ts-ignore to check if the code is working and it’s only a compiler issue?
  8. iDad5

    Typescript errors

    I looked in the docs and there is no property ’isPressed’ so the first error seems very logical to me. the second one I’m not sure about as I’m on mobile in transit right now I cannot really check deeper. I’m not a fan of anonymous closures and have limited experience with proxy in TypeScript - so I might be wrong, but my strong suspicion is, that the constants xTo and yTo defined in the class are either not reachable through the Draggaable create or are inferred not correctly by the TS compiler simply by attaching them outside to the constant. in either case explicitly typing the constants and/or casting them to gasp should satisfy the compiler.
  9. Depending on your actual use case it might be a good idea to set css-custom-properties to new values in you media-queries and use those in your css structure. That way you might only need to update I resize when an animation is running.
  10. If you want to sync it precisely to the words, you could work with TexTrackCues that you would have to measure out and right down upfront. if there audio is distinctly pronounced with clear pauses between the words you could even try to determine them by parsing the actual ByteArray of the sound, but that’s likely overkill.
  11. 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...)
  12. 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...
  13. 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 ;-))
  14. @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.
  15. 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.