Jump to content
Search Community

Pinning svg on sections with verical and fake-horizontal scroll

Roman Baranov test
Moderator Tag

Recommended Posts

Hello everybody, I need pin some decoration on sections with vertical at first, and fake-horizontal after some time, I found how I can do horizontal scroll, but I don't know how to pin decoration, pinning section horizontally make height of section really big, maybe I should do this with scrollLeft? 

See the Pen RwpQMYK by baranovroman (@baranovroman) on CodePen

Link to comment
Share on other sites

Hi @Roman Baranov,

I'm not quite sure what you're looking to do, but you may find it advantageous to set an overflow hidden on the container you're pinning and and move the SVG inside of that, so that way you won't have any horizontal scroll bars. My guess is that you'll need to use multiple pins and scroll triggers to get the full effect you're looking for. I'd stay away from scrollLeft, generally, as that often complicates things for users with wheeled mice.

  • Like 2
Link to comment
Share on other sites

5 hours ago, elegantseagulls said:

Hi @Roman Baranov,

I'm not quite sure what you're looking to do, but you may find it advantageous to set an overflow hidden on the container you're pinning and and move the SVG inside of that, so that way you won't have any horizontal scroll bars. My guess is that you'll need to use multiple pins and scroll triggers to get the full effect you're looking for. I'd stay away from scrollLeft, generally, as that often complicates things for users with wheeled mice.

But I need start showing SVG after first screen, after show some text content, and only after that pin sections horizontally, I think overflow broke SVG outside of container

Link to comment
Share on other sites

I'm afraid I'm a bit lost here as well.

The SVG has quite a high width and height value specified on it, so if the issue is layout breaking that may be something to look at?
If you're struggling to explain in words, maybe you can draw a diagram? Sometimes breaking down the steps gives you an idea of where to start.

  • Like 1
Link to comment
Share on other sites

4 hours ago, Cassie said:

I'm afraid I'm a bit lost here as well.

The SVG has quite a high width and height value specified on it, so if the issue is layout breaking that may be something to look at?
If you're struggling to explain in words, maybe you can draw a diagram? Sometimes breaking down the steps gives you an idea of where to start.

I can show video motion of this, later I try to draw a diagram

  • Like 1
Link to comment
Share on other sites

16 hours ago, Cassie said:

I'm afraid I'm a bit lost here as well.

The SVG has quite a high width and height value specified on it, so if the issue is layout breaking that may be something to look at?
If you're struggling to explain in words, maybe you can draw a diagram? Sometimes breaking down the steps gives you an idea of where to start.

https://disk.yandex.ru/i/yqKnOfouxYEPzQ

 

Maybe I should split SVG

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
  • Recently Browsing   0 members

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