Forum Discussion
Storyline360, Animation and GSAP ( Greensock )
Hi,
Trying to figure something out in SL360 i stumbled upon the ds-bootstrap.min.js file thats added to the lib/scripts folder when publishing a Storyline360 file. In that file are GSAP(Greensock...
Hi Math and all,
Having some real problems with GS code. Essentially, I am using the below code to open up more advanced animated sequences but the problem is that sometimes they work, sometimes they don't. The other issue is the moment you re-size the browser, it all just falls apart. Do you have any thoughts please:
//Reference the object
var elderflowerCTA = document.querySelectorAll("[data-acc-text='elderflowerCTA']");
//Animate in GSAP
gsap.set(elderflowerCTA, { scale: 1.05, ease:"bounce.out" });
Really frustrating as when the JS executes, the animations look fantastic but they are just so unreliable.
Hope you can help folks. Cheers.
First of all, its for sure not GS code thats unreliable as its one the best engines there is and they are very helpfull on their own forum. Its probably due to either mistakes in your own code or due to Storyline's own way of interpreting it.
The resizing browser issue is due to the Modern Storyline player that scales up everything. You can fix that by calculating positions and animations. Quite some approaches for that allover the forum. The Classic player doesnot have that issue.
Do share a sample, as finding errors without it is just guessing.
One guess is the use of querySelectorAll when in fact selecting just a single element. querySelector is better in that case. Another one is using a 'bounce' ease when you use gsap.set... any ease needs time to execute properly. So gsap.to is better in this case.
Kind regards,
Math
