2 Error Messages in Console

Just realized how odd this project looks out of context haha 
It is supposed to identify where to look during an interview so there is a blue dot on the zone where the Boss's face should go. This blue dot will be replaces with a view finder once I get the script to function. When the user pushes continue, the number in the lower part of the screen should go to 10 to show that the variable is executing correctly. The arrows for some reason aren't working in this copied slide.

you have two problems

• variable X and Y are missing in the storyline file
• and more important: don't use "TweenLite.set(Ada, { x: newX });", "TweenLite.set(Ada, { y: newY })"
  use: "TweenLite.set(Ada, { left: newX });", "TweenLite.set(Ada, { top: newY })"

storyline is using x, y for the positioning and scaling, not left/top -> so it can be used without disturbing storyline

what do you want to do with the javascript on the continue button?

HI Jürgen  thank you so much for taking the time to look at my project issue. You're right- for some reason when I copied the slide over to a new project it deleted half my variables which I guess would be why the arrows weren't working. 

So the goal of the continue button is to add 10 to the variable ImpressionBar when the object Ada is in the correct coordinates within the margin of error. I have gone through a bunch of different versions of code to accomplish that- the one that was the closest to executing was this one attached to this file. I have the object Ada in the correct position currently (where the blue dot is) so theoretically when I push the continue button the 0 should go to 10. 

The issue I am running into currently is that when I push continue and go to the dev tools, under console- I am getting those errors even on blank slides- but when I clear them out and go back to the slide and push continue- when I return to the dev tools, there's no log of any activity from my click. So for some reason the script isnt even being triggered at all.

I really appreciate your help! 

Storyline360 has GSAP built in. So you should use gsap.set() instead of Tweenlite.set()

@Jurgen Actually GSAP is thus intelligent it uses transforms and will recalculate values.
The error JC made is probably using Tweenlite and thus using outdated code.

https://gsap.com/resources/get-started

By default GSAP will use px and degrees for transforms but you can use other units like, vw, radians or even do your own JS calculations or relative values!

x: 200, // use default of px
x: "+=200" // relative values
x: '40vw', // or pass in a string with a different unit for GSAP to parse
x: () => window.innerWidth / 2, // you can even use functional values to do a calculation!

And in the end using GSAP specific code simplifies your setup...
Use this to move your ADA...

 gsap.set(Ada, { y: "-=5" }); // Move the object relatively down
 gsap.set(Ada, { x: "+=5" }); // Move the object relatively to the right

the problem with x, y* is that storyline resets this value on change the size of slide area on

• resize of the browser window
• switch landscape to portrait mode on mobil
• open/close menu

if you use left/right/top/bottom to position a dom element, this will not be touched by storyline

* css: "transform: translate()"

Thank you for your help with the button controls- I will definitly work those into the code. The animation is pretty jagged at the moment so that should smooth them out!
I was wondering if you could look at the script for the Continue button? That is my largest issue. It seems like my script may be triggering but stopping at some point, however, it keeps getting stopped at the checkIntersectAndAddPoints  function (the very beginning). Is there a GSAP specific code that would work better? Or have I overlooked something in my code? I attached a simplified version of the slide without any other triggers or codes (it still wont execute haha)

I really appreciate you taking the time to help me!

Your setup was unneeded complex. And you missed a few essential things.

var Ada = document.querySelector("[data-acc-text='Ada']");
var targetShp = document.querySelector("[data-acc-text='targetShape']");

var adaX = gsap.getProperty(Ada, "x"); 
var targetX = gsap.getProperty(targetShp, "x"); 

One of these was the way you select elements in Storyline. The acc-name is the easiest way to select an element. You can use ids and tags, but then you have to make sure your element IS INDEED selected.

Also by not knowing the gsap syntax you miss essentials. As there is 'getProperty'. This gsap-helper function gets any attruibute from a DOM-element.

That being said...here is a proper sample working only on x-axis. The rest is up to you.

Kind regards,

Math

Hi Math
You are right! This gsap function has fixed all the jumping issues and the querySelector simplified it a ton.
I really appreciate your help!