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!
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.
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.
@@LearningDojo This was also my worry (lost accessibility) but, can the longer description contain spaces between characters? (not a underscore in the gaps?).
@@AndBor1 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.
Hi Jeff! Thanks for the tutorial, I'm slowly diving into the gasp functionalities ;) I came across a problematic situation and maybe you know the answer - I'd like to combine storyline motion path with gsap (for example to scale or rotate during movement). When I apply gsap to the object, the motion paths stops and gsap animation plays. This has probably something to do with pause() method. Do you maybe have a clue how can I combine those two?
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.
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 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 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!
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!
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.
@@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!
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?
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.
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?
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.
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.
@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.
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.
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!
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.
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.
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.
@@LearningDojo This was also my worry (lost accessibility) but, can the longer description contain spaces between characters? (not a underscore in the gaps?).
@@AndBor1 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.
great explanations :)
Glad it was helpful!
It's very helpful to me. Thanks JEFF!
Awesome! Glad you found it useful.
Excellent tutorial and so much value!
Glad it was helpful!
Hi Jeff!
Thanks for the tutorial, I'm slowly diving into the gasp functionalities ;)
I came across a problematic situation and maybe you know the answer - I'd like to combine storyline motion path with gsap (for example to scale or rotate during movement). When I apply gsap to the object, the motion paths stops and gsap animation plays. This has probably something to do with pause() method. Do you maybe have a clue how can I combine those two?
Hmm, I think it creates a conflicting code experience. I usually move the object just with GSAP and not the motion path. I'd have to try both.
Works for desktop but for mobile or iPad or Tablet not so. Great video.
Hmm, it should. I will do some testing.
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.
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.
Hmm, send me your storyline file and I can take a look. jeff@learningdojo.ninja
This is awesome! Thanks!
Glad you like it!
It worked perfectly well! However, when I close the menu during preview, the objects overlap each other.What shoudl I do to prevent it?
Hmm, it might have to do with the responsiveness. I created a video to address this, maybe this will help ua-cam.com/video/5fYJeNYlEKc/v-deo.html
@@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!
@@gokcenurinan8492 Cool, yeah let me know if it still does not work.
@@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!
@@gokcenurinan8492 Yeah not sure if I can figure out a fix right away but I can take a look. jeff@learningdojo.ninja
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!
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.
@@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!
You mention the code snippet being below the video, but I don't see it in the description.
Sorry I will get that added.
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?
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.
@@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!
Hey Jeff, how to increase or decrease the object height and width?
You would use the scale attribute if I am understanding correctly.
Is there a reason why Storyline won't create a Mac version?
Good question. Articulate has talked about it but just never created a Mac version. I wish they would.
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?
Does it have to do with the responsiveness? Try watching this and let me know if it is still an issue ua-cam.com/video/5fYJeNYlEKc/v-deo.html
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.
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.
@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.
Can you please add a tutorial on, ‘How to add carousel in articulate 360 using motion paths and triggers?’
Hmm, might be a challenge but I will look into it!
does GreenSock Animation work in Articulate Storyline 3?
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.
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.
I do address responsive issues here ua-cam.com/video/5fYJeNYlEKc/v-deo.html
Hope that helps!
dont find the snipptet yet
You have to expand the description out but it is there and here learningdojo.ninja/blog/greensock-storyline-example-1.html