Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
makilyes

how to tacle this aninmation

Recommended Posts

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

Link to comment
Share on other sites

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!

  • Like 3
Link to comment
Share on other sites

@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

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.

  • Like 1
Link to comment
Share on other sites

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

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×