Jump to content
GreenSock

iDad5 last won the day on August 2

iDad5 had the most liked content!

iDad5

ShockinglyGreen
  • Posts

    330
  • Joined

  • Last visited

  • Days Won

    1

iDad5 last won the day on August 2

iDad5 had the most liked content!

About iDad5

Profile Information

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

Recent Profile Visitors

2,459 profile views
  1. My standard advice would be to first build a timelline without scroll(-trigger) and once that does what you want add scroll trigger.
  2. 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...
  3. @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...
  4. 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...
  5. 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?
  6. 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.
  7. 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.
  8. 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.
  9. 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...)
  10. 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...
  11. 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 ;-))
  12. @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.
  13. 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.
  14. 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.
  15. 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
×