IslandScott

Thank you. Yes I wanted to do it without the need to edit the css but i'm sure I can work around it if its not possible. Thanks again for your help.

Thanks for the fast replies. Ive made a simple pen. You will see that the header sits above the content even with pin spacing at false. i want it to sit on top like a fixed element. is that possible ? Thank you. https://codepen.io/IslandScott/pen/zYmOxgB

Hi, I'm using smooth scroller and I'm trying to pin certain elements like my header. I have managed to do it but is there a way to pin them on top of everything else, in the same way as css 'fixed' ? because at the moment when i do it each pinned element still takes up area on the content below. If that makes sense. Thanks, Scott.

Perfect. Thank you very much for that ?

Is there an easy way to make another line come in from the right when hovering, so there always an underline but an 'out and in' kind of animation when hovering. Would I need to use a timeline for that ? Thanks again for the help.

Thank you, I really appreciate that and its very helpful. Il have a play about.

Hi all, i'm trying to create an animated underline for links. I would like the link to start with a line and then on hover the line should disappear to the right and come in from the left. I hope that makes sense, heres what I have so far, any help would be very appreciated. https://codepen.io/IslandScott/pen/WNgBvVM Thank you, Scott.

Perfect. Thankyou ?

Thanks to both of you, appreciate that. Jack, your one works well but instead of the 2 animations running one after another, is there a way where i can have them running at the same time please ?

Hi, I have the following which runs an animation for certain elements but it does it for all elements instead of just the one being hovered. Any way to change it so it only applies to the current element thats being hovered, rather than all of them at once ? Thanks, Scott. // Animate Image Flipper (function($) { "use strict"; var tl = gsap.timeline(); tl.to(".top-image", {y: '-100%', duration: 0.4, ease: 'power3.inOut' }); var tl2 = gsap.timeline(); tl2.to(".bottom-image", {y: '-100%', duration: 0.4, ease: 'power3.inOut'}); tl.pause(); tl2.pause(); $(".image-flipper").mouseenter(function(){ tl.play(); tl2.play(); }) $(".image-flipper").mouseleave(function(){ tl.reverse(); tl2.reverse(); }) })(jQuery);

Ok great, thanks il take a look

wow, as easy as that. Thank you so much ?

Hi, I have the following simple stagger but is there anyway to do it in reverse, so its starts with the last div and works its way back to the start ? gsap.to(".product", {opacity:0, scale:0.95, stagger: 0.1}); Many thanks.