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
Смотрите видео Crop images with Javascript in Storyline 360 онлайн без регистрации, длительностью часов минут секунд в хорошем качестве. Это видео добавил пользователь Learnomancer 14 Апрель 2024, не забудьте поделиться им ссылкой с друзьями и знакомыми, на нашем сайте его посмотрели 449 раз и оно понравилось 14 людям.