Storyline experiment - Smooth dynamic animations. Thoughts? How would you use it? (Now with .Story files)

Jan 30, 2017

Hey everyone - I started to experiment with some animations in Storyline that are a bit more dynamic and have a smoother motion.

You can see it in action here!

Thoughts? How would you use this?

I wanted the animations to have a nice ease from one state to another. I used a simple javascript tween/ease class to do this.

I also rigged this up to an animation I created using states so I could animated to different points in the animation. I will post this when it is ready to show another use.

Thanks to Nejc Žorga Dulmin for giving me the sliding menu background idea.

61 Replies

Leslie McKerchie
Staff

over 6 years ago11/22/17 at 2:12 pm (UTC)

Sorry to hear that Curtis. Perhaps you could reach out to David to ask about this directly via the 'Contact Me' option on the user profile.

David Charney
Author

almost 6 years ago05/15/18 at 3:18 pm (UTC)

I will have to check that link out!

Amanda Douvier

almost 6 years ago06/11/18 at 2:23 pm (UTC)

I was so inspired by the this. I decided to use this as a basis for an animation.

java_test.story

smko ghazi

almost 6 years ago06/19/18 at 3:39 am (UTC)

Is this project working on StoryLine 3?

almost 6 years ago06/19/18 at 6:55 pm (UTC)

Hi there, SMKO. David shared the source files here. It was created with Storyline 360, but if you have the latest update, you'll probably be able to open it in Storyline 3. Here's more information about the compatibility of those two versions.

smko ghazi

almost 6 years ago06/20/18 at 8:15 pm (UTC)

This post was removed by the author

almost 6 years ago06/20/18 at 8:21 pm (UTC)

Hi Crystal I can not find the source file to download. Please help ...

Leslie McKerchie
Staff

almost 6 years ago06/22/18 at 2:36 pm (UTC)

Ah, looks like those files may not be public after all smko. You may want to reach out to the user via his website or via his profile here.

Alex Streczyn-Woods

over 5 years ago08/05/18 at 6:00 pm (UTC)

brilliant and beautiful demo. Thanks!

Joe Shultheis

over 5 years ago08/13/18 at 8:13 pm (UTC)

I have the same problem Curtis had. I would like to see an example to see how use TweenMax in Storyline, but can not find any files our tutorials on this anyone?

Ashley Terwilliger-Pollard
Staff

over 5 years ago08/14/18 at 4:22 pm (UTC)

Hi Joe,

Admittedly, what I know about TweenMax, is next to zero. I saw through a quick search that it's a Javascript library for HTML5, so it's even further out of my realm of experience! Hopefully, someone in ELH has used it recently and can share details with you.

Curtis Wiens

over 5 years ago08/14/18 at 5:17 pm (UTC)

I have communication working between Greensock and storyline here: Not sure if that is helpful. https://360.articulate.com/review/content/0e62f641-b993-4601-94e9-46f2f3acdd50/review

over 5 years ago08/21/18 at 8:43 am (UTC)

Hi Curtis are you able to share any details of this and maybe a .story file, I'm just starting to play with Greensock.

Thanks

James

Marcos Roberto

over 5 years ago12/19/18 at 12:18 pm (UTC)

how to get these examples for the STORYLINE 2? UNFORTUNATELY I JUST WORK WITH IT....

Ashley Terwilliger-Pollard
Staff

over 5 years ago12/19/18 at 2:28 pm (UTC)

Hi Marcos,

If the examples were created with Storyline 3 or Storyline 360 they can't be converted back into a Storyline 2 file. Sorry that you won't be able to open those. If you still want to take a look at how they're built, you could always start a trial Articulate 360 here to test it out in Storyline 360.

Marcos Roberto

over 5 years ago12/21/18 at 4:55 pm (UTC)

Hello David Charney and friends ... I installed the SL3 test to see how the file you put to download (Motion Ease ButtonToggle) works ... but, something is wrong when I publish and I try to play ... you can compare the files and see where I went wrong in SL2 please?

jquery_etste.story

over 5 years ago12/21/18 at 4:59 pm (UTC)

Hi Ashley Terwilliger thanks for the attention ... I did what you suggested and I downloaded the 30 day trial version of SL3 but I believe I'm doing something wrong ... I'm sending the file in SL2 to, if possible, someone help me

Ashley Terwilliger-Pollard
Staff

over 5 years ago12/21/18 at 6:17 pm (UTC)

Hi Marcos,

I know that some of the folks earlier were using Javascript libraries, so it's an area I don't have much knowledge in! Hopefully, someone is able to pop in here and take a look at your example and see where things have gone off course.

over 4 years ago10/14/19 at 6:53 pm (UTC)

How are you calling the TweenLite? Is it through a CDN?

over 4 years ago10/14/19 at 7:01 pm (UTC)

As of Storyline 360 it must be included already. All you have to do now is publish. Not HTML editing is required.

Curtis Wiens

over 4 years ago10/14/19 at 10:49 pm (UTC)

We have been able to bring GSAP directly into Storyline and tween SL native objects using aria labels.

over 4 years ago10/15/19 at 12:23 pm (UTC)

Curtis, I did have to fix that a while back. Sorry for the infinite looping login!

over 4 years ago10/15/19 at 12:25 pm (UTC)

Curtis - That is fantastic. So nice to be able to play around with tweenlite without all the exta work. Best!

over 4 years ago10/15/19 at 2:23 pm (UTC)

We use greensock quite often to accomplish certain motions that Storyline does not have natively. There are a couple tradeoffs in some accessibility functions, but otherwise it helps our shows have their own style and polish. A key feature I would throw out there is to place the GSAP (Greensock) com folder in the Master slide. That way you do not need address that step on individual screens. Fare forward fellow Storyliners!

Joe Shultheis
eLearning Development
Arden Hills Training Center; Room 12
651-366-5279

Leslie McKerchie
Staff

over 4 years ago10/15/19 at 2:36 pm (UTC)

Thanks for popping in to share your suggestion as well, Joe.

It looks like your email signature came through when you replied via email. You can remove that if needed by clicking ‘Edit’ beneath your response. Here’s a quick Peek video if you need help.