360 spinner doesn't work well on mobile

[deadeyz]

I made a product spinner for our electric Jet Ski landing page for my companies website with Reel, it works perfect on desktop and no errors in the console. When on mobile it's very jumpy and spits out this error

Here's the link to the webpage: https://taigamotors.ca/watercraft/
You have to scroll down to the 3d model spinner section

I'm new to coding but did this all myself, with a little help on the buttons to change color and remain same position.

Please help!

[dev-ahmad]

@deadeyz can you please post your reel code, btw, it's working fine on chrome but on safari you will see some lag when you scroll it , maybe this might help you more
https://www.ajax-zoom.com/index.php?cid=examples

[deadeyz]

@dev-ahmad thanks for helping.

On my Android Chrome browser it's not smooth at all, strange. Here's my code.

----------------------------------- HTML

colors

TAIGA

ORCA

<img src="https://taigamotors.ca/wp-content/uploads/2019/09/white_v2_01.png" id="my_image" width="1920" height="1080"
class="reel"

  data-images="https://taigamotors.ca/wp-content/uploads/2019/09/white_v2_##.png"
  data-loops="true"
  data-frame="1"
  data-frames="23"
  data-throwable="false"
  data-revolution="1600"
  data-responsive="true"
  data-preloader="2"
  data-brake="10"
  data-laziness="12"

<img src="https://taigamotors.ca/wp-content/uploads/2019/09/black_v2_01.png" id="my_image2" class="reel" width="1920" height="1080"

  data-images="https://taigamotors.ca/wp-content/uploads/2019/09/black_v2_##.png"
  data-loops="true"
  data-frame="1"
  data-frames="23"
  data-throwable="false"
  data-revolution="1600"
  data-responsive="true"
  data-preloader="2"
  data-brake="10"  

<img src="https://taigamotors.ca/wp-content/uploads/2019/09/red_v2_01.png" id="my_image3" class="reel" width="1920" height="1080"

  data-images="https://taigamotors.ca/wp-content/uploads/2019/09/red_v2_##.png"
  data-loops="true"
  data-frame="1"
  data-frames="23"
  data-throwable="false"
  data-revolution="1600"
  data-responsive="true"
  data-preloader="2"
  data-brake="10"  

----------------------------------Javascript

