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!

It's a dirty job but someone has to do it No worries, I appreciate the advice and you're right, better to know.

Thanks @Cassie not the answer I was hoping for but then I better go for the non easy solution.

Hello @OSUblake thanks for your reply. I made a quick codepen where I replaced the box-shadow with another div so you hopefully understand the effect that I'm after. Basically I would like to animate the boxShadow in a similar way as that the div is being animated. I understand that I can add another div and animate this as in the codepen but that would complicate things so when possible I'm looking for a way to animate the boxShadow. Thanks for any tips (once again ) https://codepen.io/JeroenVn/pen/QWqKabv

Hello, sorry if this is a very basic question but I'm not able to figure it out. I'm trying to animate a boxShadow. What I would like to achieve is having a boxShadow appear underneath a card. This is how the eventual box-shadow should look like: box-shadow: 0px 0.85em 2.15em 0px rgb(0 0 0 / 27%). But I would like to let the box-shadow start completely hidden underneath the card. I thought by using gsap.to and targeting boxShadow and then animating it in by using the "x"and "y" offset would be the easiest but I can't get this to work. Also by setting the starting point of the box-shadow to 0 and then with: gsap.to(".slideShadow", { boxShadow: "0px 0.85em 2.15em 0px rgb(0 0 0 / 27%)", duration: 1, ease: CustomEase.create("custom", "M0,0,C0,0,0.144,0.728,0.518,0.872,0.876,1,1,1,1,1")}, 0) this just let's the shadow fade in instead of letting it move away from underneath the card. Sorry for not attaching a codepen but hopefully my question is clear. Thanks in advance.

Thanks a lot! That is exactly what I was looking for

Hello all, I started playing around with the MorphSVG plugin and so far so good. I'm very new to all of this (coding in general) and I'm running into some things that i hope someone can help me with (see the codepen demo). When you hover over the trees they start to wiggle, what i would like is the trees to finish the wiggle sequence on mouseleave and reverse when leave so that the sequence will start again with another mouse enter... Is there a way to do this? Also I'm sure that the code that I've written is not very clean and optimized, when possible I would like to have some tips on how to improve this also. Thanks once again in advance! https://codepen.io/JeroenVn/pen/OJxMdOe

Thanks for your answer @OSUblake I will try first with MorphSVG. By the way, your example looks really cool!

Hello all, I'm asking for some general advise/workflows since I'm totally new with the following..... I created some SVG's in the form of trees and now I would like to animate them in such a way that they seem to move subtle in the wind. Most likely I need to manipulate each path separate in order to have a realistic effect, or is there an easier way to go about this? And when each path needs to be manipulated separate, what would be the easiest to do this? Anyway all tips are most welcome! Thanks everyone.

Yes I definitely encountered what you are saying already more than once but I guess there is always this thing that you can overlook. And probably with everything that you discover you have another option to look out for with a next thing that doesn't work the way it should. Anyway thanks once again for taking the time to answer.

Hello @Cassie so your tip kinda worked...... I inspected the elements again and then I noticed that when i am using text it is being wrapped in an extra DIV so I made the exact example in a codeblock on my website and now it behaves as it should. Sorry again to bother you with this but I'm glad I finally figured it out (still with the help of you guys )