dadostudio

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: https://codepen.io/luigi-basile/pen/LYqOjbO 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!

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

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?

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. https://codepen.io/luigi-basile/pen/rNPwZLp

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: https://codepen.io/luigi-basile/pen/bGzWQJE Thanks!

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?

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!

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?

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!

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! https://codepen.io/luigi-basile/pen/poxmvvw

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. https://codepen.io/luigi-basile/pen/poxmvvw Thanks a lot!

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!

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.