DennisB

58 minutes ago, Cassie said:

Ah that's such a shame I hoped if it was just animating opacity on filtered elements it would be better! We tried!

It was a great try, and a fun work-around if it had worked, I sincerely thank you for all the help.

28 minutes ago, SteveS said:

@DennisB

I don't know what the size requirements are for the project, but if you know your way around writing shaders you could consider using OGL. It's a microscoping webgl at 8kb core and 29kb with utilities and extras if needed. Final build size probably around the lower end of that spectrum.

https://github.com/oframe/ogl

 

If that fits your size constraints but you don't know how to work with shaders I'd be happy to take a look for you since it seems like a fun rabbit hole.

If for whatever reason ogl doesn't work and you still want the effect in three.js I can also take a look at that since it's a neat effect and I to practice shaders anyway.

Wow, OGL looks pretty awesome and a great size to boot. I unfortunately don't have any experience with shaders, so it's a bit daunting, I had a quick look trough the examples and couldnt find anything that fit perfectly or something that would serve as a great starting point. But all the examples looked very neat so I'll definitely save it for some time in the future when I finally have some time to devote for shaders, be it three or OGL.

If you're up for it and feeling generous with your time I would love the help, even if it's just a big nudge or a good starting point.

Unfortunately that solution still kills the animation on mobile, it gets better the less filters there are, its almost normal animation speed at around 2-3 filters but then the effect is almost too choppy because there's too few steps. So I think I'll just have to disable it on mobile.

Thats a great idea, and also one I should be able to implement easily.

I´m thinking that maybe I´ll just have 1 image, and then swap out the filter on it to the next in line instead of having individual images, there aren't any glaring problems I´m missing with that right?

I dont have a great idea on how to do that in gsap but it could be done pretty simple with a JavaScript function and timer.

And yea, sometimes its a fun challenge with banners that feel great when everything aligns, and sometimes it can be a real PITA 😁

Thanks for the link, it was the same one I found when I first searched around for the effet, it almost seems like there nothing beside that one and the svg filter solution.

I do in theory like the idea of having crossfades on different "heated wave" versions of the image, unsure if I can get away with it weight-vise, but it's a good simple solution that should work everywhere.

That is indeed bad news 😦

Unfortunately I cant use pixi since this is for a banner which has strict limitations on weight and external calls, and pixi still isn't part of doubleclicks cdn. I could potentially use three.js since that's available, but the heatwave example i found on three was a lot more involved than a quick svg filter.

I'm currently working on a GSAP project where I ended up using svg filters to simulate a heatwave on an image. For that I resorted to using feTurbulence and feDisplacementMap, based on a forum post on here.

This works excellent on desktop, but when I test on iOS the animation is really sluggish, which is especially apparent when a lot of other elements are animated while the feTurbulence filter is animating.

The Codepen supplied here is a simple version with just 2 animations, which shows a clear discrepancy in how smooth it animates on desktop vs mobile, and if it's left running on iOS it ends up refreshing the safari tab and/or removing the animated element, and I've also had it crash the safari tab (Attached screenshot)

Any ideas what might be causing that? or how to avoid/work around it?

See the Pen WNzGKrX by dennisbroend (@dennisbroend) on CodePen

If you go back to the previous google GSAP version links it'll work.

Although one of the people we talked to said we had to use the 1.18 link:

https://s0.2mdn.net/ads/studio/cached_libs/tweenmax_1.18.0_499ba64a23378545748ff12d372e59e9_min.js

and not the newer 1.20 that I had used from their cdn in some other banners.

Just wanted to chime in that we've also just gotten banners rejected for using GSAP 3 instead of the old links GSAP 2 links, and talking to google is akin to talking to a brick wall, they can't seem to understand that it's their own domain/cdn they're rejecting.

If anyone had luck getting trough please let me know.

Congrats on launching GSAP 3, loving all the new stuff and the quality of life changes. Any ETA on when gsap 3 will be available on Google's CDN?