[Clip path image reveal]

Hi, I'm trying to build an image reveal transition on a website. Found a great example on the web, copied the structure. The structure I'm basing my code is based on one rect with x, y, width and height attributes animated in a Gsap timeline and an svg clip path appended in a clip path object.

Right now the path is animated, but I can't seem to replicate exactly the effect I want.

Here's the pen of what I was able to do until now:

Here's a video/gif of what I would like to achieve

 

I can use morphSvg or other plugins but I'd like some pointers to use the right tool for the job.

Thanks as usual!

 

See the Pen LYqOjbO by luigi-basile (@luigi-basile) on CodePen

[Experimenting with MorphSvg and Clip path]

Thanks a lot Rodrigo, I can see my mistake now.

 

[Experimenting with MorphSvg and Clip path]

Hi Rodrigo, thanks a lot for the solution, but I'd like to transform the square into the clip path shape, I know it works in reverse but I have to transform the square into the clip path shape. Is it possibile?

[Experimenting with MorphSvg and Clip path]

Thanks a lot Rodrigo. I'm still experimenting and wanted to try to morph the shape from a rounded rectangle to the final shape, but I can't seem to use 'rect'.

When I try to morph the shape now it doesn't give out any errors, but nothing happens in the same time.

I'm attaching the updated pen.

 

See the Pen rNPwZLp by luigi-basile (@luigi-basile) on CodePen

[Experimenting with MorphSvg and Clip path]

Ok Rodrigo, I corrected the svg path values and now it works, but basically I'd like to revert the morph.

I'd like to start from the circle and then transform it in the clip path.

I updated the Pen:

See the Pen bGzWQJE by luigi-basile (@luigi-basile) on CodePen

Thanks!

[Experimenting with MorphSvg and Clip path]

Hi Rodrigo, thanks for the help, at least it works now, but it still doesn't look the way I want. I'll try to explain it better:

Basically I'd like to transform the round shape into the clip path with the ID clipPath1, which clips the background.

How can I achieve this result? Is it something that can be done?

[Experimenting with MorphSvg and Clip path]

Hello everyone, I'm basically trying to animate an svg circle into a more complex svg which I'm using as a clip-path for a background.

Basically the issue I'm having is that morph Svg won't morph the shape giving me the ERROR: malformed path: undefined

I've tried cleaning the svg with SVGOMG but nothing changed. I'm attaching a minimal demo of what I'm trying to achieve.

Can you help me? Thanks a lot!

 

 

See the Pen oNmWPGK by luigi-basile (@luigi-basile) on CodePen

[Horizontal scrollsmoother with scrolltrigger and anchors]

Yes, that's exactly how it should work Cassie! Thanks a lot. So what should I change? The scrollsmoother version (which I include directly from the business green package) or gsap?

[Horizontal scrollsmoother with scrolltrigger and anchors]

Hi all, sorry to bother you again but suddenly the parallax on scrollsmoother doesn't work anymore. If you try scrolling one of the pens in the topic, you can see the parallax effect is not working but it worked perfectly before. What am I missing? it was working just fine before!

Thanks!

[Horizontal scrollsmoother with scrolltrigger and anchors]

Hi Rodrigo, thanks a lot!

Seems to work but if you add another section in the middle, for example, the calculation are wrong and the buttons don't appear at the right time.

Updated the pen with another section added. Thanks for your time!

See the Pen poxmvvw by luigi-basile (@luigi-basile) on CodePen

[Horizontal scrollsmoother with scrolltrigger and anchors]

Hi Rodrigo, thanks a lot for the solution again. I was wondering if you could help me in making the nav buttons appear only when they reach a particular slide. Basically I'd like the "go to the last slide" button to appear only when it reaches the last slide, and the "go to the first slide" to remain visible only on the first slide.

I know I should use ContainerAnimation, but in my example I'm already using it for the horizontal scroll and I don't know how to use it for this purpose too. I updated my pen.

See the Pen poxmvvw by luigi-basile (@luigi-basile) on CodePen

 

Thanks a lot!

[Horizontal scrollsmoother with scrolltrigger and anchors]

Works great!! Thanks a lot Rodrigo.

May I ask you if you have any idea as to why the refresh resize isn't working (you can see it in the codepen I posted). If you resize the browser window you will see a white space growing at the end, but it should refresh all dimensions and object positions in the horizontal scroll instead.

Thanks a lot!

[Horizontal scrollsmoother with scrolltrigger and anchors]

Hello, we just recently acquired the Business Green membership and we're experimenting with Scrollsmoother and such, so far everything is great.

I'm trying to build a website with horizontal scroll in HP, with scrollsmoother and some cool parallax effects using this example that works great (you basically add the attribute data-speed-x to the element you want to give the parallax effect to).

Now I'm trying to add some anchor links in the page to (smooth)scroll to the last section and return to the first one and I can't seem to find a good solution. I tried a bunch of different methods using scrollTo plugin, but nothing worked. Can you help me finding a way to put smooth scroll links to the internal sections of my pen example?

Thanks a lot in advance.

See the Pen bGmMbNj by luigi-basile (@luigi-basile) on CodePen