Creativist-Lab

After doing some more research it looks like I don't need Pixi.js to create this effect but I can just use SVG filters for this...... I found some examples so I think I understand enough of it now to make it work. When not, I will come back to this thread. Thanks

Hello everyone, I found this example: I would like to implement the same but I am kinda stuck on how to get this to work for my use case. My current setup is that I have a SVG as background image, I created a displacementmap of this SVG which should create the liquid effect. How would I go about loading in the displacementmap and have it animate my current SVG, @PointC since you made the pen I'm referencing to, would you be able to help? So in short, I would like to achieve exactly the same effect, by targeting the background SVG and applying the displacementmap on this. As usual thanks for any help!

@mvaneijgenThanks a lot again for taking the time and giving these examples. I will dive into this some more and see what I can come up with

@Cassiethanks .... I might go for a different approach all together but...... Is there a way to have more control over the timings and positioning even when you use random functions? So for example adjusting the ease or duration of the tween depending on the Math.random outcome? I'm still very much a beginner with coding so sorry if I ask very obvious questions.

Hello @mvaneijgen and thanks for your reply. I thought about the use of MorphSvg but I'm not sure in this case if this is what I'm after. In general I like the basic setup that I have I would just like to have a bit more control over how the timings and amplitudes are currently. For example the "whitewater" should ideally appear underneath the second wave and accelerate a bit compared to the second wave when the highest amplitude of the second wave/ripple ended. I'm not sure if my explanation is clear. And thanks for the utils link, I will study that a bit.

Hello all, I'm looking for some advice/improvements/examples on my code. What I would like to achieve is a more realistic looking movement of waves and shorebreak, and preferably I would like to have some randomness in it. You can see in the codepen what I currently have. Thanks!

Thanks for your reply, I came up with another solution that works for me

Hello guys, I have been searching on the forum but unfortunately didn't find a solution for my problem. What I'm trying to achieve is have part of my timeline only play once. This is what I have function modelPositionNose(){ controls.enabled = false; const decalNose = scene.getObjectByName("topNoseSmallDecal") let tl = gsap.timeline() tl.to(activeModel.position, { duration: 1.5, x: 0, y: -0.8, z: 0 }, 'simultaneously') tl.to(activeModel.rotation, { duration: 1.5, x: 0, y: 0, z: 0.35, }, 'simultaneously') tl.to(camera.position, { duration: 1.5, x: -0.5, y: 0, z: 0, }, 'simultaneously' ) tl.fromTo(decalNose.material, {duration: 1, opacity: 0}, { opacity: 0.5, repeat: 1, yoyo: true }, '+=1') tl.to(decalNose.material, { duration: 0.5, opacity: 0}) //THIS PART SHOULD ONLY PLAY ONCE tl.to(activeModel.position, { duration: 1.5, x: 0, y: 0, z: 0 }, '+=1') tl.to(activeModel.rotation, { duration: 1.5, x: 0, y: 0, z: 0 }, '-=1.5') tl.to(camera.position, { duration: 1.5, x: -1.1, y: 0.55, z: 1.05, onUpdate: function() { controls.update(); }, onComplete: function() { controls.enabled = true; } }, '-=1.5' ) } And here you can see everything working: Board Configurator2 | Boardschmiede Custom Shaped Kiteboards (creativist-lab.com) The problem that when the timeline keeps playing on each button click that the part of the model that already has been color changed by the user becomes invisible again. Hopefully my question is clear. Thanks in advance for any help!

@SteveS that all works perfectly, thanks once again!

Thank you, I will give it a go!

Thanks a million @SteveS, looks like you are right! I now have to redo some of the animations because the positions became different but that is probably because of the conflict. But if I understand you correct, when I found the proper positions I can enable Orbitcontrols again? About this: That is also what I thought but I found another working example in which they used this so that's why I tried. Anyway thanks a lot, I was struggling for quite some time so very happy with your help!

Hey everyone, I'm having trouble with getting my animations onclick running smooth. I did some research on the forum and found some threads which I tried but unfortunately it doesn't solve my issue. The following thread I tried: The code I tried is the following: /* Model Parts Positioning */ /*function modelPositionRail(){ const animatedModel = activeModel; gsap.to(camera.position, { duration: 1.5, x:-0.05, z: 0.75, ease: "power2.in" }); } function modelPositionTop(){ const animatedModel = activeModel; gsap.to(camera.position, { duration: 1.5, x:-1.5, ease: "power2.in" }); } function modelPositionBottom(){ const animatedModel = activeModel; gsap.to(camera.position, { duration: 1.5, x:1.5, y: 0.75, ease: "power2.in"}); } function modelPositionFins(){ const animatedModel = activeModel; gsap.to(camera.position, { duration: 1.5, x:0, z:1.5, ease: "power2.in"}); }*/ and /* Model Parts Positioning */ /*function modelPositionRail(){ const animatedModel = activeModel; gsap.to( camera, { duration: 2, zoom: 2, onUpdate: function () { camera.updateProjectionMatrix(); } } ); gsap.to(controls.target, { duration: 1.5, x:-0.05, ease: "power2.in", onUpdate: function () { controls.update(); } }); } function modelPositionTop(){ const animatedModel = activeModel; gsap.to( camera.position, { duration: 1.5, y: 900, onUpdate: function () { camera.updateProjectionMatrix(); } } ); gsap.to(controls.target, { duration: 1.5, x:0.15, ease: "power2.in", onUpdate: function () { controls.update(); } }); } function modelPositionBottom(){ const animatedModel = activeModel; gsap.to(camera, { duration: 1.5, x:1.5, zoom: 2, ease: "power2.in"}); } function modelPositionFins(){ const animatedModel = activeModel; gsap.to(camera.position, { duration: 1.5, x:0, z:1.5, ease: "power2.in"}); } */ But the results are kinda similar. Here: Board Configurator2 | Boardschmiede Custom Shaped Kiteboards (creativist-lab.com) you can see it 'working' especially on mobile devices it doens't look good but also on a desktop it doesn't run smooth most of the times. The idea is when you press one of the customize buttons that the model focuses on the part that will change. Hope fully it's clear and sorry for not providing a pen but I figured with the GSAP code provided and the working example that hopefully someone is able to help. Thanks in advance! Any pointers in what I'm doing wrong or can do would be great as I've been busy with it for quite some time now

Thanks @Carl! I purchased your courses last year and they have been a great help, I haven't finished all the tutorials and definitely missed this particular one. May I suggest one thing for your courses? I think it would be a great option to have a notes section underneath the title of each lesson for example. What I notice now is that I run into a solution for a particular problem but with no option to note that down I often find myself scrolling through each video to try to remember where I saw the solution. For the rest, thanks for making such great tutorials!

Thanks @akapowl I did search the forum first but I didn't find this thread, sorry. Thanks for taking the time to answer

Hello all, I'm trying to animate letterSpacing but the result is not very smooth (see CodePen) is there anything I can do to make it look more smooth? Thanks in advance!