Jump to content
Search Community

Changing/Reversing a Logo based on its Section

hendrikeng test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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

Link to comment
Share on other sites

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);
});
}
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...