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. gsap-core.js doesn't include the CSSPlugin, so of course the proxy div wouldn't work correctly. You should be importing the index file.
  2. The onUpdate is for the div, and autoRotate won't work because rotation is another property. Still doesn't look right ?‍♂️ gsap.to(model5.position, { duration: 10, repeat: -1, ease:"none", motionPath: { path, // equivalent to path: path // autoRotate: true, // useRadians: true }, // onUpdate: updateMesh }); The motion path plugin really doesn't work with 3d paths all that well. You also don't need to import all those eases and TweenLite/Max TimelineLite/Max stuff. import { gsap } from "https://ui-unicorn.co.uk/game-lesson-1/esm/gsap-core.js"; import { MotionPathPlugin } from "https://ui-unicorn.co.uk/game-lesson-1/esm/MotionPathPlugin.js";
  3. How do you change the text in three.js? That's all he was showing with object.text. Not that object.text is actually in your code, but how to apply the changes from the proxy.innerText to something else.
  4. And it's probably best to go through this thread and understand what is going on. It's animating a <div>, and then applying those changes to a three.js object. It is not animating the three.js object directly. var proxy = document.createElement("div"); gsap.to(proxy, { duration: 10, repeat: -1, ease: "none", motionPath: { path, // equivalent to path: path autoRotate: true, useRadians: true }, onUpdate: updateMesh }); Have you tried just animating your object directly? gsap.to(someThreeObject.position, { duration: 10, repeat: -1, ease: "none", motionPath: { path } });
  5. Hard to say as you have a lot of code in there and I'm seeing lots of errors with setX. Try to fix that first.
  6. You can check your scroll triggers for an associated animation. https://codepen.io/osublake/pen/51e4a1fa1e2d0e129a15bebb35b8d247 You can also do the same use same pattern with the globalTimeline. That's assuming it's a timeline and not a tween. Tweens don't have a clear method. But that still doesn't reset the inline styles. It just removes animations from the timeline. https://greensock.com/docs/v3/GSAP/Timeline/clear()
  7. I've updated my demo. https://codepen.io/osublake/pen/LdMjaL For help with the new syntax...
  8. You're just going to have play around with it until you find the right look. You can also add in intermediate steps to help, like with keyframes. gsap.to('#cable3', { keyframes: [ {morphSVG: { shape:'#path1' }}, {morphSVG: { shape:'#path2' }}, {morphSVG: { shape:'#path3' }}, ] });
  9. Reusing an animation. https://codepen.io/osublake/pen/88ed0dca5b4eb6013e729cca45db37c0
  10. Sure. Here are some topics that might help you. https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll https://developer.mozilla.org/en-US/docs/Web/API/Element/querySelector https://developer.mozilla.org/en-US/docs/Web/API/NodeList/forEach https://codepen.io/osublake/pen/495ae1529d9ca33b8af0a2a039152738
  11. Kill is just meant to kill it, not reset everything. For that you can clear the props after killing your triggers. gsap.set(".grow, .spin", { clearProps: "all" })
  12. Right, I was just suggesting to add your own since name is reserved. SplitText.globalName = "SplitText";
  13. Well, not only anchor points, but bezier control points. See all those v's and h's in the paths. Those are just straight lines. <path id="cable3" d="M339.5,29.1h0a16.6,16.6,0,0,0-16.7,16.6v84.1a9.6,9.6,0,0,1-9.6,9.6h0a9.6,9.6,0,0,1-9.6-9.6V74.3"/> You want to have c's in the path because those will be bezier curves that will morph a little smoother. The start path should look similar to this, but of course with different coordinates. <path id="cable3end" opacity="0.4" d="M44.2,7.5l12.3.4c18.3.4,34.6,10.7,41.4,27.7C113.2,74.4,148,97,184.8,101.1c35.3,3.9,72.6-9.1,96.4-41.3,13.2-19.1,34.9-30.9,58.1-30.7"/>
  14. Don't plugins have a name property? I couldn't find one for SplitText, but you could use something like that when installing on the window. I don't think it's doing it inappropriately here. Just part of the minification process. It doesn't know that the SplitText name shouldn't be minified.
  15. @GreenSock is this something that can be fixed? Not sure how SplitText actually registers within gsap.
  16. Did you try the window thing? That's the only thing thing I can think of, like how webpack sometimes renames imports, and SplitText is the only plugin that you would actually be referencing by name. And what version are you using?
  17. Sounds strange. Are you sure you aren't trying to use SplitText before your imports? What happens if you add SplitText to the window? window.SplitText = SplitText;
  18. gsap.utils.toArray(".gallery").forEach(createSlider); function createSlider(galleryElement) { const draggerElement = galleryElement.querySelector(".dragger"); ... const draggable = new Draggable(draggerElement, { type: "x", bounds: galleryElement, onDrag: onDrag }); ... }
  19. Do you have any code to share? A minimal demo would help. It should be a simple as putting all the creation code in a function, calling that function for every slider, and selecting the correct elements in that function, like with element.querySelector. https://developer.mozilla.org/en-US/docs/Web/API/Element/querySelector
  20. Yes, it's possible. It's just math. But it's not easy. Not only do you have to detect collision on every movement, but you have to figure out the response if there is a collision. Like how far to move the object back. And things get really tricky if your blobs have a concave parts in them. You have to break down your shapes into smaller areas. Matter.js is a good library to check out. https://github.com/liabru/matter-js And SAT.js https://github.com/jriecken/sat-js
  21. You can certainly do it manually, but the plugin is more versatile and handles edge cases. https://codepen.io/osublake/pen/8a672b46ab575abe00f6c41f32b223ce
  22. Ha, no. Never seen it in my life. I'm guessing there is some reflowing going on that took longer than expected. https://stackoverflow.com/a/44756697/2760155
  23. Hi, can you create a minimal demo?
  24. It's best to use SVG for something like that. The MorphSVGPlugin could probably handle that nicely. https://greensock.com/docs/v3/Plugins/MorphSVGPlugin
  25. The cable animation would probably look better if the both paths have the same number of control points. Keeping the plug in sync with the cable will probably be a little more complicated, and might involve using onUpdate to manually position and rotate it, but maybe someone else has a simpler solution.
×
×
  • Create New...