GSAP, x-y transformation in the Modern Player

Hi Math, do you know of a way to use Greensock to target the Next button on the player (modern version of the player)? 

Use a variable. If true go to next page.

That is a great idea. Do you think it is possible to also make the Next button on the player yoyo fade when the user reaches the end of the timeline?

Would the selector be the id of the item - like in the example below "next" - do I have to include any parent reference? 

and the variable would be like the example - var  nxtBtn = document.querySelectorAll( "[data-acc-text='next']");

When using the console, you can test directly in the console whether some code works.
Like this...

Step 1: Get your selector or JS path ( either will do ). Right click any element to get this popups.



Step 2: You now have a line of code like this:
document.querySelector("#next");

Step 3: Use some GSAP animation on it. Like this:
let nextBttn = document.querySelector("#next");
gsap.to(nextBttn, { duration:0.5, autoAlpha:0 });

Step 4: Test it in the console by pasting it inthere. As seen here:


Step5: Press ENTER and you see your code executed. Notice the next button disappearing in 0.5 seconds. And thus this will work when using it in Storyline too.

It worked perfectly! I appreciate you showing me the steps you went through to capture the button id and how to test it, I am not sure if I would have figured this out without your step by step example. Incorporating this into my project. Thank you!!

I have a project that I am working on that the buttons work for Desktop use, but the mobile use - mobile Chrome - the button doesn't work. Is there an extra listener or code that I need to apply?

//== code below  ===

submitButton.forEach( item => {
      item.addEventListener('mouseover', OverSub_01 );
      item.addEventListener('mouseout', OutSub_01 );
      item.addEventListener('click', PressSub_01 );
});

function OverSub_01 ( event ) {
  gsap.to(submitButton, .5 ,{alpha:.6, ease: "back.out(1)"});
}

function OutSub_01 ( event ) {
  gsap.to(submitButton, 1 ,{alpha:1, ease: "back.out(1)"});
}

function PressSub_01 ( event ) {
  gsap.to(CorrectAnswer, .5 ,{x:"-2%", ease: "back.out(4)"});

}

Probably you should need to add a listener for a touch event.

Hello Math,
I want to make an animation, but I couldn't make it happen. I couldn't adjust the Y position as I wanted. When I hover over the button, I want it to slide to the top a little and when I move over it, I want it to come back to its place, but it didn't work exactly the way I wanted. Do you have any ideas about this?

https://360.articulate.com/review/content/395de61b-fe88-4577-8c4d-142ab63c5745/review