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. Assuming you plan on use background-image, just do it the same way.
  2. Technically it doesn't. You just see the changes from the newest animation. Once the old animation runs it course, it will be removed, so in that sense you really don't need to worry about it. This would only cause a problem if the durations are different, like here. If you quickly hover on and off the circles, it's going to do some weird stuff. https://codepen.io/osublake/pen/24b9ba7b0403dc58f3493c6cf1410c9e The solution is to use overwrite: true. This will immediately kill the previous animation. https://codepen.io/osublake/pen/331b8647c24abb889eec9fb9af2655a3
  3. Had to go look this up because I've never heard that. In HTML5, a number is technically valid. https://mathiasbynens.be/notes/html5-id-class But it has issues... document.getElementById("0") // ok document.getElementById(0) // ok document.querySelector("#0") // error: not a valid selector
  4. Oh, we don't get notifications if you update your post, so I didn't see that. It's best to just create a new one. I'm not sure why the cdjs links weren't working for you. I just tested them out, and they seem to be working fine here. ?‍♂️ https://codepen.io/osublake/pen/c02b09d41cadd4f8378487ff1d803f7b
  5. Forgot that you can use object-fit on canvas elements as they are essentially the same thing as image elements. https://codepen.io/osublake/pen/9c3114571bcbf62af3033efcf2106e65
  6. Look at the name in the link. https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.1/ScrollTrigger.min.js If you need more help, check out the installation docs. It has little helper to show you which files to use. https://greensock.com/docs/v3/Installation#CDN
  7. Welcome to the forums! ? So what's the issue here? You just want to use CSS transitions? If that's the case, you can just use toggleClass. GSAP won't do that, but you can use one of ScrollTrigger's callbacks to add the attribute.
  8. Welcome to forums, @PaulGodard It happens. Looks like you aren't loading the correct file. That's not GSAP's ScrollTrigger file, just another library that has the same name. https://terwanerik.github.io/ScrollTrigger/ You can load the correct files from here. https://cdnjs.com/libraries/gsap
  9. I think it's just like some FOUC. If you initially make your SVG hidden, then you won't see it. See how I make it visible immediately after the timeline has been created. hide() blink() gsap.set("svg", { opacity: 1 }) https://codepen.io/osublake/pen/2e215e55f1647bcf4fc6fb6c9a9a4c27
  10. Nice! It ran fine on my phone, doing around 110 fps until the text changed, then it would drop to around 60 fps. I'm guessing re-creating the text geometry probably has something to do with it. This guy suggest SDF rendering. https://discourse.threejs.org/t/what-is-the-performant-way-to-update-text-in-textgeometry/17437/3 Of course! A lot of people think GSAP is for html, but it can used with pretty much any library out there. Check out our showcase page. There's lots of different sites that combine gsap with three.js. https://greensock.com/showcase/
  11. Sorry, which part is the problem? You have a lot of elements in there, and I don't know what I'm looking at. Have you tried just setting it first. And then do a .to() animation in your timeline? gsap.set(...) gsap.timeline() .to()
  12. Curious, where do you use ActionScript? I didn't know people still used it. We don't maintain the AS version of GSAP anymore, so I'm not sure about the plugin. @GreenSock would need to chime in on this one.
  13. Gotcha, but that really doesn't apply to something that is dynamic like React. onload is probably going to fire before your React code even runs for the first time, so I would just ignore everything in that thread. ?
  14. I guess I'm asking where this is a common practice. I've never seen that before.
  15. Why are you using onload? I would expect that to fire only on the intial page load, and not on a route change.
  16. Welcome to the forums! Can you create a demo on CodeSandbox? Nothing complicated. Just something simple to show the issue? https://codesandbox.io/
  17. Hi @Rodrigo is timeout the only way to let it know when to remove the elements? Seems a little clunky. I saw addEndListener with a done callback, but that seems to only when entering, or am I missing something?
  18. The reason that doesn't work is because your animations aren't repeating. You're just playing and reversing them over and over again. repeatRefresh won't work in your situation, but for future reference, the animation would need to have a repeat in it. gsap.to(c, { repeatRefresh: true, scale: () => largeDots ? 2 : 0.5, // gets re-evaluated on every repeat duration: 0.1, repeat: -1 }); That said, I would do it just like @Cassie showed.
  19. A function to call on every refresh. gsap.to('#textbox1', { duration: 1, // duration should be a number, not a string repeat:-1, repeatRefresh:true, ease:"none", text:{value: () => rndstr(20)} })
  20. Something definitely sounds a little strange here. I don't see how that behavior would be possible unless you are using some framework/library to handle the routing for you. Are you using anything else besides gsap? And you are you using a dev server with hot reload like webpack, etc?
  21. You can set the global timeScale. gsap.globalTimeline.timeScale(0.5); // plays everything at half speed Seems like it should be super easy. Just export your variables from a single file. variables.js const debugMultiplier = 0.5; ... export { debugMultiplier }; foo.js import { debugMultiplier } from "./variables.js"; gsap.to("div", { x: 100, duration: 1 * debugMultiplier });
  22. In every gsap animation, the only thing that will ever change is the target i.e. the start values. We already showed how to get the values in your last thread. const startValues = [ 0, 10, 20 ] const endValues = [ 20, 50, 40 ] gsap.to(target, { endArray: endValues, onUpdate() { console.log(startValues[0]); console.log(startValues[1]); console.log(startValues[2]); }, duration: 6 })
  23. Then this should be all you need to do. var text = "stuff"; // text animation var proxy = document.createElement("div"); proxy.innerText = text; // first run? createText(); var mw = gsap.timeline({ repeat:-1, onUpdate: onUpdate, defaults: { ease: "power4.inOut" duration: 1 }); mw.to(proxy, { text: "foo" }) .to(proxy, { text: "bar" }) .to(proxy, { text: "baz" }); function onUpdate() { text = proxy.innerText; refreshText(); }
  24. Thanks for the feedback! Would you be interested in providing more feedback in the next couple of weeks? I'd like to set up some type of forum/channel to get feedback from React devs.
  25. Hi @Mikemcfly Can you create a new topic instead of replying to an old one? Thanks! But I'll just quickly go over some of your issues. Properties aren't dynamic like that. It's impossible for gsap to detect when you change the textWidth here. introTl.to('.box', {duration: 1, width: textWidth, delay: 0.5, ease: 'power4.inOut'}) If the textWidth changes, you should recreate that animation. Using functions to create all your animations can greatly simplify this. Kill doesn't reset the timeline. It's usually best to do something like this if you want to revert everything. tl.progress(0).kill(); tl = gsap.timeline(); // or clear if you want to reuse it tl.progress(0).clear(); tl.to(...); And you have some setTimeouts that could probably led to some problems. Here's how I would approach this. I would not have a some master timeline. I would create all related animations inside functions. That function returns a function to cleanup the current animation when it's time for a new one to play. https://codepen.io/osublake/pen/855770d485d460ec9280da133ec86d9a
×
×
  • Create New...