vsimak Posted September 16, 2021 Share Posted September 16, 2021 (edited) Hi guys, First I apologise regarding not having a codepen. The codepen: https://codesandbox.io/s/3-circles-interaction-gsap-react-90oij?file=/src/trioCircles.js Question is: 3 interactive circles which scale-up and move on hover, and scale-down and move on hover out. Hovering one circle, also animates the other two with specific scales and movements, both on hover-on and hover-out. I've tried creating 3 paused timelines, (useRefs = react), each for a circle, and play() / reverse() when hover / hover-out. I believe due to the timeline taking in values upon render and not .play(), the from values are not being changed and thus I have a lot of glitching. I am sure there is a way to architecture a scenario where timelines have to keep track of values changed by other timelines on multiple objects that all runs smooth, I am not sure what is the solution. Question is: do I create new timelines on each mouse hover in order to take in the current position values? I apologize for not making a codepen, I understand that it create extra effort - I am in a bit of a jinx due to not being to deliver this "simple" solution I have about 30 tabs open from GSAP forums but somehow I can't seem to understand what is the correct solution and stitch it together. See the Pen trioCircles.js by s (@s) on CodePen Edited September 16, 2021 by vsimak Added Codepen Link to comment Share on other sites More sharing options...
Cassie Posted September 16, 2021 Share Posted September 16, 2021 Hey Vsimak, As you say - it takes extra effort to create a codepen demo. This effort should ideally be on the part of the person seeking help and not offloaded to the volunteers in our forums. 38 minutes ago, vsimak said: I understand that it create extra effort - I am in a bit of a jinx due to not being to deliver this "simple" solution That being said you may be looking for immediateRender. I hope this helps - but it could be a react specific issue? So if it doesn't help please take the time to provide a codepen so that we can assist you Good luck with your project! 3 Link to comment Share on other sites More sharing options...
OSUblake Posted September 16, 2021 Share Posted September 16, 2021 4 hours ago, vsimak said: I apologize for not making a codepen, I understand that it create extra effort We could easily identify the problem if we had a demo to work with. If timelines are animating values controlled by other timelines, then you're probably creating conflicts. A timeline is not made aware of changes made by other timelines. Link to comment Share on other sites More sharing options...
vsimak Posted September 16, 2021 Author Share Posted September 16, 2021 @Cassie & @OSUblake thanks for nudging me towards the good direction - Creating a codepen! @Cassie, thanks for the nudge I've read the article, and it seems relevant to na extent I am just unsure due to the interactive nature of this whether it is the right solution to try and implement! Codepen created and at: https://codesandbox.io/s/3-circles-interaction-gsap-react-90oij?file=/src/trioCircles.js I've added a lot of comments in order to ease-up the reading of it. I am pretty sure that I am misusing gsap logic - it is obvious that timelines are fighting, and that I need to somehow make it all one big self-aware timeline :), maybe via progress, play, labels or so? Not sure.. Sorry once again for not creating a Codepen, I was in a rush today ~~, now it's made. 1 Link to comment Share on other sites More sharing options...
Cassie Posted September 16, 2021 Share Posted September 16, 2021 If you're animating the same properties in different timelines you can use overwrite:true Possibly even https://greensock.com/docs/v3/GSAP/Timeline/invalidate() Scaling/moving on hover is always a tricky one though because inevitably you'll find a spot whilst hovering where the element will get 'stuck' scaling up and down and in and out of your mouse 'hit area' Blake will be able to advise more on the react side of things. 2 Link to comment Share on other sites More sharing options...
OSUblake Posted September 17, 2021 Share Posted September 17, 2021 7 hours ago, Cassie said: Scaling/moving on hover is always a tricky one though because inevitably you'll find a spot whilst hovering where the element will get 'stuck' scaling up and down and in and out of your mouse 'hit area' Very tricky. Sometimes you need to use transparent wrapper elements for the events, or manually calculate if something should be hovered based on a how far it is from the current mouse position. 7 hours ago, Cassie said: Blake will be able to advise more on the react side of things. There's not a lot of React guidance to give at the moment as the problem has to do with creating conflicting animations. I would suggest creating the animations on demand instead of trying to toggle between different timelines. These threads might also be of some help to get ideas on how to handle multiple animations and reversing an animation that doesn't complete. 4 Link to comment Share on other sites More sharing options...
vsimak Posted September 17, 2021 Author Share Posted September 17, 2021 tldr. it feels that possibly timelines due to their nature of taking in element values straight away (not at the time of playing), might be the cause of glitch because values are constantly changing especially that its 3 timelines controlling elements. I am trying with overwrite both auto and true, but it's not working correctly. There are two problems in which focusing on the second is more important. The first one is the issue of inputing, in this case hovering, as Blake mentioned. There are methods to solve this, one being what Blake suggested. The result should strive to avoid triggering, hovering on/off , in a consecutive way. Here especially as hovering off reverses() the timeline. The second is really the overwriting issue. What seems a viable solution to me possibly presents a cornerstone mechanics for interactive control of multiple elements. On each hover, a timeline is created with .to(). At that moment timeline renders and picks up the current values in order to create the interpolation. And it starts interpolating. On a new hover, the same thing is repeated, the then-active timeline is paused/killed, and a new one is taking over. This seems plausible. In terms of Promise.All, it seems to me that it is better suited for chaining timelines/animations. Here it is taking over method, for multiple elements at the same time. Is this possibly not well suited for GSAP timelines? I pondered possibly trying to do this with JS/classes/CSS/transition. A bigger overkill would be canvas I presume. Link to comment Share on other sites More sharing options...
OSUblake Posted September 17, 2021 Share Posted September 17, 2021 24 minutes ago, vsimak said: Is this possibly not well suited for GSAP timelines? Your timelines have conflicting animations, so you can't nicely interrupt or reverse them. And using canvas won't change that. You need to create your timelines on demand, not ahead of time. This should help you get started. https://codesandbox.io/s/3-circles-interaction-gsap-react-forked-1puji?file=/src/trioCircles.js Notes: You should animate x and y instead of left and top. And never have transitions on a property GSAP is animating. // very bad if you're animating transforms with GSAP, like x, y, scale transition: "transform 0.3s ease-in-out" 2 Link to comment Share on other sites More sharing options...
vsimak Posted September 17, 2021 Author Share Posted September 17, 2021 @OSUblake Thank you, you're very generous! So overwritting the tl ref with new timelines all the time thus rendering and taking the current values everytime! That's it! The reason why I did left/right is because the actual code is more complex as the hovered circled stays scaled up and enters a new state. In the codepen there is 1 default state from which a hovered circle scales up. In real scenario there are 3 possible states from which a hovering moves all circles and scales/up/down, so more scenarios and mapping of positions. Due to the nature of X,Y I thought it'd be impossible to map it, but since we are overwriting timelines I guess the X,Y will always take in the default beginning position, not the one from the previous timeline? Thank you once more, now I know how to do these interruption animations with more element's, I'll need them for canvas stuff in the future! 1 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