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. Sounds like you get it. The space would be another element. If they are connected, it would be the same element. <!-- #first.active would select the #first element --> <div id="first" class="active"></div> <!-- #first .active would select the second element --> <div id="first"> <div class="active"></div> </div>
  2. Just trying to figure stuff out for future reference. Does anyone know how to export an SVG so that the shape is centered at 0,0? Meaning most of the coordinates will be negative because they lie outside the svg. This would make it really easer to center stuff, like to the mouse cursor, especially if morphing will be involved as the dimensions of the shape might change. cc @PointC
  3. It looks like that might be undefined because the model hasn't loaded.
  4. Your code has little meaning without a demo. If you only want animations to work at a certain screen size, you can create them inside .matchMedia(). https://greensock.com/docs/v3/Plugins/ScrollTrigger/static.matchMedia()
  5. Hi @LauraS You're using jQuery, which doesn't return the actual video element. I would just do this. var videoElem = document.querySelector('#vid1');
  6. Hi @Dziugas We don't support ScrollMagic as that's not a gsap product. We do have a ScrollTrigger, which should be able to do everything ScrollMagic can. https://greensock.com/docs/v3/Plugins/ScrollTrigger This is only for demo use on CodePen. <script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/DrawSVGPlugin3.min.js"></script> You don't need these. <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenLite.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TimelineLite.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/plugins/CSSPlugin.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/plugins/BezierPlugin.min.js"></script> Just these for gsap and the MotionPathPlugin, which replaces the BezierPlugin. <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.1/gsap.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.1/MotionPathPlugin.min.js"></script> See the installation docs. https://greensock.com/docs/v3/Installation?checked=core,motionPath#CDN
  7. Hm... I'm not sure what you're trying to do. Can you make a really simple demo showing the issue?
  8. Love your animations! Here's another way to get mouse coordinates inside an svg. https://codepen.io/osublake/pen/383a987e80f497e08b94dd6c3684841a That technique will work with any element inside an svg. https://codepen.io/osublake/pen/e2f39748b642d0fb90321b7ae7575cf7
  9. More context about how you can do that. https://codepen.io/osublake/pen/4ccc5df5ce195ae1527e923babb5429f
  10. getBoundingClientRect always includes transforms. You can remove the transforms, measure, and then reapply the transforms. Or use something like element.clientWidth/clientHeight or element.offsetWidth/offsetHeight depending on your needs.
  11. @Cassie just posted a demo. https://codepen.io/cassie-codes/pen/a565a64ed971eadafd29a4c932ae9d05 The other thread she linked also shows different ways to animate gradients.
  12. quicky example... https://codepen.io/osublake/pen/4d6a0d9caeae1dc5b00387b9b531ba12
  13. Here's the trick to making anything responsive. Keep track of everything as ratio i.e. a percentage. Some might call that a normalized value. So if x is at 200 and the image width is 1000, then the ratio is 0.2. Now if the image resizes to 500, you can set the draggable to 0.2 of 500 which would be 100.
  14. For the record, that was kind of pointless as this is the instance inside the callback, so it was removed. function fillLetter() { this.targets()[0].style.fill = "#0d47a1"; console.log("INSTANCE", this); // tween instance } But I would just follow @Carl's advice.
  15. What did you try? Get a tween working first. Add in the more complicated stuff later.
  16. I would just reset everything on media query changes. https://codepen.io/osublake/pen/152ea0d171ea5883d79f2623f7096338
  17. Yeah, it definitely should not be like that. I would search around for how to handle resizes, like here. https://blog.logrocket.com/developing-responsive-layouts-with-react-hooks/
  18. Hey @tunji.akanbi Can I ask why you are using React? I'm trying to understand our React users better and how to improve the experience. So let's break down some issues with your code... Not a big one, but async is meant to be used with await. Using .then() is basically an alternate way to do async/await. It really doesn't matter which method you use as the end result will be the same. useEffect(() => { (async () => { const response = await fetch("data.json", { headers: { "Content-Type": "application/json", Accept: "application/json" } }); const data = await response.json(); setMusic(data); })(); }, []); Yes, GSAP needs a reference to your element(s), and in React Hooks useRef() is usually the best way. However, one problem with your refs is that you are using the same useRef for each element. ref={(el) => { testE = el; }} <div key={m.id} className="m_Artist"> ... <div className="artists"> <h4 ref={(el) => { testE = el; }} className="artists" > Artist Bio: </h4> {m.bio} </div> </div> The very last artist <h4> element is going to be the value of testE. A ref needs to be unique. Just like you can't have the same id in html. The HTML below "might" work, but can lead to problems because the IDs are the same. <div id="artist">Foo</div> <div id="artist">Bar</div> <div id="artist">Baz</div> This is essentially what your code is doing.... var testE = null testE = element1; testE = element2; testE = element3; testE = element4; console.log(testE); // element4 So even if you had a unique ref for each element, you have another problem, those elements aren't going to be in the DOM until the music data has loaded. {music.map((m) => (...))} So you need another useEffect to wait for the data to come in. useEffect(() => { // the artists are in the DOM // let's get animating!!! }, [music]); We are having a discussion over here about how to simplify the ref process... But until then, this is what I would do... https://codesandbox.io/s/musicapp-with-react-and-gsap-forked-csqtx?file=/src/Test.js cc @GreenSock ref problems
  19. No worries. That's how is goes with programming.
  20. You already have a parent element i.e. your AnimatedBox, and the best option is do animations inside there. You can also pass down the index and create your delay. Or even pass down a timeline. BTW, it's not a good idea to create a timeline inside the function like that. // bad const Item = ({ item }) => { const tl = gsap.timeline(); useEffect(() => { tl.from([boxRef.current], 1, { y: 100, opacity: 0, stagger: 1, delay: 1 }); }, []); }; // ok const Item = ({ item }) => { const tl = useRef(); useEffect(() => { tl.current = gsap.timeline() .from([boxRef.current], 1, { y: 100, opacity: 0, stagger: 1, delay: 1 }); return () => tl.current.kill(); }, []); }; // ok const Item = ({ item }) => { useEffect(() => { const tl = gsap.timeline() .from([boxRef.current], 1, { y: 100, opacity: 0, stagger: 1, delay: 1 }); return () => tl.kill(); }, []); };
  21. This is more of a three.js question. Try searching for how to rotate on axis. Once you figure that out, it should be relatively easy to animate with gsap.
  22. No. If you think it's an issue with gsap, remove/comment out your gsap code and see if you still get the warning. Are you using WebGL? That's probably the most common use for shared array buffers. GSAP has compatibility with Typed Arrays, but that's the only thing in gsap that could possibility be related to shared array buffers.
  23. 10% of my likes, so about 1,432 sites.
  24. There might be exceptions, like when drawing rectangles using fillRect or strokeRect as it doesn't have to compute a path. It's always best to test and compare first. There really are no hard rules when it comes to coding.
  25. I think images are always faster. This demo really shows the performance difference. When you check "Use bitmap", it will use images instead of drawing shapes, giving a massive performance boost. https://codepen.io/osublake/pen/EOeBdm
×
×
  • Create New...