JamesGrubb Posted August 27, 2020 Share Posted August 27, 2020 Hello there. Wondered if anyone had any experience with Alpine.js to toggle Gsap animations? Thanks in advance Link to comment Share on other sites More sharing options...
Richard1604 Posted August 27, 2020 Share Posted August 27, 2020 Hello James, and welcome to the club. I am just a newbie but I think it has a great deal to offer and you will enjoy it. alpine.js is new to me so I have just read up on a background article and have some initial thoughts but your post is very short. i use bootstrap, have looked at react and vue.js and also flask and Django. my guess is that you are thinking about using alpine as a replacement for jQuery and it’s toggle method? I have so far found little use for jQuery and only use it sparingly and I am tending to prefer JavaScript or gsap util functions to control animations. at this point in time my personal feeling is that I want to improve my knowledge of greensock and JavaScript but of course I might be missing something about the advantages that alpine offers. perhaps you could expand on your post to explain more about what you want to do in greensock and what the advantages of alpine might be although I am sure that it is very capable of toggling classes if that’s what you want. Link to comment Share on other sites More sharing options...
ZachSaucier Posted August 27, 2020 Share Posted August 27, 2020 Hey James. GSAP works great with all frameworks including Alpine.js. Have you ran into some issue? If so, please create a minimal demo of the issue using CodePen or CodeSandbox and we'll do our best to help. Link to comment Share on other sites More sharing options...
JamesGrubb Posted August 27, 2020 Author Share Posted August 27, 2020 Hello thank you for getting back to me. I appreciate it was a rather open question. I will certainly put up a codepen when I get something going. Thank you @Richard1604 and @ZachSaucier Alpine does seem to be used for simple toggle actions so I thought it might be a good fit for controlling gsap timelines. @Richard1604 I agree that using vanilla JS is the best approach. I put the question in the forum just incase someone had any thoughts. Thanks again. See you here later. Link to comment Share on other sites More sharing options...
Rodrigo Posted August 28, 2020 Share Posted August 28, 2020 Hi, Fun little experiment: See the Pen gOrWQrY?editors=1010 by rhernando (@rhernando) on CodePen Now, honestly I don't know if I'd include Alpine among my go-to libraries right now. As you can see the code is quite simple and nothing that can't be done with vanilla JS. Sure you don't have to get the elements from the DOM and there is some degree of encapsulation thanks to the x-data directive which allows you to initialize different components in your HTML, which is something nice, so maybe for something really small or perhaps using some sort of agnostic templating library, this proves handy. Although I'm missing a method/hook in order to create the GSAP instance (or do those type of operations), kind of what x-init does but with access to the component's state. I guess I'm too used to libraries and frameworks such as Vue, React, etc. Happy Tweening!!! 4 Link to comment Share on other sites More sharing options...
PointC Posted August 28, 2020 Share Posted August 28, 2020 Professor @Rodrigo is in the lab cooking up experiments. 👨🔬 2 1 Link to comment Share on other sites More sharing options...
Rodrigo Posted August 28, 2020 Share Posted August 28, 2020 2 hours ago, PointC said: Professor @Rodrigo is in the lab cooking up experiments. 👨🔬 1 Link to comment Share on other sites More sharing options...
OSUblake Posted August 28, 2020 Share Posted August 28, 2020 4 hours ago, Rodrigo said: Now, honestly I don't know if I'd include Alpine among my go-to libraries right now. I've never heard of it, but I think it looks kind of cool. Very Vue-ish, which is a good thing. Might be good for small projects. Link to comment Share on other sites More sharing options...
OSUblake Posted August 28, 2020 Share Posted August 28, 2020 5 hours ago, Rodrigo said: Fun little experiment: My turn. I like it. One little function 😃 See the Pen abNWMYQ by osublake (@osublake) on CodePen 2 Link to comment Share on other sites More sharing options...
JamesGrubb Posted August 28, 2020 Author Share Posted August 28, 2020 Thanks for the tween @Rodrigo Would you mind explaining how I would start with the <h1></h1> hidden? Link to comment Share on other sites More sharing options...
OSUblake Posted August 28, 2020 Share Posted August 28, 2020 Hide it in your css. Link to comment Share on other sites More sharing options...
JamesGrubb Posted August 28, 2020 Author Share Posted August 28, 2020 hm. adding the utility class 'hidden' to the parent div breaks the toggle? Link to comment Share on other sites More sharing options...
OSUblake Posted August 28, 2020 Share Posted August 28, 2020 By hide it, I meant opacity. Then change the opacity to 1 in the animation. Link to comment Share on other sites More sharing options...
OSUblake Posted August 28, 2020 Share Posted August 28, 2020 Like this. See the Pen 6b782fb35f0afbf2ac2cf4728c710e3a by osublake (@osublake) on CodePen 2 Link to comment Share on other sites More sharing options...
JamesGrubb Posted August 28, 2020 Author Share Posted August 28, 2020 Ahh, thanks! Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now