Shrug ¯\_(ツ)_/¯

You could maybe update this older example by @Cassie to GSAP 3 as a possible starting point to work from. ? https://codepen.io/cassie-codes/pen/bzXLOr

I remember these two canvas based examples not GSAP specific. But each impressive none the less yielding similar result. https://codepen.io/waaark/pen/VbgwEM https://codepen.io/Zaku/pen/JNxKKY

There are certainly differences between the two approaches. @GreenSock mentioned some in another thread when he created that helper function. He may eventually stop by this thread and comment also. ?

Funny enough back in 2017 when they released the Puppet Warp tool for Illustrator they demoed it with a doggie. ? I think Photoshop had the Puppet Warp feature long before CC (CS5 maybe?). Which I recall you can use it with vector items once they are turned into smart objects. That Illustrator Puppet Warp in CC almost makes that app intriguing, almost. ?

@mkahraman , You can try this 500 count example by @GreenSock in the following thread. To help you determine if it's an issue with your Win10 & ChromeBook, SVG, React. I would be surprised if it's related to GSAP itself.

The below codepen example from the ScrollTrigger Demos should help you based upon your description. https://codepen.io/GreenSock/pen/BaowPwo If not, you can find many other pinning examples and discussions throughout the forum.

I must literally live under a rock, because today is the first I have heard of this NFT, down the rabbit hole I go.

Oh goToAndStop is actually from Lottie, wow blast from past seeing that. Pretty soon you will need to start lazy loading entries on that page. ? "Lottie" users will love this for "scroll animations". Awesome job as always with the GSAP-ification / optimization @GreenSock !

? Oh I see now what you're saying. I would really suggest not doing that and instead use the usage that he provides for ScrollLottie. But I think @GreenSock nailed it with his last response above. ?

What pen, by whom?

I don’t know much about @chrisgannon's ScrollLottie other than it's pretty neat. But based upon his usage example your code seems overly complicated? https://codepen.io/chrisgannon/pen/oNbjQpw anim.goToAndStop Is that from Adobe Animate? I have not seen much goToAndStop sicne the Flash days. ?

Congrats regarding your learning of GSAP, etc., You can just use standard Javascript matchMedia with GSAP. There are many older examples and other things regarding resize events, etc., that can be found throughout forum. Though looking at those horizontal buttons you may not be able to just size such a configuration for mobile. Instead you will probably need to come up with a different configuration for mobile if you hope to keep the same look and feel. Like a stacked two across approach for usability on mobile.

I’m really sorry you felt frustrated like that @RhanXerox , certainly not my intention at all. As mentioned, I only looked at things with a quick glance, thankfully ? @akapowl looked at things a bit closer. Please remember that this forum is a genuinely friendly place so please try to remain courteous towards members and throughout threads. Hopefully you can get things working now.

I obviously can’t see what you have done locally. But I highly suggest if you’re new to GSAP then spend time reading through the documentation and various articles before spending time trying to modify others examples for your own use.

You can link to the scrollTo plugin found on cdnjs for example. Most times it’s just simpler to create a CodePen instead as all the plugins are included to use and test over there. I would suggest using the ScrollTrigger plugin for any scrolling logic. You can find plenty of documentation, learning resources and countless examples here on the GreenSock site.

I’m not too familiar with that codepen by Mikel. But after a quick glance comparatively, you need to remove the gsap reference in front of all your .from tweens and make it just .from without the gsap reference. Then the first two slides should work fine the same as his example using the array reference. Regarding things being slow, that is due to your long durations (3 , 5 etc.,) and long delays (1.2, 2, etc.,) if you want it to be fast. Simply reduce those to your liking to speed the sequence up of things. Its not really a minimal demo but that’s what I noticed with a quick glance. ?

Hi @RhanXerox welcome to the forum. But I’m confused, that codepen is by @mikel and has nothing to do with Swiper. It seems to work fine to me ? Even without seeing an example I would guess it’s not a GSAP issue at all. But an event logic integration issue with Swiper, or a general code logic issue. But without seeing a minimal demo demonstrating the specific issues you are having it's impossible to help. If the issue is relative to GSAP someone will try to help, though we try to keep questions centered on the GSAP aspect.

Welcome to the forum @shutterlab thanks for supporting GreenSock with your Club Membership. It does not appear as if that version of the site has launched yet, how do you know it's based upon scroll ? ? https://www.the-cave.co.uk/ https://dribbble.com/shots/15219461-THE-CAVE Regarding scrolling you could use overflow: hidden; on the body or a container. Then within either layout all your relative content. With GSAP’s scrollTo plugin you can then move around based upon an assigned class, id or provided x/y coordinates. GSAP's ScrollTrigger plugin can also be used with scrollTo. You could just use ScrollTrigger to move around also, using coordinates, the MotionPathPlugin, etc. You could also move around using Mouse / Touch movement, GSAP’s Draggable plugin, or even move around within an SVG viewbox. You would need to implement the desired parallax / easing logic regardless of which approach you decide upon. You have access to all these powerful plugins as part of your GreenSock Membership. You may find interest with the example found in this thread concerning Draggable. You can search the forum and find various concepts for all these things. Good luck on your project. ?

You might also be able to gain something from these examples which use GSAP + Three.js with similar effect. • https://codepen.io/ReGGae/pen/povjKxV • https://greensock.com/forums/topic/22768-text-underline-page-transitions-that-are-super-smooth/?do=findComment&comment=118065 • https://tympanus.net/codrops/2019/10/21/how-to-create-motion-hover-effects-with-image-distortions-using-three-js/

As @Rodrigo suggested above, I would also say have look through @PointC's MotionTricks learning site. He has various tutorials that should help you and even one on Dashed Line Animation. Many of the tutorials and examples will also show how to use drawSVG with masks etc., to help you accomplosh various outcomes.

Hi @JoBos2020, welcome to the forum. Thanks for being a GreenSock Club member and supporting GreenSock. Yes the Simply Green does not include SplitText, users would need a Shockingly Green membership to access that plugin. https://greensock.com/club/ It looks like maybe you have upgraded already?

Nice @GreenSock, I had a notion that you would “whip up” something, GSAP native is always the best. ?

I considered suggesting Paper.js also, though the fullySelected is more just for presentation isn’t it? For interaction functionality don't you actually need hitTest event logic, etc., ? https://d19jftygre6gh0.cloudfront.net/lehni/a665d6f9d95dd055b0ff901f8e313780 https://d19jftygre6gh0.cloudfront.net/lehni/9aa7d593235f04a3915ac4cef92def02

That’s really the beauty and simplicity of all the Utility Methods. Many of the Helper Functions also utilize these methods. GSAP overall provides this same general premise so designers and developers can just get on with the creation and development aspect. Without users generally needing to write reams of complex animation code / logic or worry about browser support, etc. GreenSock always intends to simplify the overall experience not complicate it. GSAP is immensely flexible and powerful so it’s always delightful that various examples (as seen in this thread and throughout the forum) can be derived to accomplish the same task in multiple ways. It’s generally not about who’s right or wrong, though we can all stand corrected at times. But rather demonstrating the powers of GSAP, which can come in many forms and through various approaches. Open discussion is certainly encouraged especially when directly focused on GSAP products. I’m not sure though of the impression why others should not also provide alternative solutions. Some of the best threads historically found on the forums are multiple users showing different solutions or building further upon each others approaches. That's largely part of what makes the forum, it's users and GSAP so great.

This example is not GSAP related but I found it interesting, maybe it could help your efforts in some way. ¯\_(ツ)_/¯ https://codepen.io/giaco/pen/xNKGQW