Shrug ¯\_(ツ)_/¯

Unless the exported renders are more complex than what is being shown in your sprite sheet, I would think the following examples of math based approaches would be a better overall approach given what you’ve shown. https://codepen.io/osublake/pen/vdzjyg https://codepen.io/creativeocean/pen/JjWMqdv Or a simpler approach as @mikel has suggested above that you could use morphSVG within a timeline and utilize as many shapes as desired (or an array or path data directly in js) at any duration you choose. You can even use morphSVG within GSAP keyframes also, there are many creative options available when using morphSVG.

Concerning your thread title "3d lettering without webgl" and for those with similar interest in the future. Some may find interest in ztext.js for simplicity or even Zfont that's made for zDog. Either of those might meet your requirements and both should easily play nicely with GSAP.

? ... ¯\_(ツ)_/¯ indeed.

@akapowl Unless I'm mistaken I think thats already the lib that was being loaded in the codesandbox? Here is another wrapper for React Components using that same smooth scrollbar library, if it helps anyone.

You may get some use out of insertBefore (some information seen here) like the below two examples. https://codepen.io/osublake/pen/YXoEQe https://codepen.io/GreenSock/pen/yLYJodZ Edit: Sorry @GreenSock, I just looked at your Pen after the fact, which is what you are doing. ☺️

You may like this thread Specifically .. https://codepen.io/GreenSock/pen/8fcb337385d0f1e401a66f260cf73e76 You might be also able to use some logic from the below example that uses GSAP, Draggable, SVG.js and Spline. https://codepen.io/georgedoescode/pen/ExNpqJP

It sounds like you instead want the stack of images to fade through as you scroll? If so then you can remove the pin, try scrub: true, adjust the start &/or end values and play around with the next var (stagger) and fade var . Just play around until you get everything to your liking (if you want to stick with that example). The ScrollTrigger Docs have detailed information on those things along with links too many ScrollTrigger examples and demos. I sugggest you take time to get familar with the usage.

Welcome to the forum @LivingInAZoo This codepen by @mikel seems to have most of what you described. Hopefully you can modify it to your own needs by using it as a starting point while using the documentation to assist you further. https://codepen.io/mikeK/pen/NWRoQJo

Sorry to nudge this thread I’m just seeing it and could not resist a little reminiscing. I remember this exact same effect back in the Flash / Actionscript days. It was something like using a few containers, swapping depths and image sources. Along with the scaling & fading of pre-rendered distortions and blur on identical yet much smaller images done in Photoshop used for the in/out transitions. The transition part would happen so fast you never really noticed the difference going between the two actual images and the two transition images scaling / fading. Those cleaver manual techniques have largely diminished with the presence of more modern dynamic approaches available today. Plus screen sizes were a lot smaller and of less quantity back then. Now with 4K, 5k, 8K monitors and thousands of devices dynamic WebGL, PixiJS, Shaders, etc., are the way to go ... GPU to infinity and beyond. ?

Really nice @mikel, you +next leveled+ this previous peel effect. ?

Nice one @OSUblake. This related Three.js Forum thread has some good advice for those seeking similar. If that's actually your thread @Lolia Trafam then please reference this GSAP thread over there as this discussion here might help other Three.js + GSAP users also. ?

^ Yeah that one and many more can be found throughout the forum.

Maybe the links in this post will also help you some. ¯\_(ツ)_/¯

I look forward to seeing your outcome if you're able to share. For anyone else looking for similar but resulting in a less dynamic result, you could use your own map artwork like the below example. It may help someone in some way. ¯\_(ツ)_/¯ https://codepen.io/oliviale/pen/jOryjNX

I saw the below drawSVG + canvas recently, it seemed interesting though its needs updating to GSAP 3. I wonder if there could be a cleaver helper function like this morphSVG function? Maybe something from this codepen approach could help you in some way superM. https://codepen.io/cjgammon/pen/poeMmqY

Some of the examples found in the thread may also assist you in some way.

? Just as IE announces the EOL date, Safari looks around and continues to step forward to fill the void.

Though it relative to give a shout out to GSAP's own awesome Flip Plugin. ? https://greensock.com/docs/v3/Plugins/Flip/

¯\_(ツ)_/¯ I was merely pointing out that nothing natively concerning such hit-tests with GSAP itself. In that linked thread I quoted above you will find many examples from Blake on the broader subject. Of course anything is possible, you can do all types of collision testing if you build the logic for it and then leverage GSAP for your animations, etc. Take the SVG Path Collider library for example.

The below linked thread has some things that may be helpful conceptually, however concerning GSAP inherently ...

I wonder what the % of GSAP related websites are made from something from Blake's pens. ?

Someone might also find interest with the examples found in these two older threads also. https://greensock.com/forums/topic/19494-water-ripple-constant-loop/ https://greensock.com/forums/topic/23438-how-can-i-make-the-circle-loop-nicely/

Welcome to the forum. Have a look at the examples in this post. There you will find examples using a single class and batch with scrub or using a loop with scrub.

Hi @scavaliere, Based upon your “what I need” picture you should be able to utilize this example as a starting concept. You can take time to modify it to work vertically and also regarding whatever your own personal requirements are. In general it seems the concepts you require are present in that example. I think that should really help you conceptually, good luck with your project.

Yep this file 1182084.js starting at line about 13363. It’s a very point-y button. ? Though the effect is not nearly as dynamic (unique) as it first appears. It’s in essence just performing a wave of points going right or left based upon mouse location. Instead of being fully dynamic like the canvas example above. A poor man's approach might be to use the classic SVG filter gooey effect to help get results using a key object moving right/left without having to manipulate individual points. Though given it’s not as dynamic as it first appears you might be able to get creative with a morph and just play or reverse it. Lot's of ways to approach similar I suppose. But you have to start somewhere @DLong if you hope to get there. Welcome to the forum by the way. ?