makilyes Posted December 22, 2021 Share Posted December 22, 2021 Hello, I attached a video of an effect that I want to replicat. I just wanted to have from you guys, wich direction should I take. It's a circle with the magnetic effect, but the part that I'm more looking for, is when you scroll down, the circle scales, up to be the fullbackground of the rest of the site. And I see that they are using canvas, and I was wondering if it's the best solution. Indeed With my beginner brain, I wanted to go with an svg, then with a scrollTrigger, simply scale it, but I don't know if it's the good start. https://www.magnetism.fr/en/contact/ Thanks Contact - Magnetism _ Creative Agency - Google Chrome 2021-12-22 12-49-55.mp4 Link to comment Share on other sites More sharing options...
mvaneijgen Posted December 22, 2021 Share Posted December 22, 2021 Quote With my beginner brain, I wanted to go with an svg, then with a scrollTrigger, simply scale it, but I don't know if it's the good start. Sounds like a good start to me. Whip up a demo on Codepen.io and come back here when you get stuck! 3 Link to comment Share on other sites More sharing options...
makilyes Posted December 22, 2021 Author Share Posted December 22, 2021 @mvaneijgen Code Pen : See the Pen YzrxzZX by shahyne (@shahyne) on CodePen So I started with the scale. It kind of work, but not as smooth as the website (https://www.magnetism.fr/en/contact/), depending on the size of screen. When I lower the scale ratio, when I arrive at the second section I see white space, it doesn't cover all before the section. So I don't know if it's because, i'm doing something wrong, or I'm missing something. My second question, for the magnet thing and chaging the shape, which method should I look for, or method to use in Gsap. Thnaks Link to comment Share on other sites More sharing options...
mvaneijgen Posted December 22, 2021 Share Posted December 22, 2021 Hey @makilyes I've add some tweaks, mainly set the easing to none (I find when having a scroll element with scrub, no easing makes it smoother (GSAP animation have a ease by default)). I've also removed the react stuff, because I couldn't figure out if that was something that was introducing 'laggy-ness', but you can easily copy the code to your project. For shape changing, I would look in to MorphSVG and have it change shape on mouse move, and just rotate that shape with the mouse. 1 Link to comment Share on other sites More sharing options...
OSUblake Posted December 22, 2021 Share Posted December 22, 2021 7 minutes ago, mvaneijgen said: Hey @makilyes I've add some tweaks Did you forgot to include a CodePen? Link to comment Share on other sites More sharing options...
makilyes Posted December 22, 2021 Author Share Posted December 22, 2021 @mvaneijgen Is there a codepen link ? Or I just have to put the ease to none. Ok I'll check for the MorphSVG Thanks Link to comment Share on other sites More sharing options...
mvaneijgen Posted December 22, 2021 Share Posted December 22, 2021 I did forget to include the codepen link See the Pen abLLmrm?editors=1010 by mvaneijgen (@mvaneijgen) on CodePen 4 Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now