Sublimio

In scrollTrigger I use the ignoreMobileResize parameter to avoid some issues I have when the navigation bar is shown or hidden. Unfortunately, this parameter doesn't seem to work when the site is opened in-app, for example if the site is opened inside Instagram. The interface in Instagram also has bars that show and hide, and these create the same problem that I had solved with the use of ignoreMobileResize.

ok thanks I will study your codePen and the Observer plugin!

Unfortunately, I don't have a code example yet, and it wouldn't work on CodePen anyway because CodePen's overflow:hidden window doesn't allow the rubber-band effect. I don't know if I explained well what I want to achieve. Basically, using the trackpad or touchscreen, you can scroll a few pixels beyond the HTML page. I just want to know if I can intercept this scroll over the end of the page with scrollTrigger.

Hi, I need to activate an animation that follows the elastic over-scroll of macOS when you scroll with the trackpad over the end of the page. In practice, an image should rotate and then return back. How can I intercept this over-scroll with scrollTrigger?

I need to create triggers dynamically in real time based on the scroll position. I therefore need to reduce the scroll speed that occurs with the mouse wheel or with the touch or I could miss the moment in which to create the triggers. Could ScrollSmoother be right for me?

Yes, I meant it lags starting with everything 10x native and scaling down. I have another problem, I don't know if I can continue with this thread or open another one: With all this scaling and moving the parent container in the Y axis, ScrollTrigger loses references on where to start. Let me explain: seeing this codePen I expect the second animation to start on the top of .box1 but in reality it doesn't work. If I resize the window the start repositions itself correctly. How can I solve it? How can I make scrollTrigger always update references? Thanks https://codepen.io/marco-catone/pen/rNojMNG

For those interested I solved the problem by returning to the use of transform:scale with force3D:false but with an addition: I only keep the objects affected by the zoom visible, hiding all the other objects outside the viewport with display:none (not visibility: hidden or opacity:0). This way safari doesn't blur. p.s. I tried before this solution but Safari Lag with 10x scale too.

I abandoned the idea of using transform:scale because force3d didn't solve the blurred content problem on safari. So I thought of modifying the width of the container and enlarging/moving the internal elements dynamically (I'm using container media query) and moving the Y,X choords of the container to center the focal points on the screen. Everything works but on safari this time I have lag problems. Any advice on improving performance especially on Safari? this is the actual work in progress https://www.sublimio.com/messupwidth/ Thanks a lot

Sorry, regarding transform: scale, I noticed that in Safari everything gets blurry when I scale too much. It's not about fonts or images, but about the entire screen (even the border of the divs). You can also notice this in the latest codepen. Is this a Safari bug? I searched a lot online but I only found solutions such as: transform-style: preserve-3d; transform: perspective(1px); image-rendering: crisp-edges; but none solve the problem https://codepen.io/GreenSock/pen/qBLOePj

Just perfect. Thanks to all

Cool thanks. So basically I have to create the new animation after the previous one is finished. So I can set the new transform origin for the next animation, when I'm scrolling down. But how can I set the previous transform origin if I'm scrolling back?

Yes I tried and in fact I see the jump as you said. I'll try to compensate with the transform. Thanks everyone for the help.

Sorry maybe i just complicated the question or the example. I just want to make it possible to zoom twice on an object at two different times without the zoom factor resetting to 1x. Let's take this other example: When the red square enters the viewport the green square scales 2x. When the yellow square enters the viewport the green square scales 7x but, in this example, before the second animation, the scale factor resets to 1x. What is my mistake? https://codepen.io/marco-catone/pen/MWZaLVO

I update my example to better explain the problem. Actually I have some elements (texts, images) in the columns and when these elements reach the viewport (or after a certain scroll) I want the whole site to zoom on that element. My problem is that before any animation done the zoom factor of "#wrapContainer" restarts from 1 and doesn't keep its previous state. In these codepen you can see some elements in the columns. Your code works for my previous example, but it seems complicated to update for my future needs. Do you think there may be other ways? https://codepen.io/marco-catone/pen/mdaJNrj

Hi all, I have to zoom the entire site based on how much I scrolled. From 1900 pixels for 500 pixels I have to apply a zoom factor of 1.2. From pixel 3000 for 500 pixels I have to apply a zoom factor of 7. I change the origin of the transformation according to the point where I want to focus the zoom. Everything works but when I get to the second animation I don't have a zoom from 1.2 to 7 but the zoom restarts from 1. I can I solve? Thanks

oook thank you

I modified the code by adding dots to scroll through the slides. dots progress animation and update draggable. But going back to dragging I can see that I didn't actually sync draggable because it picks up where it left off. draggable.update () is not the right way? https://codepen.io/marco-catone/pen/gOXXoeQ

oh, great! thank you so much sir

Hi, I can't figure out how to convert the code provided by the demo from gsap1 to the latest version. If I include gsap3 all slide placements are wrong https://codepen.io/gooogooo/pen/JjYbjaM thx a lot