Jump to content
Search Community

OSUblake last won the day on September 16 2023

OSUblake had the most liked content!

OSUblake

Moderators
  • Posts

    9,196
  • Joined

  • Last visited

  • Days Won

    708

Everything posted by OSUblake

  1. With the registry, you should use import. This post has some tips on netlify.
  2. Not sure what you mean, can explain that in more detail?
  3. If you're putting the scripts in the head, then you wouldn't use import as the files would be global. So you would just register any plugins. gsap.registerPlugin(ScrollTrigger) But of course if your files aren't committed, then it can't resolve the path. Have you tried to doing the private registry.
  4. But if you want to be in the know, just search for how to avoid memory leaks in JavaScript. Here's a start... https://dev.to/kepta/a-toddlers-guide-to-memory-leaks-in-javascript-25lf
  5. Mind explaining that approach over using something like useEffect?
  6. But don't get too hung about things like that. 1 split text object is not going to cause any issues. Maybe a million.
  7. You have to remove any references to it. Not a gsap thing. That's just how programming works. let split = new SplitText(yourElement); // later split.revert(); split = null;
  8. Not sure. Any ideas, @GreenSock? I know you said you don't want to change the HTML, but you could just manually open the link. Change the <a> to a <div> and then add a listener. const dragMe = document.querySelector(".drag-me"); dragMe.addEventListener("click", e => { window.open("http://www.google.com", "_blank"); });
  9. You should use your browser's built in profiling tools. Start with figuring how to minimize layout shifts. I see a bunch... Using will-change: transform in your css on elements that you animate can also help, but can also hurt if you overuse it.
  10. In the future, just create a new topic. Sometimes old threads can get overlooked because other people have already responded.
  11. Does this actually work? gsap.ticker.add(stage.update); Or do you need to bind it? gsap.ticker.add(stage.update.bind(update));
  12. Are you importing gsap? If so, then you would have to change your imports to point to that folder. If you are just putting the scripts in the head, then you really don't need the tgz.
  13. You can animate the timeScale property of an animation, which will allow you to speed it up, slow it down, and even reverse it. This is just a simple example to get you on the right path. https://codepen.io/osublake/pen/757e8becab6817e805dbea2f14f9f95b You could definitely add in more logic to intensify the timeScale value, kind of like here. https://codepen.io/GreenSock/pen/eYpGLYL
  14. That is awesome! Thanks for sharing. Well, we're really don't need to drag anything. What we need is something more like gestures i.e. swipe. So the trigger: dial is how the gesture gets initiated, and then draggable just applies the user's movement to the proxy element. From there, we can read the changes made to the proxy and then apply them to something else, like scrubbing a timeline. Does that make sense? It can be bit confusing at first.
  15. I think wrap might be a good one for that. const wrap = gsap.utils.wrap(0, 1); console.log(wrap(-0.75)) // 0.25 It might need a little jump start to do the first render. const animation = gsap.timeline({ repeat: -1, paused: true, id: 'animation'}) .add(baseTl.tweenFromTo(1, 2)) .progress(1) .progress(0);
  16. Yep. You're conversion over to newer syntax looks good, so I don't know what's going on. I'll look more at more in depth later and try to figure it out.
  17. Right. The Timeline statement sounds good. The Variable one doesn't because you might put a timeline in a variable just like I did in that demo. And relying on the term "variable" can get even more muddied once you start doing more advanced stuff, like using functions to return animations. Just think in terms of tweens and timelines.
  18. For the same reason you would put anything in variable. You're need to use it somewhere else in your code, like controlling the playback. https://codepen.io/osublake/pen/0abe5d8654c647a1d0343a9e054ed63e
  19. It's not possible. It sounds like you might not be understanding the difference between a tween and timeline. There is a lot of overlap in the methods and options, but a timeline is basically a container for tweens. For a set of tweens to behave like your timeline, you would need to something like this. // notice the delays gsap.to("#id", {x: 100, duration: 1}) gsap.to("#id", {y: 50, duration: 1, delay: 1 }) gsap.to("#id", {opacity: 0, duration: 1, delay: 2}); A timeline has a .to() method, but that it's just a shorthand way of adding a tween. What's happening under the hood.... let tween1 = gsap.to("#id", {x: 100, duration: 1}); let tween2 = gsap.to("#id", {y: 50, duration: 1 }); let tween3 = gsap.to("#id", {opacity: 0, duration: 1}); let tl = gsap.timeline(); tl.add(tween1); tl.add(tween2); tl.add(tween3); Not sure what you mean by "VAR", but just use a timeline if you have more than 1 animation that needs to be grouped/sequenced. If you have a single animation that can play independently of other stuff, then use a tween.
  20. OSUblake

    infinite rotation

    That's fine, you just can't use all as the property. .icon{ filter: invert(89%) sepia(54%) saturate(4856%) hue-rotate(314deg) brightness(109%) contrast(90%); width: 60px; height: 60px; margin: 25px 0; transition: filter 0.5s ease; } .icon:hover{ filter: invert(87%) sepia(94%) saturate(1270%) hue-rotate(304deg) brightness(122%) contrast(92%); transition: filter 0.5s ease; }
  21. Hey @Chuck Taylor Here's something I made. It's not using the latest syntax, but it should be pretty easy to convert. https://codepen.io/osublake/pen/YrXdGZ
  22. Right, but the view box changes and the coordinates aren't negative. At least that's how it is when I export. ?‍♂️
  23. Yesss!!! https://codepen.io/osublake/pen/5648de67fb458da3752fa9168a80f8f6 Although now I want to know if there's an easy way to do that in Illustrator. If not, Inkscape is free.
  24. I think you will need to do some cloning until the content is wider than the canvas. Maybe like a min of 2x the width. ?‍♂️ And instead of animating each text block individually, put them inside a wrapper, and animate the wrapper instead. That way they will be the same width. <div class="wrapper"> <div>This is a short text: 1</div> <div>A shorter text: 2</div> <div>This can be a long text but not as long as you'd think: 3</div> <div>Styles.css: [4]</div> <div>Package.json: 5</div> <div>Create New topic about crawlers: [6]</div> </div> <div class="wrapper"> <div>This is a short text: 1</div> <div>A shorter text: 2</div> <div>This can be a long text but not as long as you'd think: 3</div> <div>Styles.css: [4]</div> <div>Package.json: 5</div> <div>Create New topic about crawlers: [6]</div> </div> <div class="wrapper"> <div>This is a short text: 1</div> <div>A shorter text: 2</div> <div>This can be a long text but not as long as you'd think: 3</div> <div>Styles.css: [4]</div> <div>Package.json: 5</div> <div>Create New topic about crawlers: [6]</div> </div>
×
×
  • Create New...