[Pinning elements when using smoothscroller]

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.

[Pinning elements when using smoothscroller]

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.

 

See the Pen zYmOxgB by IslandScott (@IslandScott) on CodePen

[Pinning elements when using smoothscroller]

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.

 

[Animated underline, out and in from same side]

Perfect. Thank you very much for that 😀

[Animated underline, out and in from same side]

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.

[Animated underline, out and in from same side]

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

[Animated underline, out and in from same side]

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.

 

 

Thank you,

 

Scott.

See the Pen WNgBvVM by IslandScott (@IslandScott) on CodePen

[Run timeline only for current element]

Perfect. Thankyou 😀

[Run timeline only for current element]

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 ?

[Run timeline only for current element]

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);

 

[Simple reverse stagger]

Ok great, thanks il take a look

[Simple reverse stagger]

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

[Simple reverse stagger]

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.