Clone Project

You Need to Know This - Magical Radius 72vmax for Circle Clip Path Animations

Created by
Web Bae
Similar Projects
Oops! Something went wrong while submitting the form.

0 Comments

Be the first to leave a comment.
Loading
User is typing...
No Name
Set
4 years ago
Moderator
This is the actual comment. It's can be long or short. And must contain only text information.
(Edited)
No Name
Set
2 years ago
Moderator
This is the actual comment. It's can be long or short. And must contain only text information.
(Edited)
Load More
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Load More
Description:  
AI Description

The Circle Clip on Scroll component utilizes a 72vmax clip path radius to create a dynamic circular clipping effect that covers the viewport during scrolling. This component is inspired by an award-winning animation from Significo and is implemented using GSAP's ScrollTrigger for smooth animations.

Key Features:

  • Utilizes GSAP's ScrollTrigger for scroll-based animations.
  • Dynamic clip path effect that adjusts to viewport size.
  • Animation timeline that reveals content as the user scrolls.
  • Visibility control for background video based on scroll position.

Design Elements:

  • Circular clipping effect that creates a visually striking transition.
  • Background video that enhances the immersive experience.
  • Text elements that animate in conjunction with the scroll, creating a layered effect.

Potential Use Cases:

  • Creative portfolios showcasing visual work.
  • Landing pages for innovative products or services.
  • Promotional websites for events or campaigns.
  • Artistic websites that require engaging visual storytelling.

Conclusion: The Circle Clip on Scroll component offers an engaging way to present content through innovative scrolling animations, making it suitable for various creative applications.

Description from Webflow:  
72vmax is the perfect clip path circle radius to make sure a clipped circle covers the viewport in any aspect! Let's explore why it work by recreating the award winning animation from awwwards by Significo with GSAP scrolltrigger and clip path. Learn in Patreon: https://www.patreon.com/posts/you-need-to-know-105729344?utm_medium=clipboard_copy&utm_source=copyLink&utm_campaign=postshare_creator&utm_content=join_link Inspo: https://www.significo.com/ Awwwards Page: https://www.awwwards.com/sites/significo
Tags from Webflow: 
awwwards,  award winning,  clippath,  gsap,  gsapscrolltrigger,  scrolltrigger
.