I can't find any answer to this. I'm creating some animated buttons, one which should have the background animated, so when you hover over it, the background will grow from left to right in a different color.
The problem with Storyline is that animations seems to be "locked" on a slide-level only, so when I choose to the Grow-animation and the From Left sub-option on the shape, the animations will always start at slide-level so they appear outside the main object at first. The only way to solve this as far as I can see is to have it Grow from the center, but that isn't really the animation-style I want.
Any way to constraint animations to a specific object/shape-area?
May I ask a favor from you? Could you please take a look at my file and let me know how my issue can be solved?
It would be very interesting to see how the the code should be set up in my example. That would also teach me some JS so I can get started experimenting more. I have some programming-experience with Python, so I can spot the logic.
The bottom button is the problem, as that is the one where I need the animation implemented. Now it just grows in when you hover with the mouse, but I need it to fill up from left to right.
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.
Thanks a lot for helping out. Doesn't look quite right with height and width, but I guess I can add custom properties to the code for that. It's a shame you can't preview slides with JS in them, I hope Articulate will implement that possibility.
If someone knows how I can achieve this without using JS, please let me know.
6 Replies
Use GSAP. It's the Javascript library used internally to control all Storyline animations and transitions. Check my posts about GSAP...
A recent sample showing here...
https://community.articulate.com/discussions/articulate-storyline/make-hans-fall-off-cliff
Thanks, Math.
Guess I'll have to learn JavaScript now. I hope they'll implement support for Python as well, I've made a suggestion about it.
May I ask a favor from you?
Could you please take a look at my file and let me know how my issue can be solved?
It would be very interesting to see how the the code should be set up in my example. That would also teach me some JS so I can get started experimenting more. I have some programming-experience with Python, so I can spot the logic.
The bottom button is the problem, as that is the one where I need the animation implemented. Now it just grows in when you hover with the mouse, but I need it to fill up from left to right.
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
Hi Math,
Thanks a lot for helping out. Doesn't look quite right with height and width, but I guess I can add custom properties to the code for that.
It's a shame you can't preview slides with JS in them, I hope Articulate will implement that possibility.
If someone knows how I can achieve this without using JS, please let me know.
Guess a motion path instead of the gsap x-animation and your fine..showing/hiding appropriate layers to complement it.