Thomas Günther

@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!

Hi there,

I stumbled upon an issue with percentage based transforms and ScrollTrigger. I created a minimal demo with .good_boxes using pixel values and .bad_boxes using percentage values. Only the bad boxes are displayed incorrectly after resizing the window. First things that came to mind were using xPercent/yPercent and invalidateOnRefresh: false but neither had an effect.

To reproduce the issue, please visit the following codepen, resize your window and then scroll down: 

Thanks in advance for any help 🙌

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

Awesome! Thanks a lot for the quick help everyone!

Ah, yes. That could be it. Thanks for the link.

Do you know when the files will be updated? It‘s weird because on CodePen I can already use 3.6.1.

Hi!

Where can I download version 3.6.1 of the DrawSVGPlugin? I can only find version 3.6.0 in my account dashboard.

I realized there must be an important bug fix in this version because in 3.6.0 I can not get the simplest ScrollTrigger + DrawSVG scenarios to work. After recreating it in a pen it works without problems. See the attached CodePen URL 

On 3.6.0 I get all kinds of errors I don't understand: 

Thank you!

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

I think you will first need to get the value of your CSS variables via getPropertyValue:

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

53 minutes ago, GreenSock said:

Does that work well for you? 

Thanks a lot for your help, Jack. That does indeed work very well.

53 minutes ago, GreenSock said:

Might look cool to add a little stagger to your onEnter/onLeave animations too

Great idea! I'm always concerned about performance but it's still super smooth somehow.

Working with GSAP for this project has been so much fun. I'm looking forward to showing this to my client.

1 minute ago, ZachSaucier said:

Give us some time to think up a way to solve this situation.

Thank you. I'm actually glad this isn't super easy so I won't feel as bad about the many hours I tinkered with this. When I found out I can save the old state of the parent element and then use Flip.fit() on it I thought I had it figured out. This doesn't help unfortunately.

2 minutes ago, ZachSaucier said:

Going forward, would you mind using the "fork" button on CodePen instead of updating the old one?

Sorry about that, will do.

Thanks for your answer and the warm welcome, Zach.

I set absolute to true before, but then I had issues with the scroll position and the elements underneath. I will update the simplified codepen with those elements.

EDIT: I just edited the codepen with a footer. While the project elements are animating, the footer will jump to the top—because the elements are position: absolute and the parent element has no height I guess: 

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

Hi there,

I'm currently trying to use the new FLIP plugin to add an animation to my filter script. I tried to do something similar like this how-to demo:

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

…but with two filters that can be combined.

I just can't get the animation to work properly. Most of the time the to-be-hidden elements don't get any animation. I feel like I'm 90% there but something's missing. I tried modifying the `onLeave` function but it doesn't change anything.

Thanks in advance for any help,

Thomas

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