Forum Discussion
JavaScript Placement issues
I'm trying to recreate a course in Storyline that was originally done in Adobe Animate. The original had this animation where a flowchart would start big, shrink, move to the left, an outline box appear, and then an enlarged "selection" fade while growing into the middle of the screen. I was able to do this using the JavaScript feature and was thrilled with the final effect, it looked really good. Then I previewed it on a different monitor and nothing was lining up.
I realized that this is due to relevant placement of the elements and that the screen size and resolutions were causing these issues. My original monitor is at 1920 x 1200 and the second one is 1920 x 1080. Additionally, I found that window sizing woudld also affects these placements.
Is there anything I can do to make sure these elements always line up?
Any help is appreciated.
5 Replies
edwardpriddy-89 See the attached solution. Test it in Preview on different devices and monitor sizes to confirm that the positioning remains consistent across all of them.
I updated the JavaScript to use object references instead of DOM elements and removed the images that I considered unnecessary for this interaction.
Interesting that the comment // or top, depending on the API is still sitting in cue 1, and cue 2 declares a rectangle1 reference that's never used. That reads like AI-drafted code pasted without a test run. Also which images were removed? I see the same as the original file.
DShaw Why would I attach my file and confirm that it’s working if I hadn’t tested the code? Even without testing it, you can tell by looking at the code that it won’t generate any syntax errors, even though I forgot to remove an unused reference and comment.
A rectangle1 referred to a bordered transparent rectangle. I initially tried targeting and using x: rectangle1.x and y: rectangle1.y to align and center vector1.x and y with the rectangle position. It didn’t work exactly as intended, so I changed that and manipulated the x and y values of vector1 directly instead.
I also didn't remove the comment // or top, depending on the API because it was documenting an earlier implementation attempt. Initially, I tried animating the CSS bottom property (bottom: "-10px"), but figured that it wouldn't work since vector1 does not resolve to a DOM element. The comment was meant to indicate that the property (bottom vs. top) would depend on whether the animation was targeting a DOM element via CSS or using the Storyline JavaScript API instead.The referenced images were not physically removed from the project. Instead, they were hidden on the timeline so they would not be displayed during slide playback. You can compare the original project file with my version to see the changes and perhaps figure why I choose that way.
At this point, I'm not sure why I'm having to explain any of this. Am I expected to apologize for leaving a reference and a comment in my own code? Meanwhile, the solution you provided isn't working. Have you looked into why that might be?
Had a look at your file and it's the units in your GSAP tweens. Your move values are in vw/vh, which are percentages of the browser window. SL doesn't position anything against the browser window. It draws the slide at its story size (720 x 540 in your project) and then scales the whole slide up or down to fit whatever window it's in. So your animations were measured against one thing (the window) while the objects live in another (the slide). On the monitor you built it on, the two happened to line up. On any other monitor or window size, they don't, which is exactly what you were seeing. To fix I used plain numbers instead of vw/vh. GSAP then moves the object in the slide's own pixels, and those scale together with everything else on the slide. Once it looks right on one screen, it should look right on every screen.
Before:
gsap.to(el, {x: "-10vw", y: "-30vh", scale: 0.23, duration: 2});
After:
gsap.to(el, {x: -271, y: -384, scale: 0.23, duration: 2});
The numbers are just the distance you want the object to travel in slide pixels (measured centre to centre, since GSAP scales objects around their centre). I've updated the three triggers in your file with values worked out from your layout. Preview it on both your monitors and everything should land in the same place. If the mid-shrink step feels slightly off, just nudge that one y value; it should then hold everywhere.
