hellodude.it

Hi, not really a question, but I made a slider (starting from Goodfight.shop) with GSAP (specifically ScrollTrigger). Since it's an unusual slider (I couldn't find a similar one to start with) I would like to share it with you and the community. Maybe someone can also help me refine the code (I don't know why, but viewing from the codepen's iframe has problems, so I recommend viewing directly from codepen) Thanks, a.

Hi, can someone please help me?

Hi, thanks for the reply. I adjust the codepen by adding hidden overflow to the container but nothing changed. I am using Chrome macOS, here's a video:

Hi, my purpose is to have a ScrollTrigger on a scrollable div but i can't solve the bounce effect on scroll. I wrote a simple code for this (the problem is quite clear from the codepen). Can you guys help me to solve this problem? Thank you, a.

Ok, i understand. Thank you!

Yeah, sort of. The only problem with this codepen is that the draggable images have to go over all the content in the Y axis, whereas now they go overflow-y hidden.

Sorry and here's another demo: https://codepen.io/_alssndr/pen/gOLoLqo (Almost every instruction in this code is critical to the goal of the site)

It seems that "autoScroll: true" cause the issue. I need this function to drag the element across the page. Is there any way to make "autoScroll: true" only work on the Y axis and not the X axis? Thank you!

No, for this project it is not ok to keep the image inside of the bounds of the parent. My goal is for the image to overflow but not to "move" the remaining content.

I updated the codepen to better represent my problem. Try dragging the element when it is already in overflow, dragging it from its left side. https://codepen.io/_alssndr/pen/mdOqxwz

Sorry but the solution works in the codepen but not in the final code. Can you explain the logic of this intervention? So maybe by understanding it I can adapt the reasoning on the final site.

Here it is:https://codepen.io/_alssndr/pen/mdOqxwz

Hi, I'm using InertiaPlugin to have draggable elements and it's great! The only problem I have is being able to have the image go out of bounds but not "move" the content of the site (see attached video). I noticed that if I set "overflow: clip" to the parent it works, while "overflow: hidden" doesn't solve the problem. Is there an alternative to "overflow: clip" as it has almost no compatibility? Thank you, a. drag_problem.mp4

It works! How can i use this for production purpose? I need this for a client's project ? Thank you, a.

This is a code from a React app, so className is correct (sorry if i don't mention it before).