Forum Discussion

HunterBlake's avatar
HunterBlake
Community Member
1 day ago

JavaScript Help - Object Variables

Hey All!

I learned how to do a few JavaScript animations from a YouTube video. It was a couple of years ago before Storyline put in their object reference code. The video I learned from uses the Accessibility box to call the object. It works great, but if I have someone that is disabled, the Accessibility text on my flip card is now "card_back" instead of an actual description. I am trying to figure out how to change my code to read the object reference instead of the accessibility box. Hope that makes sense...

Here is my current code that works with the accessibility box call:

//select the Card(s)
var card_front = document.querySelector("[data-acc-text='card_front']");
var card_back = document.querySelector("[data-acc-text='card_back']");

//Card Front Timeline
let card_front_timeline = gsap.timeline();

card_front_timeline.set(card_back,{rotateY:-90});
card_front_timeline.to(card_front,{rotateY:-90, duration:0.5});
card_front_timeline.to(card_back,{rotateY:0, duration:0.5});

How do I chance the //select the card(s) section to the Storyline object references? Here are the two that I am trying to use:

const cardFront = object('64XQyHVDBOj');
const cardBack = object('6ft6OP0e9xE');

Any help would be greatly appreciated! And please let me know if something is unclear.

accessibility
Articulate 360
storyline 360

3 Replies

  • coraldstephen's avatar
    coraldstephen
    New to the Community
    6 hours ago

    If the object references return the actual DOM element, you should be able to swap them in directly and use them throughout the timeline instead of querying by accessibility text. That's a much cleaner approach and keeps the accessibility labels free for their intended purpose.

    • HunterBlake's avatar
      HunterBlake
      Community Member
      2 hours ago

      Hey Stephen,

      That is almost English for me. 😁 Can you give me an example?

      I have tried my script with:

      //select the Card(s)

      var cardFront = object('64XQyHVDBOj');
      var cardBack = object('6ft6OP0e9xE');  

      //Card Front Timeline
      let card_front_timeline = gsap.timeline();

      card_front_timeline.set(card_back,{rotateY:-90});
      card_front_timeline.to(card_front,{rotateY:-90, duration:0.5});
      card_front_timeline.to(card_back,{rotateY:0, duration:0.5});

      That did not work.