[Pinning with smoothscroll]

Oh Fantastic! Thanks heaps.

[Pinning with smoothscroll]

Hi guys

I'm having a few issues trying to work out how to pin an object when using scrolltrigger and scroll smooth.

Essentially I want the header element to be fixed to the bottom of the viewport until it hits the footer, then it will push up just like position sticky behaviour.

I have the feeling my pen is way off. I seem to have a huge viewport height element between the header and the <main> element for some reason and the positioning is not working at all as expected.

Does anyone have any thoughts on how to resolve?

Many thanks in advance for any help.

See the Pen GRejWYp by jloafs-DM (@jloafs-DM) on CodePen

[Issues with draggable and inertia]

Thanks so much

[Issues with draggable and inertia]

Hi guys,

I'm trying to create a netflix type horizontal list of videos that can be scrolled by dragging. I want the dragging to have a softness to it so assumed the inertiaPlugin would be the way to go. Its my first time using either of these so am finding it difficult to trouble shoot.

I set up a rough pen to illustrate. Can anyone shed any light on how to resolve this? Also ideally dont' want the contents within the scrollable window to be scrolled beyond the end of the content - ie don't want the contents to be scrolled leaving a big gap after the last element.

 

Also the elements inside will be videos so need to be clickable - I notice that the drag hijaks the cursor. Is there a workaround for that?

See the Pen eYXzBpo by jloafs-DM (@jloafs-DM) on CodePen

[Scrollsmoother issue with accordion/expanding content]

That's awesome Cassie - thanks heaps.

[Scrollsmoother issue with accordion/expanding content]

Actually it's hard to replicate in codepen - but on my website, the footer gets pushed when the accordion is expanded. After expanding the accordion, scrolling down to view the footer doesn't seem possible. But on codepen it works.

[Scrollsmoother issue with accordion/expanding content]

I'm trying to use scrollsmoother on a page with an accordion that changes the height of the page.

 

This seems to clash with either the wrapper or content div used for the scrollsmoothing - as you can see with the pinned footer after opening and closing the accordions.

 

Is there a way to fix this? Many thanks in advance for any help.

See the Pen eYLPYwb?editors=0100 by jloafs-DM (@jloafs-DM) on CodePen

[Animate a clip path on a pseudo element with scrolltrigger]

Thanks so much - that's perfect!

[Animate a clip path on a pseudo element with scrolltrigger]

Hi guys

 

I'm trying to animate a clip-path on the pseudo :after element on multiple blocks using scrolltrigger.

 

No idea at all why this isn't working - can anyone spot my (probably multiple) errors?

 

Many thanks in advance.

See the Pen eYKqZVj by jloafs-DM (@jloafs-DM) on CodePen

[Scroll smoothing and pointer events issue]

Oh that's perfect - thanks so much

[Scroll smoothing and pointer events issue]

Hi guys

 

I'm trying to create a footer that is revealed when the bottom of the page is reached. I have the footer in a fixed position at the bottom of the screen (outside of the scroll smooth wrapper) and using z-index to keep it under the page body. However Ive run into an issue - footer links are not clickable. I've tried numerous combinations of pointer-events on different elements but can't get this to work.

 

Can anyone shed any light on this issue?

 

Many thanks in advance.

See the Pen WNyMqyG by jloafs-DM (@jloafs-DM) on CodePen

[Flip between different list items]

That's awesome thanks Trapti. Have a great day.

[Flip between different list items]

If anyone could shed some light on this I'd be very grateful.

 

I'm trying to animate the flip of an underline between li items in a nav. The underline is switching position but it's not animating. What am I missing?

 

Many Thanks.

 

See the Pen ZERLdJB?editors=0010 by jloafs-DM (@jloafs-DM) on CodePen

[Change pseudo element 'content' on scroll using data attr]

Thanks Rodrigo.

 

Yeah, not quite - I didn't find a way to implement via the content of the pseudo element but went in a different direction using innerHTML which worked for my needs.

 

Thanks for the follow up.

[Change pseudo element 'content' on scroll using data attr]

Hi guys. I'm attempting to change the text content of a pseudo element on scroll by replacing the text using a data attribute on each section. It isn't working and I suspect the content property isn't supported. Is there a simple solution to this? Many thanks in advance.

