vadbiz Posted May 3, 2021 Share Posted May 3, 2021 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 More sharing options...
akapowl Posted May 3, 2021 Share Posted May 3, 2021 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 3 Link to comment Share on other sites More sharing options...
vadbiz Posted May 3, 2021 Author Share Posted May 3, 2021 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 More sharing options...
akapowl Posted May 3, 2021 Share Posted May 3, 2021 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 More sharing options...
Cassie Posted May 3, 2021 Share Posted May 3, 2021 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) See the Pen 1381ecb558b9c8e39ff22729cc425dd5 by cassie-codes (@cassie-codes) on CodePen 3 Link to comment Share on other sites More sharing options...
vadbiz Posted May 3, 2021 Author Share Posted May 3, 2021 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 More sharing options...
Cassie Posted May 3, 2021 Share Posted May 3, 2021 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. 1 Link to comment Share on other sites More sharing options...
vadbiz Posted May 3, 2021 Author Share Posted May 3, 2021 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 More sharing options...
Cassie Posted May 3, 2021 Share Posted May 3, 2021 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. 2 1 Link to comment Share on other sites More sharing options...
vadbiz Posted May 3, 2021 Author Share Posted May 3, 2021 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 More sharing options...
Cassie Posted May 3, 2021 Share Posted May 3, 2021 We can usually help more effectively if you provide a minimal demo, codepen is great for this! Here's a post explaining how. If you're struggling to understand I recommend taking a step back, giving the ScrollTrigger docs and the getting started article a read and then making a codepen demo.https://greensock.com/docs/v3/Plugins/ScrollTrigger 3 Link to comment Share on other sites More sharing options...
mikel Posted May 3, 2021 Share Posted May 3, 2021 Hey @vadbiz, You could use the motif twice: as a background and in the ClipPath: See the Pen f6fc2871dec3a39456f586a67481712c by mikeK (@mikeK) on CodePen Happy clipping ... Mikel 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