How can I implement ScrollMagic in Boundless theme product page?

Store Design
1

Hi,

I’m using Boundless theme, and was trying to implement and use ScrollMagic on my website to make the product video scrollable on the product pages, but I’m unable to code the JS file to the product video, as the class name of the video section is ‘product__photo–single’ and JS file is throwing a syntax error: unexpected token ‘–’. Since the class names of all pages are stored and managed by the theme, I was not able to change the class name. Any idea on what I can do to fix/implement ScrollMagic?

Thanks.

2

Hi,

I am not familiar with the app but I think you just have to change the

var product__photo--single code

Try this code instead.

var productPhoto = document.querySelector('.product__photo--single');

I think you have to change your triggerElement as well. Not sure why it is written like that but I think it should be like

triggerElement: productPhoto,
3

Works flawlessly..

JS syntax errors aside, the Boundless theme also didn’t support videos to begin with, so ended up changing the theme to something that supports videos.

Thanks for the help @made4Uo !

1 Like