mvaneijgen

Hi @mr slowpoke welcome to the forum! I would use the Flip.fit() (https://gsap.com/docs/v3/Plugins/Flip/static.fit()/) function of the Flip plugin, to as the name implies fit the logo inside the other logo. Animating height is always something you want to avoid when animating, because it causes a browser repaint, which is really heavy on the browser a this will never come out right. I'm not complete sure what it is you want to happen, but what I've done is moved to timeline (timelines are the most powerful tool in GSAP) and add the Flip.fit() animation to that timeline, now now scroll that animation plays and the rest of the page scrolls like normal. Then as soon as the animations finishes the ScrollTrigger kills it self, it sets the pink section to a height of 0 and never played again. To me this seems the best way of handling this particular animation. Right now I've just place the .logo-text somewhere, but you can fully tweak this with CSS and then Flip.fit() will automagicly animate it to the logo up top. Hope it helps and happy tweening! https://codepen.io/mvaneijgen/pen/YzbqWQe?editors=0010

First of check out this post it shows how you can make a stacking card effect animation which you then can hook to ScrollTrigger (or what ever else) ScrollTrigger is build to animate things based on the scrollbar position of the user, but I have the feeling you want to play a fixed animation no mater of the visitor scrolls a lot or a little, that is not something for ScrollTrigger then you're looking for the Observer plugin https://gsap.com/docs/v3/Plugins/Observer/ https://codepen.io/GreenSock/pen/XWzRraJ And here an example that mixes normal scroll with the Observer plugin https://codepen.io/GreenSock/pen/oNQPLqJ It feels like the current setup you're trying to build your own Observer plugin, before taking any next step I would remove all scrolling logic code and first focus on building an animation. Everything in GSAP starts with an animation and if you then want to scroll it based on the scrollbar you add ScrollTrigger or if you just want to animate to the next slide you use the Observer plugin, but first your animation needs to be solid. Below another example which used a timeline and the Observer plugin which on scroll just animates to the next label in the timeline. Hope it helps and happy tweening! https://codepen.io/mvaneijgen/pen/GRzrPPy

Hi @Guillaume Ducuing welcome to the forum! I cant see anything obvious from just the code snippets. Codepen isn't always the best platform to get your demo ready, have your seen our Stackblitz starter templates these gets you up and running in most of the major frameworks. What I can see is this line in your CSS `transition: all 0.35s ease;` which always is a red flag. If you have an animation with GSAP on an element and this line of CSS will interup all animations and things will break. Due to not having a demo I'm not able to test it for you to see if this fixes the issue, but personally I would not use the word 'all' and always define the properties I want to transition and never transition an property that GSAP is also animating. Hope it helps and if not try and see if you can reproduce the issue in one of our stackblitz templates and we will be able to help you debug and happy tweening!

You're right, then maybe just calling a new tween each time you want to morph, this way it always plays 'forward'. Hope it helps and happy tweening! https://codepen.io/mvaneijgen/pen/QWRjzmO?editors=1011

Morphing multiple elements in to one shape should be impossible, but the wizards over here have found a way with the MorphSVG plugin. But of course it is going to be weird. You morph to one shape, but this doesn't have to be the case, as you can see in your example already the thumb morphs from the "T", but some careful planning and some extra shapes (maybe for each finger one), just cut them in your design program the body of the "i" looks already like a finger, so If you can make your fist out of several shapes I think I twill be looking a lot smoother. Also check out this tutorial by our own @PointC it really helped me understand how to prepare shapes for animating. Hope it helps and happy tweening! https://www.motiontricks.com/organic-morphing-getting-needed-points-from-adobe-illustrator/

Hey, Hi, Hello, @hey welcome to the forum! Correct! You have to view a tween as a movie and with reverse you'rre literally grabbing he playhead and dragging it backwards. But GSAP gots you covered, what you can do is manipulate the tween with another tween 🤯! I've changed your tween to a timeline not strictly necessary, but timelines are just so much more powerful. And then have a function with that calls a .tweenTo() (when you got some spare time it is a good idea just to give the docs a once over, you'll be surprised how much has already been thought of!) method on the timeline and tweens to a duration of 1 or back to 0, with the ease you want applied. Hope it helps and happy tweening! https://codepen.io/mvaneijgen/pen/dyEYmBr?editors=0010

Hi @maxime_c welcome to the forum! Seems doable with GSAP. What have you tried already? We love to see what you can come up with, that way we can see your thought process and thus better help you understand the tools! If you're new to GSAP check out this awesome getting started guide https://gsap.com/resources/get-started/ Could be done so many ways and only through experimenting you'll find the best way that suits your project. The Flip plugin springs to mind especially the Flip.fit() function https://gsap.com/docs/v3/Plugins/Flip/static.fit()/, check out out and try experimenting and when you get stuck post back here with what you've tried. Hope it helps and happy tweening!

Check out the Observer plugin here is a demo that will prevent scrolling, until a particular condition is met and then the page returns to its normal scrolling behaviour. Hope it helps and happy tweening! https://codepen.io/GreenSock/pen/oNQPLqJ

Your demo wasn't loading ScrollTrigger, so of course nothing would happen on scroll. The blur was not working for me, so I had do remove it. I'm not completely sure what you animation should be doing, so I've changed it a bit. Right now it is a single .from() tween that scales in each box one by one using a stagger with a scale and opacity of 0, using .from() makes it so GSAP will animate .to() the browsers default values (if nothing else has been applied) of 1. Keep in mind the best thing to do when working with ScrollTrigger is to remove it! This seems counter intuitive, but ScrollTrigger is just animating something on scroll, so just focus on the animation at first and only when you're happy with the animation add ScrollTrigger back in. This way you can focus on one part at a time and it will save a lot of headache when debugging. Check out this awesome getting started guide if you want to learn more about the tools https://gsap.com/resources/get-started/ Hope it helps and happy tweening! https://codepen.io/mvaneijgen/pen/GRapxQL?editors=0010

Hi @QuangHung welcome to the forum! As stated before we don't have the resources to provide tutorials how to create cool effects you saw on other sites. That said you can check out a lot of awesome code examples on the GSAP Codepen collection page, to see if something come close to what you want and start making it your own from there https://codepen.io/GreenSock/collections/ Keep in mind that the site you shared is probably build by a team of skilled people with years of experience! When starting out with new tools I would keep it simple at first to see what is possible, check out this awesome getting started guide https://gsap.com/resources/get-started/ and first try some simple things before diving in to the deep end. Hope it helps and happy tweening!

Hi @dpickering welcome to the forum! The beauty of GSAP is anything is possible, it just depends on how much elbow grease you want to put in to get it how you want. I have the feeling that it will be getting complicated fast and will require a lot of math. Sadly we just don't have the resources to provide free general consulting on these forums (of course anyone else is welcome to post an answer - we just want to manage expectations) I don't have a silver bullet for you, my advise just keep on coding (and forking your work) and try out several ideas. Be sure to post back here if you have a specific question if something is not clear from the docs and maybe these resources will get you on the right track. Hope it helps and happy tweening! https://codepen.io/mvaneijgen/pen/KKLdmQL?editors=1011

Hi @pedrobear welcome to the forum! Can you share a demo with your changes so that we can see your findings in action. ScrollTrigger is made for scrolling vertical and there are some features build in to check if things that move horizontal to check if you scroll past them, but a lot of web users don't have a way to scroll horizontal. But the beauty of GSAP is you can build what ever you like if you put in enough elbow grease. What springs to mind is the Observer plugin with with you can watch for scroll events and then do logic based on that. https://gsap.com/docs/v3/Plugins/Observer/ But again we would love to see what you already changed so that we can help you debug. Hope it helps and happy tweening!

Hi @Sriram Anax welcome to the forum and thanks for being a club member! Just as an initial test I had disabled your CSS and most of your JS just to see if morph SVG was indeed not working on Safari, but if I do this It works perfectly. I've not yet read through your code to understand what it should do, but the issue seems not the be MorphSVG. Can you maybe explain a bit more what your code should be doing? Tested on Safari Version 17.2.1 https://codepen.io/mvaneijgen/pen/OJYyWNG?editors=0010 After reading some more of the code, the IntersectionObserver is to check if an element is in view of the browser window right? So I figure you want things to happen on scroll, ScrollTrigger is the perfect use case for that!, check out below with how little code this could work. Is something like this what you're looking for? Hope it helps and happy tweening! https://codepen.io/mvaneijgen/pen/ZENbLeL?editors=1010

Personally when I build something it always starts with an animation, so the bases is just GSAP and if I then want to hang it on scroll with ScrollTrigger or make it draggable with Draggable (great naming schemes 😂). Personally I really like MorphSVG and DrawSVG, which are part of the Club GSAP, but with it you can make really fun animations! And keep in mind you want to try them out you can freely use them on Codepen and even on your local machine! Hope it helps and happy tweening!

If it works it works 🎉 happy tweening!