How to create circular curtains animation using GSAP used in Facets of the Rhone Website? - Stack Overflow

admin管理员组

文章数量:1387392

I am wondering on what command was used in creating this animated circular curtains when scrolling down the website as shown in the video below using GSAP. It's been interesting to me and I wonder what code is used to create it because I'm not familiar what is the name of the command used.

That animation when we scroll down, two semicircles appear and created like a funnel. That's the kind of animation I'm after. I do not know the specific animation used in there.

Do not mind about the circle running down when scrolled. It's not needed...:-)

Any hints, guides or simple working examples would suffice. Thanks!

The website I'm referring to is /

I am wondering on what command was used in creating this animated circular curtains when scrolling down the website as shown in the video below using GSAP. It's been interesting to me and I wonder what code is used to create it because I'm not familiar what is the name of the command used.

That animation when we scroll down, two semicircles appear and created like a funnel. That's the kind of animation I'm after. I do not know the specific animation used in there.

Do not mind about the circle running down when scrolled. It's not needed...:-)

Any hints, guides or simple working examples would suffice. Thanks!

The website I'm referring to is https://www.visagesdurhone/en/

• gsap

Share Improve this question Follow asked Mar 19 at 1:49 theic_oceantheic_ocean 722 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

One of the ways you could approach developing this kind of animation is to use an SVG morph library to transform one path of the shape to another, and GSAP ScrollTriger plugin to connect together the SVG morph transformation and the user's scrolling activity.

In my example Flubber is used but there are other libraries that allows you to morph an SVG path.
Flubber provides you with the interpolators functions that you can call by passing to it the value from 0 to 1 to get exact transformation of the path at each frame of your animation.

const startPath = "M0 0C0 280 280 560 560 560L0 560 0 0Z";
const endPath = "M0 0C280 0 560 280 560 560L0 560 0 0Z";
const morphPath = flubber.interpolate(startPath, endPath);
morphPath(0);   // to get transformation at the beginning
morphPath(0.5); // in the middle
morphPath(1);   // and at the end of transformation

Using GSAP onUpdate: config, you supply a callback in which you could get the state of current scrolling motion, exactly the value from 0 to 1, where 0 denotes - we haven't yet reached the scrolling area of interest, and 1 we've scrolled it out of view, and the values in between.

In your gsap ScrollTrigger options, inside onUpdate you get the path transformation with which you update the SVG elements.

onUpdate: (self) => {
    const scrollingProgress = self.progress.toFixed(2);
    leftHalfSvgPath.setAttribute("d", morphLeftPath(scrollingProgress));
    rightHalfSvgPath.setAttribute("d", morphRightPath(scrollingProgress));
  }

To get animation appears visually similar to a provided reference, adjust ScrollTrigger config options : start: and end: to precisely control at what point of scrolling the animation should start (and end) operating.
Refer to GSAP Documentation to learn more about configuration options - https://gsap/docs/v3/Plugins/ScrollTrigger/?page=1

To get you an idea, here's CodePen - https://codepen.io/ajishiguma/pen/QwWZLbL

---

As a bonus, there is a really good online tool to work with SVG paths, create and edit d path attribute's commands with ease - https://yqnn.github.io/svg-path-editor/

本文标签： How to create circular curtains animation using GSAP used in Facets of the Rhone WebsiteStack Overflow