Enhance Your Articulate Storyline 360 Animations Using Greensock
ฝัง
- เผยแพร่เมื่อ 17 ต.ค. 2024
- Articulate Storyline 360 allows you to do basic animations within your courses, but it is pretty limited regarding what you can animate. It does simple entrance and exit animations, but that is about it: no easing controls, no repeats, and other standard animation capabilities.
Thankfully Articulate Storyline gives you another option. The exported courses use a JavaScript animation library called Greensock. Greensock gives you much control over your animations, which means we can have things animated precisely how we want with just a little code.
In this video, I walk you through how to get started with the basics and show you an example of how it can be used.
-- Code --
//Reference the object
var theObject = document.querySelectorAll("[data-acc-text='basketball']");
//Animate in GSAP
gsap.to(theObject, { y: 562, ease: "bounce.out"})
If you want to experience the full course check out www.udemy.com/...
If you would like learn more visit learningdojo.n...
Jeff, you are living up to your moniker again! Thank you so much for sharing with the content development community!
Haha, Thanks Angie!
Very good video Jeff! This is so helpful to customize animations in Storyline!
Glad it was helpful!
Hey Jeff, I've followed you and your career for a looooooong time, way back when to a mobile scripting class in Jersey and bought some software from you, dev software, and even fell in love with the "Dream Crusher" app (you gotta reinvent that app!). Anyway, I love your Learning Dojo stuff, great videos, super well produced and well thought out. Thanks for continuing to share your knowledge with the rest of the world. I'll continue to watch.
Hey Bradley! I remember you very well actually! Thanks for your kind comments and yeah need to do something with that DreamCrusher app. It was Flash-based back in the day, need to redo a new one.
@@LearningDojo Nice, good to hear ya remember me. Well, let's make that DreamCrusher app opportunity a future project. With so many people working remote, it's a great way (tool) to use during a collaborative meeting online to share, assign, call out, award, etc. people on Teams or Zoom I just think it'd grow legs in today's remote environment.
That is one of the coolest instructional designers vlog's I have found so far. I have been enjoying your videos for almost a week. I see that you have highly rated courses on Udemy. I want to know if/when you plan to publish a course on employing javascript to enhance SL built courses. I see that with javascript, one can go beyond what most people can do with Articulate. Thanks!
Appreciate the feedback. An advanced course in Storyline is for sure something I have thought about many times. Currently I am wrapping up a Rise course then need to update the Storyline one to be more up to date and a Camtasia certification course so it is on my list but a little further down. I have created several JavaScript and Storyline videos in the mean time so make sure you check that playlist out for now.
Hey Jeff.. It's a very interesting topic and you explained it clearly. Thank you so much. But, I'm unable to execute it in my project. Should I install gsap somehow?
You should not have to install it. Hmm, can you email me your code? jeff@learningdojo.ninja
This video is great! I love the little bounce while hovering animation. How did you get it to return to the initial state when you leave the hover?
That has to another object hover state that returns it back.
can you explain that a little more? @@LearningDojo
@@theilldumdum So you add an object that matches the background so it blends in or a hotspot under the object and make it a little bigger than the button so when you leave the object it then hovers over the object below it and that is where you add your trigger to stop or return the animation.
Dude, this is BRILLIANT. Quick Q: How valuable do you think it is as an elearning developer to spend some time upskilling in JS? Eons ago I engertained the idea of being a web developer, but JS always intimidated me. Now that I'm an ID, it seems like knowing my way around JS could give me an edge. What are your thoughts?
Hey Alex - Good question. I think learning JS is extremely helpful. In fact things you do in Storyline reflect what JS does. For example, variables, triggers, events, conditions are all foundational principles in in JS and Storyline uses those UI elements. When SL publishes it converts the behavior to JS. So whenever I teach at conferences I always try to tie what people already know is SL to what JS does and then it becomes just a matter of syntax and how to write it. I have been toying around with a JS and Storyline course where I teach the principles of JS and then show people how to use it in SL.
But also don't think Learning Devs need to dive deep into code though. I think knowing the basics of JS, HTML and CSS help though.
Hey Jeff! Thank you so much for this video. It's always inspiring to see your work. Quick question, I am working on a project, and I'm adding the bounce effect to some tabs, but after the animation is complete, the object remains at the scale I set it using Js, I noticed you have a "Return Trigger", could you please let us know more about it? Thanks!
Yeah so what I had to do since there was no "on hover leave" type of event is I had to add a shape behind each of the buttons that would return the section back to its regular state. I am thinking I am going to do a video just on how I did that example I showed in this video.
This is so cool!! But everytime I change the size of my window, the element jumps to a different place. Do you have a quick tip to fix this?
Haha, just literally recorded a video addressing this today. Look for it next week!
Amazing stuff, thank you so much for sharing!!!
My pleasure!
Can greensock rotate objects on the Z axis? this would allow for card flip style animations like you get in RISE
Yes it can! But I am not sure yet if I can have additional content on the other side of the card. You may have to have text on a separate item and trigger a state change when the animation completes. I have been thinking about playing around with this idea. I will move it up in my blog ideas.
Have you noticed that the script delays on the initial launch of the storyline file? every time i test it the first click doesn't work then on the second it works fine
Hmm, I have not noticed that. Have you checked other browsers?
Any idea how to make this work the same way no matter what size screen you are viewing the training in? Mine acts different every time......
So I have it so it stays the same but does not go off the stage here. th-cam.com/video/5fYJeNYlEKc/w-d-xo.html
Good stuff!
Thanks!
Or you can also had an over that is biger with a picture that as an animation?
Yes you could but it’s not as smooth and you can do more animations with Greensock. But I think it’s more optional stylistic preference so you don’t have to use Greensock. More of a nice option if you want that kind of style.