Forum Discussion
Javascript fails to execute upon the return to the slide
I have simple animation scripts on a slide that are applied to 20 objects.
On Hover script
//Reference the object
var theObject1 = document.querySelectorAll("[data-acc-text='Materiality']");
//Animate in GSAP
gsap.to(theObject1, { scale: 1.05, ease:"bounce.out" });
And return trigger script:
//Reference the object
var theObject1 = document.querySelectorAll("[data-acc-text='Materiality']");
//Animate in GSAP
gsap.to(theObject1, { scale: 1, ease:"bounce.out" });
The first time the timeline starts on a slide, everything works fine. But when I return to the slide again, nothing works, and I see 1000s of errors in the dev console. Objects' states are changing during the scene between the slides.
Warning messages
f | @ | bootstrapper.min.js:29 | |
r | @ | bootstrapper.min.js:29 | |
r.to | @ | bootstrapper.min.js:29 | |
Script21 | @ | user.js:335 | |
ExecuteScript | @ | user.js:66 | |
exeJavaScript | @ | slides.min.js:2 | |
v | @ | bootstrapper.min.js:29 | |
p | @ | bootstrapper.min.js:29 | |
u | @ | bootstrapper.min.js:29 | |
s.trigger | @ | bootstrapper.min.js:29 | |
triggerAction | @ | slides.min.js:2 | |
xe | @ | bootstrapper.min.js:37 | |
Ii | @ | bootstrapper.min.js:37 | |
(anonymous) | @ | bootstrapper.min.js:37 | |
(anonymous) | @ | bootstrapper.min.js:37 | |
(anonymous) | @ | bootstrapper.min.js:37 | |
xe | @ | bootstrapper.min.js:37 | |
(anonymous) | @ | bootstrapper.min.js:37 | |
applyMethod | @ | bootstrapper.min.js:2 | |
executeAction | @ | slides.min.js:2 | |
executeActions | @ | slides.min.js:2 | |
(anonymous) | @ | slides.min.js:2 | |
forEach | @ | slides.min.js:2 | |
executeFilteredPlayerEvent | @ | slides.min.js:2 | |
xe | @ | bootstrapper.min.js:37 | |
e | @ | bootstrapper.min.js:37 | |
triggerEvent | @ | slides.min.js:2 | |
h | @ | slides.min.js:2 |
Error message:
Uncaught TypeError: Failed to execute 'getComputedStyle' on 'Window': parameter 1 is not of type 'Element'.
at fr (bootstrapper.min.js:29:59575)
at lr (bootstrapper.min.js:29:58901)
at i.init (bootstrapper.min.js:29:65037)
at t (bootstrapper.min.js:29:32607)
at z (bootstrapper.min.js:29:4224)
at a.render (bootstrapper.min.js:29:35857)
at s.render (bootstrapper.min.js:29:24454)
at x (bootstrapper.min.js:29:1692)
at a.updateRoot (bootstrapper.min.js:29:29193)
at ze (bootstrapper.min.js:29:14840)
Can someone share any ideas about what is happening?