Jump to content
Search Community

Turning a picture into a circle

vadbiz test
Moderator Tag

Recommended Posts

Hello everybody!

I am new to GSAP and need help. I found an example of how to turn a picture on the background into a circle, but I need it to be when scrolling. How to implement? With scrolltrigger or no?

 

Before scrolling:

http://joxi.ru/ZrJx7vxCnp1pX2

 

After scrolling:

http://joxi.ru/E2p7GQ7hGZBW9m

 

Help with the implementation, please.
I can't even think of how to do it.

See the Pen abpeVPv by alexverb_msk (@alexverb_msk) on CodePen

Link to comment
Share on other sites

 

Hello there @vadbiz

 

58 minutes ago, vadbiz said:

How to implement? With scrolltrigger or no?

 

If you need it to happen on scrolling, then yeah, ScrollTrigger sound like the tool you want to be using for that.

 

 

59 minutes ago, vadbiz said:

I can't even think of how to do it.

 

The getting-started article and documentation for ScrollTrigger and the videos on those pages might be a very good starting point then to get familiar with how to approach a scenario like that. Also, there are lots of demos on the ScrollTrigger demo-page.

 

Here's one way that demo could work using ScrollTrigger. Hope that helps.

 

See the Pen ef265f243c8698341c05a76596c2f8fc by akapowl (@akapowl) on CodePen

 

  • Like 3
Link to comment
Share on other sites

1 hour ago, akapowl said:

 

Hello there @vadbiz

 

 

If you need it to happen on scrolling, then yeah, ScrollTrigger sound like the tool you want to be using for that.

 

 

 

The getting-started article and documentation for ScrollTrigger and the videos on those pages might be a very good starting point then to get familiar with how to approach a scenario like that. Also, there are lots of demos on the ScrollTrigger demo-page.

 

Here's one way that demo could work using ScrollTrigger. Hope that helps.

 

 

 

 

https://vadev.ru/sites/philip/

Thanks for the great help! Can you please tell me how to make a transparent background instead of white?

And why, for some reason, the site slows down very much :( Could this be due to animation?

Link to comment
Share on other sites

26 minutes ago, vadbiz said:

Can you please tell me how to make a transparent background instead of white?

 

You could change the fill of the #goAway rect to an rgba-value or set the fill-opacity to what you'd like.

 

See the Pen 2d6afde2c4929e058701bba06c86a4bb by akapowl (@akapowl) on CodePen

 

 

26 minutes ago, vadbiz said:

And why, for some reason, the site slows down very much :( Could this be due to animation?

 

I couldn't tell - on my end nothing slows down on that page.

 

Is it slowing down things for you in the codepen demo?

If not, it's maybe something on your page causing it?

 

Link to comment
Share on other sites

42 minutes ago, Cassie said:

The demo looks great to me!

If it's a bit laggy, maybe try clip path? Clipping is a bit more performant as it just uses geometry and doesn't have to work out alpha values.

Simplified demo here. (also supporting the transparency aspect that you needed)

 

 

This works great, with two points:
1) how can I make the minimum circle size for a picture?
2) at the moment a picture appears from the circle - how can I "unfold" this animation?

Link to comment
Share on other sites

I'm afraid I don't know what you mean by unfold.

the circle radius at the moment is animating to a radius of 200, as specified in the SVG code

<circle id="clip-circle" r="200" cx="50%" cy="50%" />
 

From scale:0 in the GSAP tween, where 0 is completely scaled down and 1 is the original size specified in the SVG code.

You can change the scale value to change the minimum circle size.

  • Like 1
Link to comment
Share on other sites

3 minutes ago, Cassie said:

I'm afraid I don't know what you mean by unfold.

the circle radius at the moment is animating to a radius of 200, as specified in the SVG code

<circle id="clip-circle" r="200" cx="50%" cy="50%" />
 

From scale:0 in the GSAP tween, where 0 is completely scaled down and 1 is the original size specified in the SVG code.

You can change the scale value to change the minimum circle size.

In general, the task is to make a circle from the background with the same picture. Perhaps this is easier to solve? Because I also DO NOT need free space under the circle.

Link to comment
Share on other sites

Ah ok, so you probably need the scale to go from 1 to 0.5. Currently it's going from 0 to 1.

The demos we've provided have all the pieces you need to finesse the solution you need.

Why don't you give it a go? We'll be here if you get stuck.

  • Like 2
  • Thanks 1
Link to comment
Share on other sites

5 minutes ago, Cassie said:

Ah ok, so you probably need the scale to go from 1 to 0.5. Currently it's going from 0 to 1.

The demos we've provided have all the pieces you need to finesse the solution you need.

Why don't you give it a go? We'll be here if you get stuck.

Thank you!
How can I change the scale?

 

I try, I try) I've been sitting on this problem for 5 hours, trying to understand, but all is unsuccessful.

 

Please, help me...

Demo: 

 

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.
×
×
  • Create New...