eli-ott

Thanks a lot for all the knowledge shared and the advices. It helped a lot to find the perfect solution!!

Hello, so I have a 3D element made with Three.JS that is perfect. I try to modify it with gsap and scrollTrigger. I tried to do it with one trigger first and it worked perfectly. But when I try to to multiple changes to that element at different time with scrollTrigger it changes the original element's value. Like in the codePen when you first scroll you see that the square is not really a square at the begining but when you scroll a bit more It jumps to a square. And I don't know at all why it happens. I also tried to put a fromTo to all but did not change a thing. I really need help plz :))

I want to change the widthSegments of my box using a gsap timeline, but when I try it's doing nothing. For now, I've tried this: const tl = gsap.timeline(); tl.fromTo( cubeGeo.parameters, { widthSegments: 1, yoyo: true, repeat: -1, }, { widthSegments: 2, yoyo: true, repeat: -1, } );

Thanks a lot for this pen, it'll help me quite a lot! My end goal here is to create a carousel for pictures. But the difficult is to change the image because I firstly Flip the image in this carousel here from another container, so I have to change the element in itself and not just the source. Hope I was clear enough

I've just managed to make it work by changing a bit my timeline like that: const changeTl = gsap.timeline({ onComplete: () => { changeTl.clear(); }, onReverseComplete: () => { changeTl.clear(); } });

Here I created a minimal demo with your starter. Hope it'll help you understand the problem https://codepen.io/eli-ott/pen/bGmNXLW Sorry just saw that the onComplete wasn't supposed to be here at all ?

So I have an animation in using a timeline, and I want this animation to be able to be reversed. When I play it normally there's no problem, it's perfect. But when I try to reverse it, it plays one more time each time I play the animation. Here's my code: const changeBox = (reverse = false) => { //not allowing the user to remove the slideshow while the animation is playing allow = false; changeTl.fromTo('.active', { x: 0, opacity: 1, scale: 1, duration: 0.35 }, { x: -500, opacity: 0, scale: 0.75, duration: 0.35 }).fromTo('.active', { x: 500, opacity: 0, scale: 0.75, duration: 0.35 }, { x: 0, opacity: 1, scale: 1, duration: 0.35 }, '>'); changeTl.reverse(0); } I don't know at all what can be wrong since I'm quite new to gsap and still don't know all the details. PS: I tried to recreate it in CodePen, but it does not import the right version of gsap ? Thanks in advance for the help

So I want to resize my WebGL canvas to be bigger than window.innerHeight but more like document.body.scrollHeight. I also don't want to lose the ration, so I would resize the width by the way (with ratio). I already achieve some sort of resizing, but either the ratio wasn't good or the effect was not on the cursor anymore, like it was some hundreds pixels away from the cursor place.

Just a little other question (sorry lol) do you know why the effect only works after a click. Because everytime I refresh the page I need to click on the canvas otherwise the cursor effect don't work, there is no trail. Well I figured how to initiate it, just write canvas.dispatchEvent(new Event('mousedown'));

Thanks a bunch man, I didn't got the same codepen as you did but know I modified it a bit and that works perfectly. Thanks!!

I had already changed my canvas to transparent so that when I put other elements behind it does work properly. And I try to change the config to BACK_COLOR: {r: 255, g: 255, b: 255}, but that didn't change anything. The trail that the cursor create is still white (on a white background). The colors on the gray background CodePen would be perfect, but the two CodePen are too different to compare for me.

Hello, sorry for bringing back this old topic, but I copied the CodePen (with the black background not the gray) and make the canvas transparent. But now I don't know how to change the effect's color. Because with a white background, it's invisible. If anyone could help, that'll be lovely.

I have another issue that just doesn't make sense. I set the markers to true and everything was working, but as soon as I set the markers to false is stops working, that's nonsense. Here the markers are set to true, and it works (partially though because it doesn't go to the end of every paragraph), but if you try to change this it breaks: https://codepen.io/eli-ott/pen/QWQZEjM And also sorry for my bad previous questions, I hope this one is better

Hello guys, I'm doing a little come back here because I'm creating a horizontal scroll with scrollTrigger, which I managed to do well but when I implement it in my project it just stops working. This is the working CodePen of what I want : https://codepen.io/eli-ott/pen/WNMaxNj And this is the CodePen of the previous CodePen implemented inside my project (not working) : https://codepen.io/eli-ott/pen/QWQZEjM I just have no clue on what's not working. I try to only have the horizontal scroll with the right style and fonts, and it works, but as soon as I have other things before or after it just stops working.

Okay I'll check their specific forum, thank you very much for your help Cassie.