Тёмный

Using GreenSock in Storyline 360 for Enhanced Animations 

Learning Dojo
Подписаться 17 тыс.
Просмотров 8 тыс.
50% 1

GreenSock animations are part of Articulate Storyline 360, and it just takes small, simple JavaScript snippets to take advantage of it. This framework allows you to easily add scale, bounce, and movement on any object in your Storyline stage.
In a previous video, I showed you how to get started with it, and in this video, I showed you how to apply it to a real-world example. We add a scale and bounce effect to objects when you hover over them. Scaling and bouncing is just one example of using GreenSock within any Articulate Storyline 360 course.
- Code Sippet-
//Reference the object
var theObject = document.querySelectorAll("[data-acc-text='basketball']");
//Animate in GSAP
gsap.to(theObject, { x: 200 })
If you want to experience the full course check out www.udemy.com/course/create-e...
If you would like learn more visit learningdojo.ninja

Опубликовано:

 

31 дек 2022

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 52   
@wormholeinteractive
@wormholeinteractive Год назад
Excellent tutorial and so much value!
@LearningDojo
@LearningDojo Год назад
Glad it was helpful!
@KvBObaN
@KvBObaN Год назад
It's very helpful to me. Thanks JEFF!
@LearningDojo
@LearningDojo Год назад
Awesome! Glad you found it useful.
@karimueller238
@karimueller238 Год назад
This is awesome! Thanks!
@LearningDojo
@LearningDojo Год назад
Glad you like it!
@manxman8008
@manxman8008 11 месяцев назад
great explanations :)
@LearningDojo
@LearningDojo 11 месяцев назад
Glad it was helpful!
@tx4pro
@tx4pro 11 месяцев назад
Works for desktop but for mobile or iPad or Tablet not so. Great video.
@LearningDojo
@LearningDojo 11 месяцев назад
Hmm, it should. I will do some testing.
@jmgs83
@jmgs83 7 месяцев назад
Thanks for sharing. Your expanding the boundaries of storyline on a whole new level. Is it possible to play with Greensock's "ScrollSmoother" to get around the vertical scroll limitation on Storyline? Keep them tutorials coming!
@LearningDojo
@LearningDojo 7 месяцев назад
Hmm, good question. It could depend if they have that out of the box. I will add that to my backlog to play around with it and see.
@jazzlehazzle
@jazzlehazzle 7 месяцев назад
@LearningDojo
@LearningDojo 6 месяцев назад
Not easily. I have seen someone do this based on group names but problem is the way Storyline generates the HTML does not expose the name of objects so there is no unique way to grab the item that I have found. Alt text can be whatever you ant though so if you have something like 'This is a circle' you can still use the full sentence in the code instead of 'circle' so it should not throw off how you use alt text for 508. I have heard though that Articulate is working on a way to do more advanced animations. Probably based on GreenSock anyways so that may be improved in the future.
@mummastemptingcuisine7299
@mummastemptingcuisine7299 Год назад
Thanks, JEFF! It's really helpful. But I am still facing issues with this one. The problem is if I keep all 3 the objects from the beginning of the timeline, it works perfectly. But if I let them appear one by one, the position of the objects is changing as soon as I hover over the object named "Return trigger". Can you please help me with this?
@LearningDojo
@LearningDojo Год назад
Does it have to do with the responsiveness? Try watching this and let me know if it is still an issue ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-5fYJeNYlEKc.html
@Jasynn54321
@Jasynn54321 10 месяцев назад
Jeff - took a few of your courses on Udemy. Great instructor. Nice work! :) VIDEO REQUEST: I've been trying like heck to just add gsap easing to drag & drop items - to return them to their original positions when dropped incorrectly. Super ugly the way Storyline does it by default. But man... with the viewport being responsive etc, things get really wonky quick. Very difficult to pull off for some reason. Not sure if you figured out how it's done. Some dude on the forums has a bunch of code for targeting x/y positioning, but it doesn't really apply and it's far too convoluted. Sigh. Just say'n, I think a lot of folks would love a video on that. ;) Till then, I may just keep using custom Adobe Animate drag drops and pull 'em in as web objects. Can still send vars to the player that way... just would be nice to do it using js in Storyline 360.
@LearningDojo
@LearningDojo 10 месяцев назад
Hey! Glad you liked my courses. So from what I know GSAP draggable is not included in the Storyline output so you would need to link it to the published output. I think as you are saying though it probably would be hard to get it targeted correct and handle the responsiveness so might be quite the task to do. I will add it to my backlog and see if there is way to do this but make take some investigating.
@Jasynn54321
@Jasynn54321 10 месяцев назад
@LearningDojo I did get the easing to work, but yeah... even if you use getBoundingClientRect() to grab the starting position (using a different object in the same place to try to overcome stage size changes)... it still doesn't return to those coordinates correctly. Reeeally frustrating lol. Typical hair pulling, right? Anyhow, man... thanks for the reply, and for maybe taking a stab at it down the line. You do a great service to the dev community, so much appreciated. Blessings. Hit me up if you ever need to partner on anything. You seem like a good guy. :) jasonmckennadesign.
@domari9628
@domari9628 Год назад
Is there another way to select the object other than using the alt text? At my company we make Wcag compliant courses and need that alt text for other reasons.
@LearningDojo
@LearningDojo Год назад
You could do it if it is a group. I had someone do that, but even if your alt text is a more than one word, it will still work. You can have something like this "Image of purple car driving on a road" for your alt text. Then you would just do something like this to target the object. var theObject = document.querySelectorAll("[data-acc-text='Image of purple car driving on a road']"); And that should work.
@andreaborsoi7998
@andreaborsoi7998 Год назад
@@LearningDojo This was also my worry (lost accessibility) but, can the longer description contain spaces between characters? (not a underscore in the gaps?).
@LearningDojo
@LearningDojo Год назад
@@andreaborsoi7998 Oh yes for sure. I think in hindsight I would have created the video showing that but I just added underscores out of habit of coding practices but you can have normal text in there so should not prevent you from using the accessibility text like normal.
@daniareina7702
@daniareina7702 Год назад
JEFF, if you name the card as "button" and customize the hoover state to enter as bounce, even if you need js for that, wouldn't it be easier to repeat the action in the future? What do you think?
@LearningDojo
@LearningDojo Год назад
Possibly, I would have to see the code for that if I am understanding correctly. One thing I have learned in coding is there are many ways to do the same thing and always learn more efficient ways to do things so I am happy to explore other options.
@daniareina7702
@daniareina7702 Год назад
@@LearningDojo Thank you so much! If it works better this way, please let us know! And thank you for the tips, you always surprise us!
@shades7893
@shades7893 9 месяцев назад
Great instructor. I can get everything working. It just stops the moment i change the name of said object in Storyline. When i change the script to match the new name it just stops working.
@LearningDojo
@LearningDojo 9 месяцев назад
Hmm, send me your storyline file and I can take a look. jeff@learningdojo.ninja
@lifeofprachi
@lifeofprachi 9 месяцев назад
Can you please add a tutorial on, ‘How to add carousel in articulate 360 using motion paths and triggers?’
@LearningDojo
@LearningDojo 9 месяцев назад
Hmm, might be a challenge but I will look into it!
@griffindavis1875
@griffindavis1875 Год назад
You mention the code snippet being below the video, but I don't see it in the description.
@LearningDojo
@LearningDojo Год назад
Sorry I will get that added.
@fabianportero3563
@fabianportero3563 Год назад
Excellent video, but I have a problem, when I animate the scale or the position of the object are not responsive to the size of the window. Any idea how to fix it? Thanks!
@LearningDojo
@LearningDojo Год назад
Might need to play around with that. I will test somethings out. I think it may be having to scale/position based on percentage for that. Still kind of playing around with these things and sharing as I learn.
@fabianportero3563
@fabianportero3563 Год назад
@@LearningDojo Yes, for now I had to leave the greensock animations, I tried some things with window.innerHeight and screen.height/width but I still can't find a solution, I would really appreciate your help, thanks!
@suryabalamurugan5710
@suryabalamurugan5710 Год назад
Hey Jeff, how to increase or decrease the object height and width?
@LearningDojo
@LearningDojo Год назад
You would use the scale attribute if I am understanding correctly.
@gokcenurinan8492
@gokcenurinan8492 Год назад
It worked perfectly well! However, when I close the menu during preview, the objects overlap each other.What shoudl I do to prevent it?
@LearningDojo
@LearningDojo Год назад
Hmm, it might have to do with the responsiveness. I created a video to address this, maybe this will help ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-5fYJeNYlEKc.html
@gokcenurinan8492
@gokcenurinan8492 Год назад
@@LearningDojo I just deleted the menu section n the preview setting but of course it is not a permanent solution. I think this video is my answer, thank you!
@LearningDojo
@LearningDojo Год назад
@@gokcenurinan8492 Cool, yeah let me know if it still does not work.
@gokcenurinan8492
@gokcenurinan8492 Год назад
@@LearningDojo I'm still struggling with my project. Can I send you my storyline for you to review? I couldn't use "vh" in the JavaScript editor because there are six overlapping visuals. Thanks!
@LearningDojo
@LearningDojo Год назад
@@gokcenurinan8492 Yeah not sure if I can figure out a fix right away but I can take a look. jeff@learningdojo.ninja
@Minty1982AM
@Minty1982AM Год назад
This is great and just when I thought I had it figured out I have ran into the same responsive issues. Sometime, I don’t even resize the window and the objects behave unusually. Is anyone else having the same issue? Shame as they look great when they work.
@LearningDojo
@LearningDojo Год назад
I do address responsive issues here ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-5fYJeNYlEKc.html
@LearningDojo
@LearningDojo Год назад
Hope that helps!
@goldeneagle573
@goldeneagle573 Год назад
does GreenSock Animation work in Articulate Storyline 3?
@LearningDojo
@LearningDojo Год назад
Good question, I have not tried it myself but I think it may depend on how up to date Articulate is keeping Storyline 3. Worth a try though.
@CorduroyPaco
@CorduroyPaco 4 месяца назад
Is there a reason why Storyline won't create a Mac version?
@LearningDojo
@LearningDojo 4 месяца назад
Good question. Articulate has talked about it but just never created a Mac version. I wish they would.
@goldeneagle573
@goldeneagle573 Год назад
dont find the snipptet yet
@LearningDojo
@LearningDojo Год назад
You have to expand the description out but it is there and here learningdojo.ninja/blog/greensock-storyline-example-1.html
Далее
Responsive GreenSock Animations in Storyline (kind of)
9:38
Я ВЫЖИЛ ПОСЛЕ УКУСА ЗМЕИ!
22:56
Просмотров 890 тыс.
New Emphasis Animations in Articulate Storyline 360
15:44
Tracking Videos with xAPI: The EASY Way (SERIOUSLY!)
23:19
eLearning Animations Crash Course
21:00
Просмотров 862
Я ВЫЖИЛ ПОСЛЕ УКУСА ЗМЕИ!
22:56
Просмотров 890 тыс.