Responsive GreenSock Animations in Storyline (kind of)
Вставка
- Опубліковано 7 лют 2025
- Articulate Storyline 360 is not responsive, BUT it does scale down and up depending on the screen size of your learner's device. In previous Greensock animation videos, I showed you how to add more advanced animations inside Storyline. However, it did not scale down to the new size in Storyline if the user resized the browser.
In this week's video, I show you how to fix that and ensure your advanced animations look good on any screen size. I am still learning all the ins and outs of Greensock and Storyline, so you should expect to see more and more videos and refined videos as I learn more.
🥷 Link to Full Courses
Articulate Storyline 360: courses.learni...
Storyline & JavaScript: courses.learni...
Adobe Captivate: www.udemy.com/...
xAPI Fundamentals: courses.learni...
Camtasia: www.udemy.com/...
Articulate Rise 360: courses.learni...
If you would like learn more visit learningdojo.n...
Placing the gsap animated object(s) into a Storyline scrolling panel fixed the Storyline/gsap positioning instabilities. It worked with multiple objects in multiple scrolling panels. Scaling and/or rotating animations with various easements... all worked correctly -- and the animations did not shift when I resized the browser window... even while it was animating. Without the scrolling panel, they shifted. I'm not sure how it would work in more complicated animations.
Yeah this video is more of an exploration for sure, I have not found a perfect way for movement especially if the user resizes the browser. But yeah rotation and scaling work perfect.
Just what I needed, thank you!
Happy to help!
it dose not work. i use VW but still animate in different place when i run it in mobile. any other solution? please ... i spent lots of time on my project...
Can you send me your project file? jeff@learningdojo.ninja
nice video. How do you reference a group with Javascript?
I haven’t tried that myself honestly. I can see if I can add it to my backlog to play around with.
Thanks :)
No problem!
I did this and it still isn't responding when I change screen sizes... Not sure what I am doing wrong here.
Are you talking about changing position or still staying in the same frame? Is this animating the X,Y value? Or you animating something else?
@@LearningDojo I am trying to move a box it worked fine as I was previewing but as soon as I changed screen sizes it went all wacky and I used the VW but it didn’t have an effect.
Could you reference the position of another object as your x or y?
Hmm, not sure if you can read the position of another object from within Storyline. There is probably a way but have not explored that yet.
Why not use percentage instead?
I tried percentage, it didn’t perform like I was expecting. Not sure why, after looking at GreenSocks documentation they recommended vh or vw. Need to dive more into the why that is but just seemed to work better
@@LearningDojo see if the article in the answer is able to help you in any way.