[Pausing then resuming a timeline]

Brilliant - thanks. For some reason I was missing the 'add' in 'addPause' when playing with this.

[Pausing then resuming a timeline]

Hi guys

 

I'm trying to figure out how to pause a timeline (between these .to) then add a button to resume the playback from the pause point. Any help would probably save me hours banging my head against a wall 

 

.to("element", {
      delay: -1,
      opacity: 1,
      y: "0",
      duration: 1.5,
      ease: Power4.easeOut,
    })
    .to("element", {
      delay: 5,
      opacity: 0,
      y: "-100vh",
      duration: 1.5,
      ease: Power4.easeOut,
    })

 

[Adding Scroll smoother to Wordpress]

Of course - you're absolutely right 😀 Thanks so much.

[Adding Scroll smoother to Wordpress]

Hi guys.

 

I'm trying to add Scroll Smoother to Wordpress but getting errors. Can I just check this is the correct way to include? 

 

I have added the ScrollSmoother.min.js file to a folder called 'js' and am enqueueing the script in my functions.php file like so:

 

wp_register_script('scrollsmoother', get_template_directory_uri() . '/js/ScrollSmoother.min.js', array(), 1, true);
        wp_enqueue_script('scrollsmoother');

Is this the correct way?

 

Here's the errors btw:

 

ScrollSmoother.min.js?ver=1:10 Uncaught TypeError: Cannot read properties of undefined (reading '_getVelocityProp')
    at Function.register (ScrollSmoother.min.js?ver=1:10:825)
    at _createPlugin (gsap.min.js?ver=1:10:40546)
    at gsap.min.js?ver=1:10:40564
    at Array.forEach (<anonymous>)
    at Object.registerPlugin (gsap.min.js?ver=1:10:40069)
    at ScrollSmoother.min.js?ver=1:10:8984
    at ScrollSmoother.min.js?ver=1:10:140
    at ScrollSmoother.min.js?ver=1:10:175
register @ ScrollSmoother.min.js?ver=1:10
_createPlugin @ gsap.min.js?ver=1:10
(anonymous) @ gsap.min.js?ver=1:10
registerPlugin @ gsap.min.js?ver=1:10
(anonymous) @ ScrollSmoother.min.js?ver=1:10
(anonymous) @ ScrollSmoother.min.js?ver=1:10
(anonymous) @ ScrollSmoother.min.js?ver=1:10
ScrollSmoother.min.js?ver=1:10 Uncaught TypeError: Cannot read properties of undefined (reading '_getVelocityProp')
    at Function.register (ScrollSmoother.min.js?ver=1:10:825)
    at _createPlugin (gsap.min.js?ver=1:10:40546)
    at gsap.min.js?ver=1:10:40564
    at Array.forEach (<anonymous>)
    at Object.registerPlugin (gsap.min.js?ver=1:10:40069)
    at animation.js?ver=1:8:6
register @ ScrollSmoother.min.js?ver=1:10
_createPlugin @ gsap.min.js?ver=1:10
(anonymous) @ gsap.min.js?ver=1:10
registerPlugin @ gsap.min.js?ver=1:10
(anonymous) @ animation.js?ver=1:8

 

[Scrolltrigger issue]

That's perfect, thanks heaps.

[Scrolltrigger issue]

Thanks, yes that's right. How do I revert back to the original state after the end of the trigger? Ideally I want to change the opacity only while the a tag is in the center of the screen.

[Scrolltrigger issue]

Hi guys

 

I'm trying to run a simple opacity animation on each element with the class .recipe-link using scrolltrigger but something isn't working. If anyone could point me in the right direction I'd be really grateful. Apologies if this is me missing something totally obvious - I'm a js novice.

 

Many thanks.

See the Pen WNJrrdg?editors=0010 by jloafs-DM (@jloafs-DM) on CodePen

[disable ScrollSmoother on specific pages]

Ah, of course. Thanks heaps.

[disable ScrollSmoother on specific pages]

Hi. I'm just playing with the new scrollsmoother and wondered if there's a simple way to disable on certain pages rather than apply globally? I notice it automatically creates ids for a scrollcontainer on pages that don't specify a smooth wrapper.

[scrollsmoother and position sticky]

Thanks @akapowl

 

I'll chew this over a little bit. Thanks heaps for your help.