У меня есть логотип в заголовке и при прокрутке вниз, я хотел бы инвертировать цвета. Я использую скроллмагию. Я уже настроил изображение с обратной версией.
Вот что у меня сейчас:
var logo = $('header.banner .brand img'),
logo_org = $('header.banner .brand img').data('original'),
logo_alt = $('header.banner .brand img').data('reverse');
var brandLogo = TweenMax.fromTo("header.banner .brand img", 0.15,
{onUpdate: function() { $(logo).attr("src", logo_org); }},
{onUpdate: function() { $(logo).attr("src", logo_alt); }, ease: Linear.easeNone});
// image src switcher
new ScrollMagic.Scene({
triggerElement: ".section-1",
triggerHook: 0.5
})
.setTween(brandLogo)
.addTo(controller);
.section-1 появляется, и остальные анимации заголовка начинаются, но логотип изменился на обратную версию в момент загрузки страницы.
Если я добавлю:
duration: "100%"
это не имеет никакого эффекта, анимация по-прежнему срабатывает немедленно. Я пробовал разные спусковые крючки, разные задержки и т. Д., Но безрезультатно. Что, черт возьми, мне не хватает? Извиняюсь, если это что-то до боли очевидное, но я только что начал баловаться со scrollmagic и gsap.