[JS] SET OBJECT POSITION

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

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.

Thank you Math, I'll take a look.

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

Not sure for what but thanks anyway ;-)

Your surname aint coincidence for this kind of interactivity ;-) Its really parent-child behaviour of elements ;-)

Well made it happen. In fact i wanted rotation of the planets in our galaxy on SlideLayers as example, but especially rotation was a bit more tricky. I probably make it happen some time but not today ;-)

https://360.articulate.com/review/content/41f9e131-b5ba-4bef-8656-d57cd1d6f526/review

Here you see a sample of whats needed to get SlideLayers to act upon changes of objects on the baseLayer. In fact you only need to calculate the distance between the parent-child, so you could do it with less Javascript.

But for now showing a child on a SlideLayer moving along with a random movement of a parent on the baseLayer.

The rotation idea i will finish some other time.. here is the working Storyline too.

Yes. With javascript for sure. Will make a sample tomorrow

Both work when i test them. So should work on the LMS too. Guess it depends on if the Scorm is shown in an iframe and thus maybe the selection used doesnot work.

Also although the selection that is used works fine.. its quite dependant on the amount of elements you have on your timeline. If you have less or more...the selector needs to be different.

let pilka = document.getElementsByClassName("slideobject-maskable")[13];

The number 13 relates to layer 14 in the timeline... its array based, so 0-13 from the bottom....
So if you change the amount of elements... well it wont work. Or change the order...then something else will move.

document.querySelector("#slide-window > div > div > div.slide-transition-container > div > div.slide-layer.base-layer.shown > div:nth-child(14) > div");

This is the selector as copied from the running HTML... 

I use the accessibility names as selector...for a imported image thats always the original name.
So for the ball thats like this...

let pilka = document.querySelector("[data-acc-text='path859.png']");

how many other elements you add, what layer its on...this works always.