Jump to content

OSUblake last won the day on May 24

OSUblake had the most liked content!

OSUblake

Moderators
  • Content Count

    4,038
  • Joined

  • Last visited

  • Days Won

    418

OSUblake last won the day on May 24

OSUblake had the most liked content!

Community Reputation

9,346 Superhero

About OSUblake

  • Rank
    Moderator

Profile Information

  • Gender
    Not Telling

Recent Profile Visitors

17,943 profile views
  1. I haven't used hooks but I think that useRef is what you need. It's like using this on a class.
  2. What's wrong with using classes? Try searching React docs, like useRef. https://reactjs.org/docs/hooks-faq.html#is-there-something-like-instance-variables
  3. That's for a VERY important reason. Ignoring mobile devices, which is another can of worms, most Windows laptops and Chromebooks have touch screens. How do you scroll using a touch screen? You can't.
  4. You can't animate something that has !important. You're going to have to figure out a fix so you're not targeting something with !important. I just wouldn't use Bootstrap. You need to animate the width or scaleX of something like div or svg. Example animating a div from the center. Close enough. https://codepen.io/osublake/pen/rQwwjj
  5. Using setTimeout will cause issues, especially if you leave the page and go do other work on your computer.
  6. That's what it looks like. Sometimes all of the images are hidden. Maybe try doing that without using stagger.
  7. Anybody else see flickering? I seriously doubt this related to GSAP. Most likely a browser rendering issue. I bet you wouldn't see any problems using canvas. https://codepen.io/osublake/pen/vpEQzY
  8. OSUblake

    wiggle path of SVG

    It doesn't matter. If you're animating SVG, that's the bottleneck.
  9. You can turn off those errors in a tsconfig file.
  10. Very weird. For some reason the red rgb value isn't tweening at the same rate as the green and blue values when using an hsl color value. This is something that @GreenSock will have to look into.
  11. So everything has to be inside in a html file? That's seems like a rather odd choice, but okay, I guess base64 might be your only option. That said, I don't see any flicker on the demo you linked to here. Where are exactly do you see flicker? And in what browser and operating system?
  12. Just like to point out that using selectors may cause problems if you're not careful. See my post and demos at the end of this thread.
  13. No. A window load listener will if the images are in your markup. Another way is to add listeners to all your images and wait for all of them to finish. Not sure how base64 is a design requirement as that has nothing to do with design. And you don't have a single file. You have multiple files, and base64 has a size limit. Loading is one of many benefits. https://www.codeandweb.com/texturepacker An overlap isn't needed. Showing and hiding will happen in the same frame if done correctly. Here are a couple threads about sprite sheet animations:
  14. Have you tried not using base64? I would recommend using a sprite sheet for something like that.
  15. You're missing TweenLite.js. Do not import if you're using scripts. Third Option: Create your own GSAP bundle (webpack, rollup). There is no law that states that you have to use Angular's build tool for everything.