Jump to content
Search Community

3 interactive circles - 3 timelines? - fixing the glitching? / React

vsimak test
Moderator Tag

Recommended Posts

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.

image.png.421b771985fffbb24e656a5111f674cc.png


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 by vsimak
Added Codepen
Link to comment
Share on other sites

 

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! 
 

  • Like 3
Link to comment
Share on other sites

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

@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.

  • Like 1
Link to comment
Share on other sites

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. 

  • Like 2
Link to comment
Share on other sites

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. 

 

 

 

 

 

 

  • Like 4
Link to comment
Share on other sites

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

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"

 

  • Like 2
Link to comment
Share on other sites

@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!
 

  • Like 1
Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...