zinjo Posted December 18, 2021 Share Posted December 18, 2021 Hi! I'm new to javascript and found gsap while trying to animate some objects. I was trying to animate this sequence of squares to create a gallery effect but the result is very unpredictable, sometimes works all fine, but when i hover from one square to another some squares don't reverse the animation and end up in wrong positions. It's like if when i play a timeline right after another, and both timelines have animations to a certain objetc, the first timeline overrides the second and then, the objects end in the wrong position. How can i avoid this? Another issue i'm having is that i wanted both properties "scale" and "transform" to change the object simultaneously (i believe this way the animation would be smoother), but the way it is, the object first scales and then transforms. Does anyone knows what am I missing? Thanks a lot! See the Pen GRMmwjW by gustavo-poester (@gustavo-poester) on CodePen Link to comment Share on other sites More sharing options...
GreenSock Posted December 18, 2021 Share Posted December 18, 2021 Welcome to the GreenSock forums, @zinjo! And more importantly, welcome to the world of GSAP. I noticed quite a few problems in your demo (thanks for providing that by the way): Lots of logic issues - if you just create a whole different timeline for each item rollover, it'll create lots of conflicts. On mouseover, you're having one timeline try to control all the elements to go to one place, but then on mouseout you're having a different timeline trying to control them all to a DIFFERENT place. And what if you roll over/out quickly, when things aren't done animating? You need to code things in a more dynamic way that can accommodate picking up from anywhere. It's not the kind of thing that'd work using linear timelines like that. Be careful about using mouseover/mouseout instead of mouseenter/mouseleave - the former fires every time your mouse goes over any child element too (much too often). You should always set transform-related values directly through GSAP, not just in CSS. Please read: It's always much better, faster, and more accurate to use the individual components like x, y, scale, rotationY, etc. instead of "transform". // BAD/SLOW: transform: "rotateY(-25deg)" // GOOD/FAST rotationY: -25 There's no need for jQuery selectors. It's fine to do, but totally useless. GSAP uses the browser's built-in document.querySelectorAll() by default. Here's a much more dynamic version that uses about 75% less code too: See the Pen QWqvzRy?editors=0010 by GreenSock (@GreenSock) on CodePen Is that more of what you were looking for? 3 2 Link to comment Share on other sites More sharing options...
zinjo Posted December 18, 2021 Author Share Posted December 18, 2021 Spot on!! Thank you so much, your anwser goes way beyong my expectations. I see i still have a lot to learn in javascript and gsap. Anyways, thanks again, GSAP support community is amazing. 2 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