###解決したいこと
現在下記の様なスクロールアニメーションを作成しています。
アニメーションをclass構文を作って、各スクロールの位置に来たら発火させる様に作ったつもりなのですが、
1回目(sectionA)でProductMaskを発火させると、後の(sectionB)以降のsvgアニメーションが動いてしまいます。
スクロールアニメーションの"sectionA"、"sectionB"の位置に来た時に、内包しているsectionのsvgを発火させたいです。
解決方法をご存知の方いらっしゃいましたらご教示頂けると幸いです。
よろしくお願い致します。
javascript
1//このアニメーションを複数回呼び出したいです 2class ProductMask { 3 constructor(swing) { 4 const elements = document.querySelectorAll("svg[clip-path]"); 5 for(let i = 0, len = elements.length; i < len; i++){ 6 const element = elements[i]; 7 const maskId = element.getAttribute("clip-path").match(/url((#.+))/)[1]; 8 const maskPolygon = Snap(`${maskId}>polygon`); 9 maskPolygon.animate({points: maskPolygon.attr("to")}, swing); 10 } 11 } 12} 13 14class TitleAnim { 15 constructor() { 16 const elements = document.querySelectorAll(".eg_holizon g:not(.is-anim)"); 17 for(let i = 0, len = elements.length; i < len; i++){ 18 const element = elements[i]; 19 element.classList.add("is-anim"); 20 } 21 } 22} 23 24//スクロール 25function scrollProducts() { 26 const controller = new ScrollMagic.Controller(); 27 28 //sectionA 29 const elementsBlock = document.querySelectorAll('.story-wrapper:not(.is-anim)'); 30 for(let i = 0, len = elementsBlock.length; i < len; i++) { 31 const element = elementsBlock[i]; 32 new ScrollMagic.Scene({ 33 triggerElement: element, 34 triggerHook: "onEnter", 35 reverse: false, 36 offset: 400 37 }).on('start', function() { 38 new TitleAnim(); 39 setTimeout(function(){ 40 var maskAnim = new ProductMask(300); 41 }, 600); 42 }).on("end", () => scene.destroy(true)).addTo(controller); 43 } 44 //sectionB 45 const elementsProduct = document.querySelectorAll('.label_anim'); 46 for(let i = 0, len = elementsProduct.length; i < len; i++) { 47 const element = elementsProduct[i]; 48 new ScrollMagic.Scene({ 49 triggerElement: element, 50 triggerHook: "onEnter", 51 reverse: false, 52 offset: 400 53 }).on('start', function() { 54 setTimeout(function(){ 55 var featureAnim = new ProductMask(800); 56 }, 2500); 57 }).on("end", () => scene.destroy(true)).addTo(controller); 58 } 59} 60scrollProducts(); 61
回答1件
あなたの回答
tips
プレビュー