Hi – I’m curious if anyone has any suggestions / ideas on how to get the distance of objects from a specified point.
I’m trying to animate a collection of objects in a carousel like fashion with indicators of the current item being presented. When mouse over / click occurs on an indicator, I want it to animate to the corresponding item… with the timeline triggers, I’ve only managed to have it go through the animation from the beginning of the timeline.
My intention is to get the current offset of the object on screen and then animate to the desired item from the current item position… otherwise it seems a bit odd.
If you’re looking to calculate the distance between two points on a grid, then this YouTube video might help.
So basically, you’d just need to get the X (left) & Y (top) location of the element and the X & Y location of the mouse/touch event.
Note — origins of the element are at the top left, so that might skew your calculations. Remember that the origin of the scene is at the top left and the origin of the element is at the top left.
Basically, add half the width of the element to the X value, and half the height of the element to the Y value, to get the center-point of an element.
This template is an example of how to get the mouse location…
The “Bounce” template might be close to what you’re looking for, as the mouse over / touch event is used as comparison to the center of the ball. The further the event is from the center, the further the ball will bounce off to the opposite side.
If you have a few elements and animate one. what happens to the others and how do you control direction.
Left to right , right to left when the carousel effect is going back and forth.
(Without really seeing your setup) It may be better to group you elements first in a group that is the width of all the contained elements widths combined.
Then put that group inside another outer group.
The outer group can be set to a smaller width which coincides with a carousel element’s width.
You then calculate how far left to move the inner group.
( Note border pixel widths may need to be taken into consideration )
Hi @MarkHunte - thanks for your suggestion. Yes, this is exactly what I was looking for. Essentially it is the same principle as what you have done with the exception of not hiding the overflow on the main grouped elements. You explained in more detail what I had created within the scene as far as grouping.
Hi @Photics – thanks for your suggestions, they are very cool, and gave me some ideas on other features and will explore those later when I have more time. The persistent symbol idea was pretty close, although I prefer to have the other items seen during the transition. Thanks again!