Animations at object-level instead of slide-level

https://360.articulate.com/review/content/50f76dec-c08d-4b12-9a95-8b31e2d5c57e/review

Something like this. I do think you can manage this without Javascript, but for learning sake i mocked it up quickly.

Basically this is the code:
let blackShape = document.querySelector("[data-acc-text='blackShape']");
let bsWidth = gsap.getProperty(blackShape,"width","px");
gsap.to(blackShape, { x:"-="+bsWidth,duration:0.75});

let iconWhite = document.querySelector("[data-acc-text='iconWhite']");
gsap.to(iconWhite, { autoAlpha:0,duration:0.75});

let tfWhite = document.querySelector("[data-acc-text='tfWhite']");
gsap.to(tfWhite, { autoAlpha:0,duration:0.75});

As Storyline doesnot has a MouseOut event you have to fix that somehow.
Either use an elemen't hover to activate a MouseOut as i do with the black background..
or add a MouseOut event to the complete page.

Added the sample file.

Kind regards,
Math