Jump to content


  • Posts

  • Joined

  • Last visited

eli-ott's Achievements

  1. 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.
  2. eli-ott

    Mouse Cursor Effect

    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'));
  3. eli-ott

    Mouse Cursor Effect

    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!!
  4. eli-ott

    Mouse Cursor Effect

    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.
  5. eli-ott

    Mouse Cursor Effect

    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.
  6. 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
  7. 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.
  8. Okay I'll check their specific forum, thank you very much for your help Cassie.
  9. I looked at curtain.js and managed to understand how it works but now I have another problem. I don't know how to use it with Vuejs. Also I'm open to three.js animation because I already used three.js in the past. So if you have any webgl tutorial with vuejs that'll be incredible because I don't find any. Thanks in advance! :-)
  10. Okay thank you I'll check curtain.js. I already saw some people talking about it, so I think it's going to be interesting.
  11. Hello, I want to create this distortion effect when scrolling: video of the animation I'm a complete beginner to GSAP like I don't have any basics, but I can learn quickly with the appropriate code, and I'm sure it's possible to do it with GSAP. I already looked at some topics on this website, with the property skew, but it doesn't skew from the center of the image. Furthermore, I want this animation to be vertical, not horizontal like in the video. If anyone can help me with an easy-to-understand solution, that would be awesome.