Changing/Reversing a Logo based on its Section

[hendrikeng 5 Likes (Newbie)]

Hey there,

 

i am trying to reverse/change the color of a logo based on the section its in.

 

I got it working so far but i am kinda wondering if its the right and most performant approach (i kinda guess it isn't)

I basically   wont to use it on different subpages and the number of sections is  variable.

 

Thanks a lot, much appreciated 

const controllerMobile = new ScrollMagic.Controller();
const innerStart = new TimelineLite();
const innerEnd = new TimelineLite();
const outerStart = new TimelineLite();
const outerEnd = new TimelineLite();
innerStart.to('.js-logo__inner', 0.1, { fill: 'pink' });
innerEnd.to('.js-logo__inner', 0.1, { fill: 'orange' });
outerStart.to('.js-logo__outer', 0.1, { fill: 'orange' });
outerEnd.to('.js-logo__outer', 0.1, { fill: 'pink' });
const changeLogoStartTrigger = document.querySelectorAll('.js-change-logo--start');
const changeLogoEndTrigger = document.querySelectorAll('.js-change-logo--end');
function changeLogoStart() {
  changeLogoStartTrigger.forEach((triggerStart) => {
    const sceneChangeLogoStart = new ScrollMagic.Scene({
      triggerElement: triggerStart,
      reverse: true,
      triggerHook: 0.065,
      offset: 0,
    })
      .setTween(innerStart)
      .setTween(outerStart)
      .addIndicators()
      .addTo(controllerMobile);
  });
};
function changeLogoEnd() {
  changeLogoEndTrigger.forEach((triggerEnd) => {
    const sceneChangeLogoEnd = new ScrollMagic.Scene({
      triggerElement: triggerEnd,
      reverse: true,
      triggerHook: 0.015,
      offset: 0,
    })
      .setTween(innerEnd)
      .setTween(outerEnd)
      .addIndicators()
      .addTo(controllerMobile);
  });
};
changeLogoStart();
changeLogoEnd();

 

See the Pen VWQadz?editors=1011 by HendrikEng (@HendrikEng) on CodePen

[Carl 9,066 Likes (Superhero)]

Sorry, I'm not really familiar with how to get the most out of ScrollMagic. If you have a question that is closely related to the GSAP API, I'll do my best to help. 

[hendrikeng 5 Likes (Newbie)]

Thanks a lot Carl, if figured there is a way more simple way...in case anyone is looking for a similar effect:

 

const changeLogoTrigger = document.querySelectorAll('.js-change-logo');

export function changeLogo() {
changeLogoTrigger.forEach((trigger) => {
const sceneChangeLogo = new ScrollMagic.Scene({
triggerElement: trigger,
reverse: true,
triggerHook: 0.065,
duration: trigger.clientHeight,
})
.on('enter', () => {
TweenMax.fromTo('.c-logo__outer', 1, { fill: '#4dabfc' }, { fill: '#fff' });
TweenMax.fromTo('.c-logo__inner', 1, { fill: '#fff' }, { fill: '#4dabfc' });
})
.on('leave', () => {
TweenMax.fromTo('.c-logo__outer', 1, { fill: '#fff' }, { fill: '#4dabfc' });
TweenMax.fromTo('.c-logo__inner', 1, { fill: '#4dabfc' }, { fill: '#fff' });
})
// .addIndicators()
.addTo(controllerMobile);
});
}