Jump to content
Search Community

SmoothScroller fixed position when regular html content above and below - any workarounds?

WEB1995 test

By WEB1995
in GSAP

Moderator Tag
 Share

Recommended Posts

WEB1995 test

WEB1995

Posted
Posted

Hi GSAP,

 

We just signed up for Premium because wanted to smooth out the scolling on an animation but when applying SmoothScroller to a multiple animation timeline with pinning, scaling, video mask layer with regular content above and below the animation -  but we found SmoothScroller converts the container to fixed position and overlaps the content -  we don't want it to do that.

 

Just searched around and found this article (https://medium.com/@terencegrover/smooth-scrolling-with-gsap-overcoming-fixed-positioning-challenges-dbce33b08d49) which describes the same problem, the solution wsa reported to be use a React function useLayoutEffect - we dont use React normally and where not really planning on switching to react for such a small website.

Not a regular GSAP user just from time to time we make use of it and usually all good, but not sure if SmoothScroller is going to smooth out the animation on the scrollbar with mousepointer its much smaller moves which is good but mousewheel jump steps is a bit and overdoes it - would SmoothScroller actually fix that? 

let gridTl = gsap.timeline({
    scrollTrigger: {
        scrub: 1,
        start: "5% top",
        end: "15% top",
        toggleActions: "play none none none",
    }
})
.add("start1")
.from(".column-2 .grid-image.top", {
    duration: 1.5,
    x: 0,
    y: '100%'
}, "start1")
.from(".column-1 .grid-image.middle", {
    duration: 1.5,
    xPercent: 100,
    yPercent: 0
}, "start1")
.from(".column-3 .grid-image.middle", {
    duration: 1.5,
    xPercent: -100,
    yPercent: 0
}, "start1")
.from(".column-1 .grid-image.bottom", {
    duration: 1.5,
    xPercent: 100,
    yPercent: -100
}, "start1")
.from(".column-2 .grid-image.middle", {
    duration: 2,
    xPercent: 0,
    yPercent: -100
}, "start1")
.from(".column-2 .grid-image.bottom", {
    duration: 2.5,
    xPercent: 0,
    yPercent: -110
}, "start1");




let gridT2 = gsap.timeline({
    scrollTrigger: {
        trigger: '.grid-section',
        start: "12% top",
        pin: true,
        scrub: true,
    }
})
.to(".grid-section", {
    duration: 1,
    scale: 4
})
.to(".column-2 .grid-image.bottom", {
    display: 'none'
});


let gridT3 = gsap.timeline({
    scrollTrigger: {
        trigger: '#videoContainer',
        start: "46% top",
        pin: true,
        scrub: true,
    }
});

Here is a link to the staging server for a work in progress just put this together but if its going to be worth it might spend more time on it -> https://thewanderer.madewithweb.com/


Is there any known workaround for this without using React?

 

Thanks,

 

Paul
 

Link to comment
Share on other sites
Rodrigo test

Rodrigo

Posted
Posted

Hi @WEB1995 and welcome to the GSAP Forums!

 

Thanks for being a GSAP Club member and supporting GSAP!

 

I tested the live URL you posted but I don't see ScrollSmoother being used in it. I do see that you have scroll-behavior: smooth; in your <html> tag. That can create a few issues with ScrollTrigger as Jack mentions in this post:

Using React in an app is not really the way to make things work, maybe wait for the images/videos to be completely loaded before creating the ScrollSmoother instance and the ScrollTrigger instances. 

 

Finally you can create a minimal demo in Codepen using the bonus plugins, that clearly illustrates the issue you're having, just do your best to keep your demo as small as possible. You can fork this codepen:

See the Pen aYYOdN by GreenSock (@GreenSock) on CodePen

 

Hopefully this helps.

Happy Tweening!

Link to comment
Share on other sites
GreenSock test

GreenSock

Posted
Posted

Yeah, you totally don't need to use React. Quite the contrary. 

 

The "solution" they offered there has absolutely nothing to do with useLayoutEffect() - it's the sentence after that in the article: 

Quote

For the element you wish to fix, simply add data-speed=`0.01`. This attribute not only fixes the element but also adds a subtle parallax effect, enhancing the visual appeal.

So it's the data-speed attribute that was doing it. 

Link to comment
Share on other sites
WEB1995 test

WEB1995

Posted
  • Author
Posted

Hey thanks for answering Rodrigo made a quick code pen to illustrate the problem trying to find a solutions for

 

Before turning on the SmoothScroller plugin on the demo site the animation with ScrollTriggers with in the correct place with content abiove and below but as soon as turning on SmoothScroller it converts the animation to fixed position all the content above and below is no longer above and below. as described in the article https://medium.com/@terencegrover/smooth-scrolling-with-gsap-overcoming-fixed-positioning-challenges-dbce33b08d49

Jack thanks for replying - can see this example that I took from the demo gallery and stripped out to has the data-speed attributes but it still makes the animation overlap content abive and below due to fixed positioning - could use paddings and margins but trying to avoid that - is it unavoidable to have fixed positioning?


See the Pen dyLpKwK by psthomson75 (@psthomson75) on CodePen

 

BTW I turned off SmoothScroller on the staging site (as other people where looking at it) but the moment turned it on the animation jumps to the top of the page and any pinned objects get overlapped

 

Have added a version with the SmoothScroller on the staging site so you can see the problem...


https://thewanderer.madewithweb.com/ (Without SmoothScroller)
https://thewanderer.madewithweb.com/smoothscroller/ (With SmoothScroller)

 

Hope that is clearer, thanks!

 

Paul
 

 

Link to comment
Share on other sites
GSAP Helper test

GSAP Helper

Posted
Posted

Hm, I'm not quite sure what you're expecting to happen, what you think is broken, etc. Here are some tips that will increase your chances of getting a relevant answer:

  • A clear description of the expected result - "I am expecting the purple div to spin 360degrees"
  • A clear description of the issue -  "the purple div only spins 90deg"
  • A list of steps for someone else to recreate the issue - "Open the demo on mobile in IOS safari and scroll down to the grey container" 
  • A minimal demo (saw that, thanks) ✅

Would you mind clarifying your question please?

 

If you want something to stay put (like position: fixed), did you try using ScrollTrigger's "pin" feature?  

Link to comment
Share on other sites
WEB1995 test

WEB1995

Posted
  • Author
Posted

Hi All,

 

It's ok I figured out what the problem was, when using SmoothScroller need to make sure the smooth-wrapper is around all content not just the animation!

 

See the Pen dyLpKwK by psthomson75 (@psthomson75) on CodePen

(smooth-wrapper around animation only - all the content overlaps)

 

See the Pen XWQpJmB by psthomson75 (@psthomson75) on CodePen

(smooth-wrapper around all content  -now the content keeps the same layout + has smooth scroll 😎)

 

Instead of trying to describe again just forked the codepen with a fixed version.

 

Cheers,

 

Paul

 

 

  • Like 2
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...