Jump to content

Matt K

  • Posts

  • Joined

  • Last visited

About Matt K

Contact Methods

Recent Profile Visitors

576 profile views

Matt K's Achievements

  1. Oh, yeah. That's true. Okay, great! Thanks again!
  2. Oh, okay. I understand. I was trying getElementByID or getElementsByClassName instead of just the ".creative-pro" class itself and wrapping everything in a div. Yes, it's perfect! Thank you! I really do appreciate it! On the website version I also had to set the transformStyle to "preserve-3d" to have the cards circle to the back. Perhaps Codepen has a feature that sets that or something similar.
  3. Actually, I see it's wrapping around the body. Now I'm just trying to edit it to be draggable only in the area of the cards. With it on my webpage it covers the whole viewport, since it's wrapping around the body, but that makes it where I can't scroll on mobile on the website.
  4. Yes, I believe it is! Thank you!!! I see the createElement code. Is that wrapping the whole container in the div or each card? It looks like it's creating one around everything, if I understand it correctly.
  5. I understand. Yes, thank you for your help! I should be able to add that from your solution. Regarding a proxy element, are you referring to wrapping another div around the whole section to link to, or something else?
  6. Hello all, I'm trying to create a 3D carousel for a project. I found this post and tried to adapt the solution for my purpose, but I can't get it to rotate or put the space between the cards. I feel like I may not have all the required files linked. I would like to have it autofocus on one slide at a time, but maybe incorporate another plugin too so you can grab and drag around to different processes. Adding the slide number above each slide would be nice to have too, but I haven't looked into that yet. Another option could be auto play the animation, pausing on hover, and then autofocusing on a slide. I'd prefer to have it animating continuously and then pause, but I don't know how smooth it could be when it goes to pause or autofocus on the slide. This pen is similar to what I'm trying to accomplish. https://codepen.io/jonathan/pen/YwVadY This is how I'm trying to get the rotation to be on the X and Z axis. Any suggestions?
  7. Oh, wow. Okay, thanks for the help. I talked to my client and he said maybe we don't the wave part but maybe only the melting effect.
  8. Thanks! Yes, I agree. I actually found this library called Blotter.js and it's using a liquid material. It's a few years old, but they have other great materials as well. I believe it uses three.js too. I have it applied on my demo, but I would like to adjust the value of the size with the class of quote2. That way when it's on mobile it will adjust, since it currently isn't responsive. Then when that solved, I need to figure out if I can alter it with GSAP and scroll it down the page. Maybe I can assign the whole thing to a variable? I might need to use this material instead. Blotter.js Materials https://codepen.io/mattk1500/pen/xxXZQNK
  9. Okay. With three.js, I'm going to need to have one canvas for both the quote and the titles, right?
  10. Okay. Without having tested yet, do you think the three.js and the liquid library would be best for performance, over this?
  11. @OSUblake Yeah, I also thought maybe with CSS applying a gooey effect similar to one of these, as long as it didn't affect performance. Maybe combining the SVG and CSS wouldn't affect it? https://codepen.io/pgalor/pen/xyPGvJ https://codepen.io/tucsky/pen/zvRzBO https://codepen.io/anthesema/pen/GzzGpQ https://codepen.io/mikel301292/pen/ggrrxQ @Cassie Oh, okay, Thanks! Is there a way to utilize SVG and animation without affecting performance? @PointC Okay, great! Thanks! I will read that!
  12. Okay, I think I'll try with three.js and the liquid library. Thanks for your help! What about the MotionPathPlugin and DrawSVGPlugin? I could create the quote text and services titles as SVGs and then with ScrollTrigger run the animation down the page. I saw these SVG text demos and thought maybe it could work. The only thing is it wouldn't have the liquid effect, unless I can animate the text to randomly go outside of its border? Then infinitely loop the random values, but set a range so they don't go to crazy. Maybe I'm thinking of something like an elastic effect. https://codepen.io/cassie-codes/pen/VwZBjRq https://codepen.io/PointC/pen/XWrYmGq Then with ScrollTrigger run the animation down the page. On the ScrollTrigger section of the website, in the video near the bottom, at 1:08 it shows an SVG path going down the page. I tried to find the demo but I can't find it.
  13. Thank you! Okay, which do you think of the two would be a better choice for this animation, PixiJS or Three.js? I've never used PixiJS and I'm a still a beginner with Three.js.
  14. Hello everyone, I have a client that is wanting an effect where the quote in the home section in the demo dissolves to liquid and flows down to the service titles. Would this be possible with GSAP and ScrollTrigger? They would like to see the flow of the liquid going to the service titles as well, if possible. I did see this previous post about something similar, but it's 5 years old and I'd like to use only GSAP if possible. It's using Three.js, and I need to technically "jump" over the about section and go to the services section, while still seeing the flow of liquid though. I don't think I can do that with Three.js since it's separate sections. I have used SplitText pretty often, but I'm very new to ScrollTrigger. However, I included it in the demo so you can see with the markers where I'm trying to begin and end the liquid. It would also be nice if the animation can somehow start after the SplitText animation. But having both there may not be best.