how to circular video to full screen with round image

[renny]

i need a help to video scale as per below example 

 

 

See the Pen GRxpQOM by solace-digital (@solace-digital) on CodePen

[GreenSock]

@renny, I noticed you keep posting questions like this (3 in the past 9 hours) and I just wanted to gently request that you read the forum guidelines. We're happy to help with GSAP-specific questions. We just don't have the resources to offer free general consulting services or build custom tutorials in response to "how do I recreate this cool effect I saw on another site...?" questions.

 

You'll greatly increase your chances of getting a helpful answer if you accompany them with a minimal demo showing your attempt that may not be working [yet]. I'd encourage you to read the ScrollTrigger docs (there are videos and tons of demos too) and give it a try yourself and then if you get stuck, come back here and post your minimal demo along with the GSAP-specific question.

 

Happy tweening!

[renny]

i have added minimal demo, so can you help me how to place video into round circle and scale to full screen 

[GreenSock]

Sorry, @renny, you keep violating the forum guidelines and this is another example. You didn't even put a video in your demo or attempt to make it work on your own. These forums are not a place to have other people solve your general web development problems for free - this community welcomes GSAP-specific questions like "how can I pause my timeline on hover" or "Is there a feature available for setting up ScrollTriggers for different media queries?"

 

If you need more general help (not GSAP-specific), I would recommend seeking paid assistance by posting in the "Jobs & Freelance" forum. Hire an expert that can come alongside and dig into your more complicated challenges. 

 

Good luck with your projects. 👍

[renny]

so how to i need to know which animation i need a help on my code ?

[Cassie]

This forum thread goes into circular reveals with SVG and a mask. Why don't you give it a go yourself and let us know if you get stuck.

 

If you get stuck please provide a minimal demo along with an explanation of what you're struggling to understand. Just the circle clip animation that you are struggling with. Not your entire project and we'll see if we can help.

[renny]

thanks for suggesion 

 

but i found another example, but i don't know how to reverse this animation on scroll 

 

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

[GreenSock]

5 minutes ago, renny said:

but i don't know how to reverse this animation on scroll 

I'm not sure I understand what you mean, but perhaps just invert the values. If you want it to start out small and get big, then make the animation values do that. 

[Cassie]

This is the tween that needs to be adjusted in case that helps.
 

const anim = gsap.fromTo(
  "#cover",
  {
    attr: {
      r: () => {
        return r;
      }
    }
  },
  {
    attr: {
      r: () => {
        return window.innerHeight / 3;
      }
    }
  }
);

 

[renny]

have create pin, but it's not circular on 100% on scroll

 

See the Pen JjLGYGW by solace-digital (@solace-digital) on CodePen

[Cassie]

Hi again Renny. This is just a fork of someone else's code alongside a statement that doesn't really make sense.

 

It's not clear at all what 'it's not circular on 100% on scroll' means. Are you asking for help? What isn't circular? What is 100% on scroll?

This is the last time I will ask before this thread gets locked too. Please only use these forums for GSAP specific questions, and if you have a question please have the courtesy to take the time to explain clearly what it is you're struggling with and what you've attempted.

 

We can't keep explaining the forum guidelines to you. You have all the information necessary in this thread to create the effect you're after, but it's not up to us to do the work for you. You have to take the information away and extrapolate the parts that are necessary for your use case.

 

I wish you the best of luck with your project, but we can't continue answering these threads unless you try to meet us halfway with our efforts.

[renny]

how to incress size of rotate middle svg and video 

 

[Cassie]

The thread and subthreads go into detail with many examples on how to achieve this. Using masks or clip path. There are several working demos including one you linked to.

In this one you've just used border radius on a div. That's a completely different approach. 

[Cassie]

I'm locking this thread now too I'm afraid. Sorry Renny. The relevant information has been provided but you keep asking the same questions with the aim of getting people to do the work for you. As we've mentioned before if you're truly stuck and you need assistance you could reach out in the freelance forums and find some paid help.

If you want to achieve this yourself, I suggest thoroughly reading through the examples in this thread and the contained thread.

 

Here's a bonus article too with a ton of information on clip paths. Both CSS and SVG. 

https://css-tricks.com/almanac/properties/c/clip-path/

 

Good luck.