Emcom Technology

Hi Trapti, I'm sorry for the delay. Thank you so much! Yes, that worked! I didn't realize that I needed to set it. I thought since I was using a .from that it would automatically start from 0 and go to 1 and that that was setting it. I didn't think to add both visibility and opacity either. Thanks again!

Hello everyone, I've been trying to set the SplitText animation for a bit now, but I've run into an issue. When I try to animate the text with chars and chars2 in the target class or id, for the .from sections, the animation doesn't work. When I reference the classes directly ".txtMain" and ".txtMain2" it works. The result is a little different, but it works. I tried adding the autoAlpha after the type in the mySplitText variable as well, but nothing changed. In the CodePen, only the button loads since I reference the class directly and I don't need the SplitText functionality. The video I included shows what I created without the init function wrapped around the timeline, the visibility commented out, and the desired result. However, when I click on each page of my site, it flashes and then plays the animation. So I'm trying fix the FOUC. Perhaps there's a better way to reference it since it's neither a class or id. But any direction or suggestions would be appreciated. rest-vid.mp4

Oh, yeah. That's true. Okay, great! Thanks again!

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.

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.

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.

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?

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?

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.

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

Okay. With three.js, I'm going to need to have one canvas for both the quote and the titles, right?

Okay. Without having tested yet, do you think the three.js and the liquid library would be best for performance, over this?

@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!

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.

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.