Share Posted June 29, 2017 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 More sharing options...
Share Posted June 30, 2017 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. Link to comment Share on other sites More sharing options...
Author Share Posted June 30, 2017 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 More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now