[JS] SET OBJECT POSITION

Hi Math,

I came across your example for moving an object using x/y values.

How would I go about moving multiple objects. I have tried grouping layers and using the array ref for the grouped layer, but it will only move the first layer in the group and not all the others.

Would a while loop be able to go from layer 3 to 50, for example and then move all the objects on those layers?

Example code would be great if you're willing to look at this, I know this is an old thread...
R

I mock up some better explanation tomorrow, but yes its possible.
Using the same acc-name for all elements and loop them and they will all animate.
Do check my samples im quite sure there is on showing this.
If not i mock up something tomorrow.

These might help...
https://community.articulate.com/discussions/articulate-storyline/selecting-groups-of-elements-with-javascript-by-class

https://community.articulate.com/discussions/building-better-courses/animate-storyline-groups-with-gsap

https://community.articulate.com/discussions/building-better-courses/how-to-use-gsap-for-animation-in-storyline

https://360.articulate.com/review/content/bf35e314-c2a5-42c8-948d-4ab576847e5d/review

Thank you Math, I'll take a look.

Math,

I've been playing with the code and while I can get it to work with one group, I can't figure out how to make it work with multiple groups.

The issue I've got is that I've got buttons with states, when grouped, the whole group changes state on hover and click.

I've tried separating them out into 12 groups, and I'm trying to use the code below to move the groups, but it doesn't work.

gsap.to( allGroups[0].parentElement, { duration:0.5, x: -808});
gsap.to( allGroups[1].parentElement, { duration:0.5, x: -692});
gsap.to( allGroups[2].parentElement, { duration:0.5, x: -576});
gsap.to( allGroups[3].parentElement, { duration:0.5, x: -468});
gsap.to( allGroups[4].parentElement, { duration:0.5, x: -459});
gsap.to( allGroups[5].parentElement, { duration:0.5, x: -344});
gsap.to( allGroups[6].parentElement, { duration:0.5, x: -344});
gsap.to( allGroups[7].parentElement, { duration:0.5, x: -229});
gsap.to( allGroups[8].parentElement, { duration:0.5, x: -113});
gsap.to( allGroups[9].parentElement, { duration:0.5, x: -17});
gsap.to( allGroups[10].parentElement, { duration:0.5, x: 96});
gsap.to( allGroups[11].parentElement, { duration:0.5, x: 212});
gsap.to( allGroups[12].parentElement, { duration:0.5, x: 328});

I should point out I've got the screen divided into 10 sections, with shapes reacting to hovers to move my group horizontally back and forth across the screen.

Using just one group [0] with all the objects inside it works fine but I get the hover issue.

Can you help?

R.

The group hover issue is a known Storyline bug. Articulate acknowledged that and they told ( quite some time ago ) that they are looking into that. I do hope they will fix that soon.

Why your code isnot working i cannot tell directly...maybe good to share a sample of it, then i can quickly test and see....else i need to rebuild something like this.
On a sidenote...the console is your best friend ;-)

HI Rob,

Not sure what you do different, but using this old one and adding buttons into the groups...all works nicely.

A solution using GSAP or TweenLite to reposition elements may be useful. However, it has the feature that changing the page size in the browser (e.g. the F11 key) resets the element's position. Is there any workaround for this problem?

Yes. Use a browser event to trigger functions that reset/recalculate the position. Using 'vw' and 'vh' or % instead of pixels also helps.

Thank you very much for the tip. Onresize event works, % probably not.