<script> // ------------------------------------title 360 ` var controller = new ScrollMagic.Controller(); var scene = new ScrollMagic.Scene({ triggerElement: '#imagebox' }) .setClassToggle('.title' , 'titleshow') .addTo(controller); var scene = new ScrollMagic.Scene({ triggerElement: '#imagebox' }) .setClassToggle('.ORCA' , 'ORCAshow') .addTo(controller); var scene = new ScrollMagic.Scene({ triggerElement: '#imagebox' }) .setClassToggle('.designbutton' , 'designbuttonshow') .addTo(controller); // ------------------------------------SECTION 4 var controller = new ScrollMagic.Controller(); var scene = new ScrollMagic.Scene({ triggerElement: '.orderoverlay' }) .setClassToggle('.orderoverlay' , 'overlaydark2') .addTo(controller); // -----------------------------------SECTION 3 var controller = new ScrollMagic.Controller(); var scene = new ScrollMagic.Scene({ triggerElement: '.scrolltrig4' }) .setClassToggle('.scroll15', 'show') .addTo(controller); var scene = new ScrollMagic.Scene({ triggerElement: '.scrolltrig4' }) .setClassToggle('#scroll11', 'show') .addTo(controller); var scene = new ScrollMagic.Scene({ triggerElement: '.scrolltrig4' }) .setClassToggle('#scroll12', 'show4') .addTo(controller); var scene = new ScrollMagic.Scene({ triggerElement: '.scrolltrig4' }) .setClassToggle('#scroll13', 'show5') .addTo(controller); var scene = new ScrollMagic.Scene({ triggerElement: '.scrolltrig4' }) .setClassToggle('#scroll14', 'show6') .addTo(controller); // ---------------------------------- var controller = new ScrollMagic.Controller(); var scene = new ScrollMagic.Scene({ triggerElement: '.scrolltrig1' }) .setClassToggle('.scroll1', 'show') .addTo(controller); var controller = new ScrollMagic.Controller(); var scene = new ScrollMagic.Scene({ triggerElement: '.scrolltrig3' }) .setClassToggle('.scroll2', 'show') .addTo(controller); var controller = new ScrollMagic.Controller(); var scene = new ScrollMagic.Scene({ triggerElement: '.scrolltrig3' }) .setClassToggle('.scroll3', 'show2') .addTo(controller); var controller = new ScrollMagic.Controller(); var scene = new ScrollMagic.Scene({ triggerElement: '.scrolltrig3' }) .setClassToggle('.scroll4', 'show4') .addTo(controller); var controller = new ScrollMagic.Controller(); var scene = new ScrollMagic.Scene({ triggerElement: '.scrolltrig3' }) .setClassToggle('.scroll5', 'show5') .addTo(controller); var controller = new ScrollMagic.Controller(); var scene = new ScrollMagic.Scene({ triggerElement: '.scrolltrig3' }) .setClassToggle('.scroll6', 'show6') .addTo(controller); // -----------------------------------SECTION 1 <script type="text/javascript"> let currentColor = "white"; jQuery.noConflict(); jQuery(document).ready(function(){ jQuery("#color1").click(function(){ if(currentColor == "green") { jQuery("#my_image").reel("frame", (jQuery("#my_image2").reel('frame')) ); jQuery("#spin1").css("z-index", "5"); jQuery("#spin2").css("z-index", "4"); jQuery("#spin2").css("opacity", 0 ); jQuery("#spin1").css("opacity", 100 ); // COLOR CHANGER jQuery("#imagebox").css("background-color", "#e3e3e3"); jQuery("#ORCA").css("color", "white"); jQuery("#title").css("color", "#444444"); currentColor = "white"; console.log(currentColor); } }); jQuery("#color1").click(function(){ if(currentColor == "yellow") { jQuery("#my_image").reel("frame", (jQuery("#my_image3").reel('frame')) ); jQuery("#spin1").css("z-index", "5"); jQuery("#spin3").css("z-index", "4"); jQuery("#spin3").css("opacity", 0 ); jQuery("#spin1").css("opacity", 100 ); // COLOR CHANGER jQuery("#imagebox").css("background-color", "#e3e3e3"); jQuery("#ORCA").css("color", "white"); jQuery("#title").css("color", "#444444"); currentColor = "white"; console.log(currentColor); } }); // ------------------------------------------------- jQuery("#color2").click(function(){ if(currentColor == "yellow") { jQuery("#my_image2").reel("frame", (jQuery("#my_image3").reel('frame')) ); jQuery("#spin2").css("z-index", "6"); jQuery("#spin3").css("z-index", "4"); jQuery("#spin3").css("opacity", 0 ); jQuery("#spin2").css("opacity", 100 ); // COLOR CHANGER jQuery("#imagebox").css("background-color", "#e3e3e3"); jQuery("#ORCA").css("color", "#444444"); jQuery("#title").css("color", "#444444"); currentColor = "green"; console.log(currentColor); } }); jQuery("#color2").click(function(){ if(currentColor == "white") { jQuery("#my_image2").reel("frame", (jQuery("#my_image").reel('frame')) ); jQuery("#spin2").css("z-index", "6"); jQuery("#spin1").css("z-index", "4"); jQuery("#spin1").css("opacity", 0 ); jQuery("#spin2").css("opacity", 100 ); // COLOR CHANGER jQuery("#imagebox").css("background-color", "#e3e3e3"); jQuery("#ORCA").css("color", "#444444"); jQuery("#title").css("color", "#444444"); currentColor = "green"; console.log(currentColor); } }); // ---------------------------------------------------- jQuery("#color3").click(function(){ if(currentColor == "white") { jQuery("#my_image3").reel("frame", (jQuery("#my_image").reel('frame')) ); jQuery("#spin3").css("z-index", "6"); jQuery("#spin1").css("z-index", "4"); jQuery("#spin1").css("opacity", 0 ); jQuery("#spin3").css("opacity", 100 ); // COLOR CHANGER jQuery("#imagebox").css("background-color", "#e3e3e3"); jQuery("#ORCA").css("color", "#AE3030"); jQuery("#title").css("color", "#444444"); currentColor = "yellow"; console.log(currentColor); } }); jQuery("#color3").click(function(){ if(currentColor == "green") { jQuery("#my_image3").reel("frame", (jQuery("#my_image2").reel('frame')) ); jQuery("#spin3").css("z-index", "6"); jQuery("#spin2").css("z-index", "4"); jQuery("#spin2").css("opacity", 0 ); jQuery("#spin3").css("opacity", 100 ); // COLOR CHANGER jQuery("#imagebox").css("background-color", "#e3e3e3"); jQuery("#ORCA").css("color", "#AE3030"); jQuery("#title").css("color", "#444444"); currentColor = "yellow"; console.log(currentColor); } }); }); </script>

[deadeyz]

@dev-ahmad maybe this is better: https://codepen.io/tristrus/pen/rNNXapX

[dev-ahmad]

@deadeyz First of all sorry for being late, and yes it seems like there's something wrong in your code, but I have 2 examples for you:
the first examples is for this reel library :
https://codepen.io/bdang/pen/bdqgjE
the second one for ajax zoom library:
https://codepen.io/mladenilic/pen/zKOpmg

try them, they are really good for your case and already implemented, good luck :")

[deadeyz]

@dev-ahmad Oh wow! I wish I had that when I started the website! Thanks

[deadeyz]

@deadeyz First of all sorry for being late, and yes it seems like there's something wrong in your code, but I have 2 examples for you:
the first examples is for this reel library :
https://codepen.io/bdang/pen/bdqgjE
the second one for ajax zoom library:
https://codepen.io/mladenilic/pen/zKOpmg

try them, they are really good for your case and already implemented, good luck :")

Anychance you have any ideas of how to fix my existing code?