I'm looking for help with how to import or utilize an infographic within my SL project. I played around with creating a quiz - but I think the infographic is a bit complex for that approach. Maybe I should just use a tabbed interaction? I'd love to use this great image that was created specifically for this course, but I'm not sure how. Help!
This actual is a solution to a often heard request...for the push page transition. Now it looks more realistic... Moving up or down depending on clicks.
Not done offcourse...next im gonna add scrollTriggers... and offcourse add some interaction so you can choose paths... and more animation :-)
Thanks for sharing an example, Math! That's a super sleek animation.
Holly, another option would be to create a branching scenario if they don't need to see all of the questions/options. If you're only focused on them answering and getting a result customized to them, here are some ideas:
1st slide - Tweak the graphic to include the blue background on the bottom of the slide with the yellow START button
Once they click start, the learner is taken to the first question, "Where do you write down your thoughts?" Then branch to the next question according to their response.
I'd recommend building out all the question slides first and titling each slide using the question itself so it's easy to link to for all of the responses. I'd also build out the Results slides so you have those ready as well before linking. Then you can easily refer to the infographic and link out to the response for each of the question slides.
I created a quick starter template for you as an example. Feel free to use/edit it if you find it helpful.
Use your mousewheel to scroll down and up. In this one only that works and the man on the ladder moves up and down the ladder when you scroll up or down.
You do not need scrollTrigger to get this done, with plain Javascript it works too.
If you click in the top right somewhere on the first page...you get a settings layer on which you can choose some settings.... scroll amount in pixels, duration and type of ease. If you change those, they affect the animation and transition. Best to see the change by not using the mousewheel, but just clicking on the hidden buttons in the lower half...and the top part when jumping to the next page...
Especially fun when changing to 7...elastic.out..cause that one's absurd ;-)
Agree Jennifer, although i love the OPA approach, and especially as seen in Rise360 i love the simplicity for users...its hard to get that working in Storyline...mainly due to the internal setup of Storyline. Not that most users care about it, but well for creating more modern looking courses... the default 'slide-approach' Storyline uses is not fine anymore.
In my opinion courses nowadays should be based upon either Mobile First Approach or at least OPA or SPA ( OPA=One Page Approach, SPA = Single Page Approach ) and in fact behind the scenes Storyline does that...it is a SPA, but limited to a fixed size, so we cannot create real webpages with it...
As other users already mentioned...for that Articulate would need to rebuild Storyline from scratch... so thats not gonna happen im afraid...
I did do some work that needed to be 100% accessible.. for GSA.. so offcourse ;-) but aside from that accessibility isnot a main concern for most European clients. As the main two clients i work for are universities and use Canvas, it for sure will be in the future.
10 Replies
Gonna play with it ;-)
What i plan is to create a scrollTrigger setup like this..
https://greensock.com/scrolltrigger/
So scrolling down parts of your infographic reveal and animate...
On it now ;-)
Awesome!!
First basic sample setup.
https://360.articulate.com/review/content/0614d8b9-becd-4797-aeab-5258611878cb/review
Hovering on bottom and/or top and a arrow will show...you can then click and the page transitions/moves down...showing next part of the infographic. On the second page you then can scroll up again to get to the first part.
This actual is a solution to a often heard request...for the push page transition. Now it looks more realistic... Moving up or down depending on clicks.
Not done offcourse...next im gonna add scrollTriggers... and offcourse add some interaction so you can choose paths... and more animation :-)
Thanks for sharing an example, Math! That's a super sleek animation.
Holly, another option would be to create a branching scenario if they don't need to see all of the questions/options. If you're only focused on them answering and getting a result customized to them, here are some ideas:
I created a quick starter template for you as an example. Feel free to use/edit it if you find it helpful.
Here a sample of what you can do setting up a Storyline as a OnePageScroller and then using GSAP with scrollTrigger to animate elements.
https://360.articulate.com/review/content/0381f6c9-6baa-45e2-b5d8-375fa803ffa1/review
Use your mousewheel to scroll down and up.
In this one only that works and the man on the ladder moves up and down the ladder when you scroll up or down.
You do not need scrollTrigger to get this done, with plain Javascript it works too.
If you click in the top right somewhere on the first page...you get a settings layer on which you can choose some settings.... scroll amount in pixels, duration and type of ease.
If you change those, they affect the animation and transition.
Best to see the change by not using the mousewheel, but just clicking on the hidden buttons in the lower half...and the top part when jumping to the next page...
Especially fun when changing to 7...elastic.out..cause that one's absurd ;-)
This post was removed by the author
Two great - but very difficult examples. Thank you both.
Agree Jennifer, although i love the OPA approach, and especially as seen in Rise360 i love the simplicity for users...its hard to get that working in Storyline...mainly due to the internal setup of Storyline. Not that most users care about it, but well for creating more modern looking courses...
the default 'slide-approach' Storyline uses is not fine anymore.
In my opinion courses nowadays should be based upon either Mobile First Approach or at least OPA or SPA ( OPA=One Page Approach, SPA = Single Page Approach ) and in fact behind the scenes Storyline does that...it is a SPA, but limited to a fixed size, so we cannot create real webpages with it...
As other users already mentioned...for that Articulate would need to rebuild Storyline from scratch... so thats not gonna happen im afraid...
Thanks for providing more information Math. Does accessibility come into it? I know that Rise is not as accessible as Storyline.
I did do some work that needed to be 100% accessible.. for GSA.. so offcourse ;-) but aside from that accessibility isnot a main concern for most European clients. As the main two clients i work for are universities and use Canvas, it for sure will be in the future.