делай 2 класса. один который добавляется сразу при загрузке страницы, а второй по событию on scroll. первый чтобы менял навигацию без анимации, а второй с анимацией.
ну и во втором ставь условие, что если первый класс уже есть, то при on scroll ничего не делалось.
1) через svg - там собственно так и сделано.
2) если не силен в svg - накладываешь на картинку через absolute блоки, которые крутишь через transform rotate, и иногда используешься transform skew. и просто при ховере их подсвечиваешь.
я не знаю про Garnier - но то что ты описал - фото для этого не нужно. на креме скорее всего есть код. похожий на qr код. он может быть любым. а приложение этот код видит. и когда видит - начинается песня.