Thomas Günther

Thanks you so much, @mvaneijgen 💚

I've created a pen with the final code incl. nested SVGs and a reset animation

See the Pen RwQdmoo by medienbaecker (@medienbaecker) on CodePen

@mvaneijgen That's very clever! Thank you. I could even try to nest SVGs as this (surprisingly) seems to work, too.

I'm wondering if it's possible to use the MorphSVGPlugin only for the shape, not for the position of elements.

My use case: I want to morph an object randomly into one of many objects. I know I can duplicate the objects onto every drop, but I feel like there's a better solution.

Thank you!

See the Pen YzegBaZ by medienbaecker (@medienbaecker) on CodePen

Thanks for the detailed answer, @GreenSock — it does indeed sound like this is not related to GSAP or Observer but the browser/OS. Sorry for wasting your time 😔

At least now I know why everyone's using transforms for horizontal scrolling, I guess 😅

Instead of fixing the element like I did you can very easily pin elements with ScrollTrigger: https://greensock.com/docs/v3/Plugins/ScrollTrigger/pin

@GreenSock I created a pen to debug the deltaY values: 

See the Pen WNMZQRZ by medienbaecker (@medienbaecker) on CodePen

On Windows machines I get this behavior when my cursor is in a horizontally scrollable area so I guess there's a discrepancy between the regular scroll and the JS scroll? https://share.cleanshot.com/E7Dzfm

Thanks for the quick answer, @GreenSock! I'm glad you could fix it 👍

In the meantime the isTouch is also a much better solution than my event type condition, thanks!

Heya 👋

I noticed I can not limit an Observer to type: pointer. It will always trigger, also on mobile/touch devices.

While I can use a condition like e.event.type.includes('pointer') I'm wondering if this is a bug.

In this codepen I listen to onLeft and onRight but I don't want this on mobile devices. It will scroll, jump back and then animate the scroll.

See the Pen qBxMVmB by medienbaecker (@medienbaecker) on CodePen

Have a look at their CSS. They simply set up some 3d transform and animate them on scroll. You can do the same with GSAP ScrollTrigger:

See the Pen OJQogVW by medienbaecker (@medienbaecker) on CodePen

Thank you! Unfortunately the issue on Windows doesn't seem to be solved by this: https://share.cleanshot.com/RUtPr3

It might solve the issue on the client's PC though. The virtual machine is probably an edge case. I'll keep you updated.

Yes, unfortunately it's the same behaviour in debug mode and on the live website 😔

Thank you, Cassie! I do use a trackpad myself and don't see an issue. My client uses a mouse wheel (on macOS) and noticed stutters. Then I installed Windows and as you can see it behaves even weirder: https://share.cleanshot.com/sgJlHK

So I'm wondering if this is even the right approach.

I'm currently trying to scroll a horizontally overflowing element via vertical scroll. A lot of people don't have a trackpad, horizontal mouse wheel or the knowledge you can hold shift to scroll horizontally. Those that do should however still be able to scroll horizontally.

Now I know you can use something like ScrollTrigger to turn the scrolling into transforms but I'd like to keep the regular scroll behavior, including a scroll bar, the native mobile behavior, etc.

Observer.create({
  target: window,
  type: "wheel",
  onChangeY: (self) => {
    document.documentElement.scrollLeft += self.deltaY;
  }
});

With a simple Observer I turn the vertical scroll into horizontal scroll but I noticed some issues: the speed seems to be doubled and the scroll doesn't look very smooth.

Maybe somebody has an idea why that is? Thanks in advance!

I created a simplified CodePen that you might want to open in a new tab to test the scrolling:

See the Pen MWQOeWv by medienbaecker (@medienbaecker) on CodePen

@OSUblake So clever yet so simple. Thanks a lot, this works just fine!

Hey @OSUblake

No, I could not fix the issue yet. Just open the CodePen with the bottom anchor link and scroll up: https://cdpn.io/medienbaecker/debug/BawyeQz#bottom

Hey @OSUblake

Thanks a lot for your solution. This indeed works much better for the CodePen.

Unfortunately I made the demo a bit too minimal as it seems. On the actual website I have color changer "lines". That's why start and end were both set to top center and I used a reversed timeline. Sorry, should have included that in the initial post/demo.

I forked the demo and created a new one closer to the actual structure: 

See the Pen BawyeQz by medienbaecker (@medienbaecker) on CodePen

Thanks again,

Thomas

I'm currently building a page with sections that change the body background color when they are scrolled into view. Doing this with ScrollTrigger was very easy but I stumbled upon an issue when scrolling up without scrolling down first. This might sound weird but it can happen when you open the page with an anchor tag or reload the page anywhere but on the very top. The color animation is all messed up then. Since this is hard to explain I created a simplified CodePen with a #bottom anchor and a video of the issue. To test it yourself you need to open the CodePen in debug mode.

I guess it has something to do with the reversed to tweens that don't have a correct initial state. Any idea how to solve this? Thanks in advance!

See the Pen wvrBYmd by medienbaecker (@medienbaecker) on CodePen

@GreenSock Thanks a lot for the quick fix!

@nico fonseca Thanks, that's interesting! I also compared the pens but didn't try the fixed width/height. It looks like it's a bug indeed.

10 minutes ago, OSUblake said:

I don't remember which thread you are referring to, but was there a fix for the issue?

I'm not sure if there was a fix. Curiously there's this pen that doesn't have the issue: 

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

I'm trying to set up a button that moves to a fixed positioning (top right) when scrolling. Easy enough with FLIP and ScrollTrigger, I just have an issue with how the animation looks when moving from relative to fixed positioning. It looks like it immediately moves to the top (fixed positioning?) and animates to the top right from there. It looks fine the other way around.

I already tried adding the position property to props, both in getState() and Flip.from() — didn't help. I also noticed the same issue on this official pen when the viewport can be scrolled and the button is not at the very top: 

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

A few weeks (or months?) ago there was a thread about this with a similar call to action button but I can't find it via the search or Google.

Thanks for any help!

See the Pen abwNpYz by medienbaecker (@medienbaecker) on CodePen

Not as fast as the superhero @akapowl but I created a scroll-controlled accordion for you too: 

See the Pen YzVmvzY by medienbaecker (@medienbaecker) on CodePen

I had the same question a while back and got a very nice solution here: 

I was able to reproduce the issue, but only with one Mouse (Razer DeathAdder V2 Mini). Here's a video I recorded: https://cln.sh/B9T9sL

Using Chrome or the Magic Trackpad in Safari, I could scroll over the horizontal scroll area with no issue. I think this is a Safari bug.

Thank you so much, @akapowl ❤️

My actual code is a lot more complex so I didn't even think of setting the initial CSS values via gsap.set(). Now I put the logic into JS and it works just fine. Thanks again!