Crop images with Javascript in Storyline 360
In this video tutorial, we find out how to use CSS clip path to change the shape of our images, or rather of our image cropping areas, in Articulate Storyline 360.
We're going to use Execute Javascript triggers, and, inside them, our code will add clip paths to the pictures. Then, we'll animate those clip paths with the GSAP (Greensock Animation Platform) in order to create a nice effect.
Although there already are some features available that achieve more or less the same thing in Storyline, it's interesting to see how we can control our animation using Javascript.
Find out more about clip paths here:
https://developer.mozilla.org/en-US/d...
CSS clip path generator:
https://10015.io/tools/css-clip-path-...
Code available here: https://learnomancer.com/posts/dynami...
#storyline #articulatestoryline #javascript #gsap #storyline360 #elearningdevelopment #instructionaldesign #elearning #gsapanimation
Watch video Crop images with Javascript in Storyline 360 online without registration, duration hours minute second in high quality. This video was added by user Learnomancer 14 April 2024, don't forget to share it with your friends and acquaintances, it has been viewed on our site 322 once and liked it 11 people.