MrJL

Thanks Cassie I'll give it a go

Thanks Cassie! I actually figured that out yesterday with a little reading so things are moving in the right direction for me. Now I've got it working I'm pretty underwhelmed with the effect and wondering if it would be more interesting to tween from the arch shape to full screen on scroll. I've seen it done before and it looks pretty good. Can an svg path be set to 100vw/100vh?

Thanks Cassie that makes perfect sense. I'm still getting a bit lost in the myriad different ways of achieving things with gsap, hence why I'm building wheels out of wheels haha!

Hi everyone. I've put together a pen with an svg path that's animated on scroll. I'd like to develop it so that it's an image with an animated clip-path rather than a flat svg. Is there a simple guide somewhere on how to do this? I looked but all I found were other people's pens and I'm still pretty new to gsap so reading them and understanding them is still out of my reach. But if there's a simple tutorial or guide on how to do this I'd love to read it!

Thanks Rodrigo that's working perfectly. I'll have a read through the mistakes link now!

Thanks guys. As you quickly figured out I've been hacking around a lot and trying a few different things... and got myself in a pickle in the process. Here's the new codepen that's updated with your advice and suggestions, but the staggering of the letters still isn't working. Sure it'll be an easy fix for you guys who know what you're doing but it's still a mystery to me. https://codepen.io/mrjonoces/pen/mdQQWdg

Hi. I'm trying to get three letters of a logo to animate in from below sequentially, but I can't get it to work. The header shows successfully once you scroll down, but the letters never get the class added. If anyone can show me where I'm going wrong that would be great.

Perfect! Thanks Cassie!!!

Hi! I've made a simple animated set of letters that animate on hover. I'd like a delay before the animation reverses so more than one letter can be seen at once. This works, but only for the first mouseleave. Have I set this up wrong? Thanks! https://codepen.io/mrjonoces/pen/eYPRGVX?editors=0010

Amazing Rodrigo, it's working perfectly. Simplicity is usually the solution! Thank you so much for taking the time to completely rewrite that, that's above and beyond. I really appreciate your efforts.

So by investigating the issue with the console I can see that the mouseout event isn't firing when the mouse leaves the square div the shapes are contained within. Weirdly it only fires when the mouse moves through the vertical centre line of the div or when the mouse moves out of the div on the right edge. But even when that event gets logged the reset animation doesn't play, so something else is going on too. It also appears that each timeline only plays once, I'm guessing due to the same issue? https://codepen.io/mrjonoces/pen/yLRMMYp?editors=1111

Yes, thank you for the reply Jack!

In using console log to diagnose the issue I saw the warning that the MorphSVG plugin is a premium feature, which means I can't use it as this is for a university funded site with a tiny budget so I'm going to have to go back to the drawing board with this idea unfortunately

I did, on line 33 of the js: var onSVGleave = $(".svg-shape");

So I've given that a go and I can't get the reset timeline to fire. Have I misunderstood what you meant in your instructions @mvaneijgen? https://codepen.io/mrjonoces/pen/yLRMMYp