@thibaultlerailler Great! I forgot about this one…
Can you summarize the answer so people with same issues can see the final answer easily?
SOLVED!
Combining this video from @md60th and the codes below should help everybody looking to create a color change on header elements when scrolling.
Here is the final codes that we used to create our header animations:
const menuItems = {
color : {
black : ‘#000000’ ,
white : ‘#ffffff’ ,
pink : ‘#ff00de’
},
setItemsColor : ( color ) => {
return {
logo : <svg preserveAspectRatio="xMidYMid meet" data-bbox="30.62 46.55 401.273 61.6" viewBox="30.62 46.55 401.273 61.6" xmlns="http://www.w3.org/2000/svg" data-type="shape" role="img" aria-labelledby="svgcid-e4bq10-81csh4"><title id="svgcid-e4bq10-81csh4"></title> <g> <path fill=" ${ color } " d="M62.35 57.18a18 18 0 0 1 7 7 20.8 20.8 0 0 1 2.55 10.41 21 21 0 0 1-2.55 10.46 17.87 17.87 0 0 1-7 7 20.69 20.69 0 0 1-10.17 2.47q-7.86 0-12.45-5.24v18.87h-9.11v-53h8.67v5.1a14.06 14.06 0 0 1 5.57-4.15 18.87 18.87 0 0 1 7.32-1.38 20.69 20.69 0 0 1 10.17 2.46zm-2.92 26.23a12.14 12.14 0 0 0 3.24-8.82 12.13 12.13 0 0 0-3.24-8.81 11 11 0 0 0-8.27-3.35 11.78 11.78 0 0 0-5.9 1.49 10.84 10.84 0 0 0-4.15 4.26 14.21 14.21 0 0 0 0 12.83 10.84 10.84 0 0 0 4.15 4.26 11.78 11.78 0 0 0 5.9 1.49 11 11 0 0 0 8.27-3.35z"></path> <path fill=" ${ color } " d="M118.26 55.14v38.91h-8.67v-5a14.53 14.53 0 0 1-5.47 4 17.66 17.66 0 0 1-7.06 1.41q-7.8 0-12.28-4.33T80.3 77.36V55.14h9.11v21q0 5.25 2.37 7.84a8.67 8.67 0 0 0 6.74 2.58 10.2 10.2 0 0 0 7.75-3q2.88-3 2.88-8.71V55.14z"></path> <path fill=" ${ color } " d="M164.08 59q4.44 4.3 4.45 12.75v22.3h-9.11V72.92q0-5.1-2.41-7.69a8.88 8.88 0 0 0-6.84-2.58 10.53 10.53 0 0 0-7.94 3q-2.92 3-2.92 8.71v19.69h-9.1V55.14h8.66v5a14.19 14.19 0 0 1 5.69-4.08 20.47 20.47 0 0 1 7.72-1.38q7.35.03 11.8 4.32z"></path> <path fill=" ${ color } " d="M187.46 92a18.75 18.75 0 0 1-7.46-7.1 21 21 0 0 1 0-20.58 18.89 18.89 0 0 1 7.47-7.06 22.74 22.74 0 0 1 10.89-2.55A20.91 20.91 0 0 1 208.41 57a15.13 15.13 0 0 1 6.52 6.7l-7 4.08a11.15 11.15 0 0 0-4.19-4 12.22 12.22 0 0 0-13.95 2 11.87 11.87 0 0 0-3.36 8.85 12 12 0 0 0 3.32 8.86 12.29 12.29 0 0 0 14 2 11.15 11.15 0 0 0 4.19-4l7 4.08a15.87 15.87 0 0 1-6.59 6.74 20.55 20.55 0 0 1-10 2.36A22.84 22.84 0 0 1 187.46 92z"></path> <path fill=" ${ color } " d="M246.69 91.93a10.7 10.7 0 0 1-3.9 2 17.41 17.41 0 0 1-4.84.65q-6.42 0-9.91-3.35t-3.5-9.76V62.72h-6.41v-7.29h6.41v-8.88h9.11v8.88h10.42v7.29h-10.42v18.5a6.18 6.18 0 0 0 1.35 4.34 5.23 5.23 0 0 0 4 1.49 8 8 0 0 0 5.1-1.6z"></path> <path fill=" ${ color } " d="M291.86 55.14v38.91h-8.67v-5a14.53 14.53 0 0 1-5.47 4 17.66 17.66 0 0 1-7.06 1.41q-7.8 0-12.28-4.33t-4.48-12.77V55.14h9.1v21q0 5.25 2.37 7.84a8.66 8.66 0 0 0 6.73 2.58 10.22 10.22 0 0 0 7.76-3q2.88-3 2.88-8.71V55.14z"></path> <path fill=" ${ color } " d="M331.82 58.82q4.55 4.13 4.55 12.42v22.81h-8.6v-4.74a10.64 10.64 0 0 1-4.77 3.9 18.61 18.61 0 0 1-7.47 1.34 18.26 18.26 0 0 1-7.65-1.49 11.82 11.82 0 0 1-5.06-4.15 10.54 10.54 0 0 1-1.78-6 10.31 10.31 0 0 1 3.89-8.42q3.9-3.17 12.28-3.16h10.05v-.59a8 8 0 0 0-2.44-6.26c-1.63-1.46-4-2.19-7.25-2.19a20.89 20.89 0 0 0-6.44 1 15.9 15.9 0 0 0-5.36 2.84l-3.57-6.63a22.24 22.24 0 0 1 7.36-3.57 32.92 32.92 0 0 1 9.11-1.23q8.6.01 13.15 4.12zm-8.31 27.54a8.53 8.53 0 0 0 3.75-4.48v-4.52h-9.39q-7.87 0-7.87 5.17a4.64 4.64 0 0 0 2 3.94 9.07 9.07 0 0 0 5.47 1.46 11.79 11.79 0 0 0 6.04-1.57z"></path> <path fill=" ${ color } " d="M371.41 91.93a10.7 10.7 0 0 1-3.9 2 17.41 17.41 0 0 1-4.84.65q-6.42 0-9.91-3.35t-3.5-9.76V62.72h-6.41v-7.29h6.41v-8.88h9.11v8.88h10.42v7.29h-10.42v18.5a6.18 6.18 0 0 0 1.38 4.34 5.21 5.21 0 0 0 4 1.49 8 8 0 0 0 5.1-1.6z"></path> <path fill=" ${ color } " d="M414 77.51h-30.5a10.62 10.62 0 0 0 4.19 6.81 13.7 13.7 0 0 0 8.42 2.51 14.16 14.16 0 0 0 10.56-4.22l4.88 5.61a16.36 16.36 0 0 1-6.63 4.78 26.35 26.35 0 0 1-20.33-1 18.33 18.33 0 0 1-7.53-7.11 20 20 0 0 1-2.66-10.31 20.38 20.38 0 0 1 2.6-10.22 18.36 18.36 0 0 1 7.18-7.1 20.94 20.94 0 0 1 10.34-2.55 20.33 20.33 0 0 1 10.16 2.51 17.77 17.77 0 0 1 7 7.07 21.45 21.45 0 0 1 2.51 10.52c-.02.63-.07 1.53-.19 2.7zm-26.89-12.93a10.87 10.87 0 0 0-3.68 6.88h22.07a10.77 10.77 0 0 0-3.57-6.85 11.84 11.84 0 0 0-14.82 0z"></path> <path fill=" ${ color } " d="M421.6 92.84a6.07 6.07 0 1 1 4.23 1.71 5.82 5.82 0 0 1-4.23-1.71z"></path> </g> </svg> ,
hamburgerMenu : <svg preserveAspectRatio="xMidYMid meet" data-bbox="33.5 63.7 133.5 67.1" viewBox="33.5 63.7 133.5 67.1" height="200" width="200" xmlns="http://www.w3.org/2000/svg" data-type="color" role="img" aria-labelledby="svgcid--cx9lrf-ayl1mk"><defs><style>#comp-klkbrlyy2_r_comp-k9wga0tn svg [data-color="1"] {fill: color;}</style></defs><title id="svgcid--cx9lrf-ayl1mk">Open site navigation</title> <g> <path fill=" ${ color } " d="M166.3 63.7v5H33.5v-5h132.8z" data-color="1"></path> <path fill=" ${ color } " d="M167 94.4v5H34.2v-5H167z" data-color="1"></path> <path fill=" ${ color } " d="M167 125.8v5h-60v-5h60z" data-color="1"></path> </g> </svg> ,
}
$w . onReady ( function () {
});
export function section5_viewportEnter ( event ) {
animateMenuElements ( menuItems . color . white )
}
export function section5_viewportLeave ( event ) {
animateMenuElements ( menuItems . color . black )
}
asyncfunction animateMenuElements ( color ){ $w ( ’ #logo ’ ). src = menuItems . setItemsColor ( color ). logo ; $w ( ’ #hamburgerMenu ’ ). src = menuItems . setItemsColor ( color ). hamburgerMenu ;
}
Hello @md60th , i have a little answer. I thank you in advance for your help.
I try to do the same on my website but it doesn’t work, i check and repeat that 3 time. It still doesn’t work.
Here is my code,
const menuItems = {
color : {
black : ‘#000000’ ,
white : ‘#ffffff’ ,
},
setItemsColor : ( color ) => {
return <svg preserveAspectRatio="xMidYMid meet" data-bbox="0.5 0 113.59 44" xmlns="http://www.w3.org/2000/svg" viewBox="0.5 0 113.59 44" height="44" width="115" data-type="color" role="img" aria-labelledby="svgcid-nbheqmtc6fzq"><defs><style>#comp-krg6wim4 svg [data-color="1"] {fill: ${ color } ;}</style></defs><title id="svgcid-nbheqmtc6fzq">Homepage</title> <g> <path d="M44.5 0v44H.5V0h44zm32.15 15.6c1.268 0 2.37.273 3.31.82.94.547 1.664 1.333 2.17 2.36.508 1.027.76 2.233.76 3.62s-.252 2.593-.76 3.62c-.506 1.027-1.23 1.813-2.17 2.36-.94.547-2.042.82-3.31.82-1.266 0-2.366-.273-3.3-.82-.932-.547-1.652-1.333-2.16-2.36-.506-1.027-.76-2.233-.76-3.62s.254-2.593.76-3.62c.508-1.027 1.228-1.813 2.16-2.36.934-.547 2.034-.82 3.3-.82zm15.87 0c1.36 0 2.48.253 3.36.76.88.507 1.573 1.293 2.08 2.36l-1.96.94-.09-.234a3.001 3.001 0 00-1.19-1.406c-.6-.373-1.32-.56-2.16-.56-1.253 0-2.247.433-2.98 1.3-.733.867-1.1 2.08-1.1 3.64 0 1.587.35 2.81 1.05 3.67.7.86 1.723 1.29 3.07 1.29 1.053 0 1.907-.26 2.56-.78s.98-1.273.98-2.26v-.38H92.1v-1.76h5.94V29h-1.58l-.06-1.68-.134.195A3.856 3.856 0 0194.8 28.71c-.68.327-1.493.49-2.44.49-1.227 0-2.3-.273-3.22-.82-.92-.547-1.633-1.33-2.14-2.35-.507-1.02-.76-2.23-.76-3.63 0-1.387.26-2.59.78-3.61s1.253-1.807 2.2-2.36c.947-.553 2.047-.83 3.3-.83zm15.33 0c1.266 0 2.37.273 3.31.82.94.547 1.662 1.333 2.17 2.36.506 1.027.76 2.233.76 3.62s-.254 2.593-.76 3.62c-.508 1.027-1.23 1.813-2.17 2.36-.94.547-2.044.82-3.31.82-1.268 0-2.368-.273-3.3-.82-.934-.547-1.654-1.333-2.16-2.36-.508-1.027-.76-2.233-.76-3.62s.252-2.593.76-3.62c.506-1.027 1.226-1.813 2.16-2.36.932-.547 2.032-.82 3.3-.82zm-85.582-1.12h-3.784V29H29.55v-2.926h-7.282V14.48zm38.614 1.32v11.36h7.28V29h-9.42V15.8h2.14zm15.769 1.66c-1.24 0-2.213.433-2.92 1.3-.707.867-1.06 2.08-1.06 3.64s.353 2.773 1.06 3.64c.707.867 1.68 1.3 2.92 1.3 1.253 0 2.233-.433 2.94-1.3.707-.867 1.06-2.08 1.06-3.64s-.353-2.773-1.06-3.64c-.707-.867-1.687-1.3-2.94-1.3zm31.198 0c-1.24 0-2.213.433-2.92 1.3-.707.867-1.06 2.08-1.06 3.64s.353 2.773 1.06 3.64c.707.867 1.68 1.3 2.92 1.3 1.253 0 2.233-.433 2.94-1.3.707-.867 1.06-2.08 1.06-3.64s-.353-2.773-1.06-3.64c-.707-.867-1.687-1.3-2.94-1.3z" fill="#C7C7C7" fill-rule="evenodd" data-color="1"></path> </g> </svg>
}
}
});
export function section2_viewportLeave ( event ) {
$w ( ‘#vectorImage1’ ). src = menuItems . setItemsColor ( menuItems . color . black );
}
Can you help me ?
Thank you so much.
@md60th How would one do this using an SVG that has two colors, where both colors change?
Hello,
This tutorial is really interesting. I tried it but it doesn’t work. I think the issue is from the svg vector.
This is my code. #vectorlogo is the svg and sectionCALENDRIER is the section i want to change the color
Thank you for your help 
const menuItems = {
color : {
black : ‘#413a38’ ,
white : ‘#ebe0d5’
},
setItemsColor : ( colors ) => {
return {
vectorlogo : '
< g >
< path fill = “${color}” d = “M55.02 106.27C22.62 106.27 0 84.42 0 53.14c0-15.47 5.29-28.74 15.29-38.4C25.29 5.1 39.02 0 55.02 0c28.28 0 46.62 14.89 50.31 40.85l.08.57H79.2l-.11-.35C75.6 29.85 67.28 23.92 55.01 23.92c-16.05 0-27.7 12.29-27.7 29.23s11.65 29.23 27.7 29.23c12.25 0 20.58-6.01 24.08-17.39l.11-.35h26.21l-.08.57c-3.7 26.11-22.04 41.08-50.31 41.08ZM55.02 1C39.29 1 25.8 6 15.99 15.46 6.18 24.92 1 37.95 1 53.14S6.18 81.3 15.99 90.77c9.82 9.49 23.31 14.5 39.03 14.5 37.48 0 46.96-24.57 49.24-39.65H79.94c-3.71 11.61-12.32 17.74-24.92 17.74-16.63 0-28.7-12.71-28.7-30.23S38.39 22.9 55.02 22.9c12.62 0 21.23 6.05 24.92 17.51h24.32C101.98 25.42 92.5 1 55.02 1Z”></ path >
< path fill = “${color}” d = “M215.54 102.98h-28.45l-5.52-15.39h-45.82l-5.52 15.39h-28.45l37.96-99.69h37.82l37.98 99.69Zm-27.75-1h26.3L176.87 4.29h-36.44l-37.22 97.69h26.3l5.52-15.39h47.23l5.52 15.39Zm-12.21-34.25h-33.85l14.22-39.54h5.52l14.1 39.54Zm-32.43-1h31.01l-13.39-37.54h-4.11l-13.5 37.54Z”></ path >
< path fill = “${color}” d = “M303.2 102.98h-83.01V3.29h27.55v76.49h55.46v23.21Zm-82.01-1h81.01V80.77h-55.46V4.29h-25.55v97.69Z”></ path >
< path fill = “${color}” d = “M823.91 115.68h-1.03c-1.12 0-2.15.42-3.08 1.25-2.15 1.95-6.33 4.41-12.56 7.36-6.22 2.96-13.12 5.77-20.69 8.46-11.13 3.96-19.48 5.93-25.05 5.93-4.05 0-6.18-.9-6.37-2.71l-.07-.88c0-1.71.59-3.74 1.76-6.08 2.93.49 5.61.73 8.06.73 4.74 0 8.59-.88 11.57-2.64 3.37-1.85 5.79-4.15 7.25-6.88 1.46-2.73 2.2-5.44 2.2-8.13 0-2.2-.4-4.14-1.18-5.83 18.47-.12 31.77-4.07 39.49-11.77 5.13-5.11 7.73-11.83 7.73-19.97 0-23.38-21.17-27.01-39.84-30.22-1.37-.23-2.72-.47-4.04-.7l-10.7-1.88c-8.42-1.4-12.51-4.58-12.51-9.73 0-6.48 6.63-10.19 18.18-10.19 12.66 0 19.85 4.41 21.36 13.1l.07.41h24.65v-.5C829.11 11.39 814.19 0 783.49 0c-28.69 0-45.15 11.23-45.15 30.81 0 23.86 21.66 27.52 39.07 30.45l12.34 2.12c10.41 1.66 14.85 4.75 14.85 10.32 0 2.16-.81 4.07-2.42 5.66-3.31 3.28-9.62 5.01-18.27 5.01h-.54c-14.2 0-22.04-4.59-22.65-13.28l-.03-.46h-24.93v.49c-.15 10.02 2.6 17.96 8.17 23.62 4.95 5.03 12.12 8.37 21.67 10.11-.71.51-1.43 1.05-2.17 1.65-4.81 3.93-8.97 8.66-12.49 14.17-2.2 3.42-3.67 6.71-4.44 9.88-4.31 4.24-7.58 7.12-11.43 10.5-10.53 9.26-17.72 12.73-20.17 12.73-.54 0-.82-.51-.84-1.54-.03-1.03-.04-1.71-.04-2.05 0-6.64 1.44-15.99 4.32-28.05 1.95-8.45 2.93-14.28 2.93-17.5 0-2.68-.56-4.7-1.68-6.04-.22-.27-.45-.5-.69-.71 1.51-1.03 2.89-2.15 4.12-3.38 5.13-5.11 7.73-11.83 7.73-19.97 0-23.38-21.17-27.01-39.84-30.22-1.37-.23-2.72-.47-4.04-.7l-10.7-1.88c-8.42-1.4-12.51-4.58-12.51-9.73 0-6.48 6.63-10.19 18.18-10.19 12.66 0 19.85 4.41 21.36 13.1l.07.41h24.65v-.5C727.92 11.41 713 .02 682.3.02c-28.69 0-45.15 11.23-45.15 30.81 0 23.86 21.66 27.52 39.07 30.45l12.34 2.12c10.41 1.66 14.85 4.75 14.85 10.32 0 2.16-.81 4.07-2.42 5.66-3.38 3.35-9.85 5.1-18.82 5-14.2 0-22.04-4.59-22.65-13.28l-.03-.46h-24.93v.49c-.15 10.02 2.6 17.96 8.17 23.62 7.66 7.77 20.55 11.54 39.43 11.54h.5c9.07 0 16.9-.92 23.47-2.73-2.11 2.42-4.73 5.56-7.89 9.43l-.66.73c-9.52 11.57-15.58 18.8-18.16 21.68 1.32-7.52 3.42-14.23 6.3-20.14.29-.63.44-1.29.44-1.98 0-1.9-.88-3.3-2.64-4.17-.68-.29-1.34-.44-1.98-.44-1.86 0-3.25.88-4.17 2.64-.82 1.73-1.57 3.54-2.28 5.38-.17.13-.34.25-.5.41-5.13 5.18-11.55 9.38-19.26 12.6-8.5 3.52-16.36 5.27-23.58 5.27-6.54 0-10.21-1.54-10.99-4.61-.15-.49-.22-1.05-.22-1.68 0-3.32 2.25-8.25 6.74-14.79.54-.83.81-1.68.81-2.56 0-1.56-.63-2.83-1.9-3.81-.83-.59-1.73-.88-2.71-.88-1.56 0-2.78.66-3.66 1.98-3.61 5.08-5.92 9.24-6.92 12.49-.39 1.28-.69 2.44-.93 3.54-6.75 1.11-14.04 3.5-21.89 7.19-8.67 4.08-23.44 13.96-28.52 17.43 1.39-12.76 4.28-28.18 8.67-46.25h58.63v-1.12c.76.51 1.55.78 2.38.78 1.51 0 2.76-.63 3.74-1.9.78-1.03 1.51-2 2.2-2.93.68-.93 1.03-1.9 1.03-2.93 0-1.37-.63-2.56-1.9-3.59-.88-.63-1.83-.95-2.86-.95-1.37 0-2.56.64-3.59 1.9l-.99 1.34V80.51h-52.71c1.76-6.23 3.53-12.12 5.31-17.68h45.28V43.38h-38.48c1.52-3.95 3.04-7.68 4.57-11.17.29-.63.44-1.29.44-1.98 0-1.85-.9-3.22-2.71-4.1-.31-.14-.61-.25-.92-.32h39.21V3.29H542.8v60.76c-2.16 4.39-4.24 9.03-6.23 13.95-.75.03-1.47.05-2.18.08V3.29h-26.85v62.04h-1.58L464.53 3.29H433.1v99.69h26.85V40.94h1.7l41.91 61.82.15.22h23.78c-.36 1.12-.72 2.23-1.06 3.36-1.33 4.28-2.32 7.45-3.11 10.09-1.44.14-2.97.21-4.59.21-5.81 0-14.79-1.03-26.95-3.08-2.59-.49-4.88-.83-6.88-1.03 0-1.37-.49-2.44-1.46-3.22-.98-.78-2.03-1.17-3.15-1.17h-.37c-4.3.54-7.96 2.31-10.99 5.31-3.03 3-5.25 6.48-6.67 10.44-1.12 3.17-1.68 6.2-1.68 9.08 0 1.07.1 2.1.27 3.09-.13.08-.26.18-.39.26-3.99 2.44-7.36 3.9-10.1 4.36-1.25.21-2.46.27-3.61.17-6.64-.6-12.62-5.3-17.94-14.1-2.4-3.9-4.3-7.36-5.71-10.39l-.1-.13c-1.25-2.66-2.34-4.58-3.29-5.75-2.13-2.31-4.32-3.27-6.59-2.89-3.71.63-7.54 4.73-11.5 12.29-2.36 4.46-4.6 9.31-6.73 14.52 1.18-6.44 2.68-13.16 4.51-20.16 1.03-3.85 2.07-7.59 3.12-11.25h22.18V3.29h-34.58L368.5 68.15h-1.28L345.6 3.29h-34.58v99.69h26.38V48.82h1.38l18.56 54.16h21.04l18.56-54.16h1.38v36.66a481.25 481.25 0 0 0-4.07 13.15c-12.15 34.4-30.37 37.47-35.67 37.6-.22-.03-.45-.07-.68-.07H4.76c-2.49 0-4.5 2.01-4.5 4.5s2.01 4.5 4.5 4.5h351.73c.38.03.9.06 1.56.06 4.79 0 16.52-1.45 28.03-14-2.37 12.7-2.94 22.7-1.69 30.01.56 3.27 2.33 4.65 5.31 4.14l.29-.05c1.47-.4 2.79-1.78 3.97-4.13 1.18-2.36 2.47-5.39 3.87-9.09 6.57-17.81 11.83-29.17 15.8-34.06l1.15 2.4c1.62 3.39 3.78 7.29 6.5 11.71 2.71 4.42 6.1 8.38 10.17 11.9 6.2 5.28 12.89 7.31 20.06 6.08 3.27-.56 6.74-1.85 10.41-3.86 1.19-.64 2.41-1.39 3.65-2.24 1.64 1.07 3.68 1.68 6.12 1.83 3.47-.1 6.67-1.56 9.59-4.39 4.93-4.93 7.49-10.64 7.69-17.14 0-.73-.03-1.44-.07-2.12.39.2.88.32 1.46.37 5.86 1.08 11.39 1.88 16.59 2.42 5.2.54 9.07.81 11.61.81.75 0 1.47-.01 2.16-.03-.78 3.2-1.59 6.89-2.86 12.79-3.37 15.55-3.32 14.67-4.69 25.37v.59c0 1.03.29 1.95.88 2.78.88 1.17 2.12 1.76 3.74 1.76.98 0 1.88-.29 2.71-.88.98-.78 1.56-1.81 1.76-3.08 1.37-10.4 1.28-9.24 4.58-24.52s3.29-15.18 8.37-31.44c2.37-7.55 4.91-14.89 7.62-22.01V103h18.03c-5.94 24.54-8.93 42.82-8.93 54.82.05 3.08 1.56 4.61 4.54 4.61h.15c1.76-.19 5-1.98 9.74-5.35 27.46-17.2 33.76-21.2 45.9-23.21 1.37 3.77 4.01 6.5 7.96 8.19 3.37 1.42 7.28 2.12 11.72 2.12h1.68c8.01-.39 16.47-2.44 25.38-6.15 4.26-1.78 8.18-3.82 11.77-6.12-.57 2.85-1.04 5.79-1.41 8.83l-.07 1.68c0 3.71 1.66 5.74 4.98 6.08h.22c3.61 0 10.06-5.32 19.34-15.97 5.91-6.74 11.72-13.7 17.43-20.87v.15c-3.12 13.14-5.18 23.85-6.15 32.15-.15 1.56-.22 3.05-.22 4.47 0 3.37.44 6.28 1.32 8.72 1.27 3.42 3.86 5.37 7.76 5.86h.29c4.3 0 12.12-4.39 24.68-14.35 3.77-3.01 4.72-4.05 8.39-7.21 1.7 3.03 4.93 5.07 9.7 6.11 1.17.2 2.46.29 3.88.29 2.98 0 6.45-.41 10.4-1.25 5.76-1.17 11.84-2.88 18.24-5.13 8.15-2.88 15.65-6.01 22.49-9.38 10.35-5.03 15.53-8.64 15.53-10.84v-1.1c0-1.12-.44-2.15-1.32-3.08-.88-.93-1.66-1.39-2.34-1.39Zm-79.25-21.66c-5.37-5.44-7.95-12.78-7.9-22.41h23.01c.64 6.38 5.34 13.75 23.6 13.75 9.22.1 15.96-1.75 19.53-5.29 1.8-1.79 2.71-3.93 2.71-6.37 0-6.17-4.69-9.55-15.69-11.3l-12.34-2.12c-20.92-3.53-38.24-8.18-38.24-29.47C739.34 11.86 755.43 1 783.49 1c29.8 0 44.4 10.9 44.62 33.31h-22.82C803.09 23.16 792 20.8 783.02 20.8c-12.19 0-19.18 4.08-19.18 11.19 0 5.63 4.49 9.24 13.34 10.71l10.69 1.88c1.33.24 2.68.47 4.05.71 18.28 3.14 39.01 6.7 39.01 29.23 0 7.87-2.5 14.35-7.43 19.27-7.61 7.58-20.83 11.44-39.31 11.48-.53-.91-1.18-1.74-1.96-2.48-1.71-1.46-3.66-2.2-5.86-2.2-2.9 0-6.1 1.15-9.59 3.44-9.83-1.65-17.14-4.96-22.12-10.01Zm28.78 16.46c1.07-.63 1.83-.95 2.27-.95.59 0 .93.76 1.03 2.27 0 3.08-1.51 5.47-4.54 7.18-1.95 1.08-4.57 1.61-7.84 1.61l-1.98-.07c3.52-4.3 7.2-7.64 11.06-10.03Zm-90.72-5.21h-.5c-18.6 0-31.26-3.68-38.72-11.25-5.37-5.44-7.95-12.78-7.9-22.41h23.01c.64 6.38 5.34 13.75 23.6 13.75 9.22.1 15.96-1.75 19.53-5.29 1.8-1.79 2.71-3.93 2.71-6.37 0-6.17-4.69-9.55-15.69-11.3l-12.34-2.12c-20.92-3.53-38.24-8.18-38.24-29.47C638.18 11.86 654.27 1 682.33 1c29.8 0 44.4 10.9 44.62 33.31h-22.82c-2.2-11.15-13.29-13.51-22.27-13.51-12.19 0-19.18 4.08-19.18 11.19 0 5.63 4.49 9.24 13.34 10.71l10.69 1.88c1.33.24 2.68.47 4.05.71 18.28 3.14 39.01 6.7 39.01 29.23 0 7.87-2.5 14.35-7.43 19.27-1.26 1.25-2.69 2.4-4.25 3.45-.71-.44-1.47-.67-2.28-.67-1.76 0-3.74.98-5.93 2.93-.68.7-1.51 1.59-2.45 2.65-6.77 2.07-15.01 3.13-24.7 3.13Zm-279.92-3.29c.44-1.53.89-3.04 1.33-4.54.16-.52.33-1.03.49-1.56h-.02c2.65-8.79 5.36-17 8.14-24.62 4.64-12.7 7.91-20.3 9.19-22.45.87-1.63 1.46-2.9 1.75-3.79v56.95h-20.89Zm-6.58-54.16-18.56 54.16h-19.61l-18.56-54.16h-3.09v54.16h-24.38V4.29h32.86l21.62 64.86h2.72l21.62-64.86h32.86v37.53c-.22-.59-.55-1.13-1.01-1.61-.95-.93-2.18-1.6-4.21-1.42-.88.08-1.6.48-2.34 1.35-1.85 2.2-6 12.79-11.17 26.4-1.93 5.08-3.81 10.37-5.64 15.87v-34.6h-3.09Zm82.18 82c-.95 2-2.14 3.66-3.55 4.98-1.17 1.22-2.17 1.83-3 1.83-1.42 0-2.12-1.25-2.12-3.74 0-1.81.39-3.76 1.17-5.86 1.32-3.71 3.42-6.54 6.3-8.5.29.64.76 1.27 1.39 1.9.83.93 1.25 2.1 1.25 3.52 0 1.9-.48 3.86-1.43 5.86Zm25.83-27.84-41.91-61.82-.15-.22h-3.23v62.04h-24.85V4.29h29.9l41.33 61.81.15.22h3.12V4.29h24.85v73.83c-8.63.31-13.44.47-14.4.47-6.45.22-9.93.32-11.65.34-1.15.2-2.08.69-2.77 1.51-.76.9-1.13 1.97-1.13 3.19s.51 2.37 1.54 3.3c.88.73 1.88 1.1 3 1.1h.03c.57.05 3.39.04 11.49-.2l13.4-.51c-1.82 4.81-3.53 9.7-5.14 14.68h-23.57Zm123.67-20.5v13.46l-.28.38c-.59.83-.88 1.71-.88 2.64 0 1.22.39 2.24 1.16 3.07v.95h-57.39c.32-1.3.64-2.62.98-3.95 1.47-5.76 2.94-11.27 4.42-16.55h51.99Zm-57.51-13.79v-4.9h1.5c-.5 1.6-1 3.24-1.5 4.9Zm55.4-23.34V61.8h-43.96c2.02-6.24 4.05-12.05 6.1-17.45h37.86Zm-41.26-15.97c-2.03 4.61-4.04 9.61-6.03 14.97h-8.11V25.79h17.2c-1.38.29-2.4 1.15-3.06 2.59ZM543.84 4.29h84.06v20.5h-58.51v19.56h8.74c-1.99 5.43-3.97 11.24-5.93 17.45h-2.82v9.24c-.63 2.15-1.27 4.36-1.9 6.59-.8-.57-1.7-.88-2.69-.88h-.37c-4.69.29-10.6.59-17.72.88 4.44-10.45 9.25-19.46 14.43-27.03.54-.83.81-1.68.81-2.56 0-1.61-.66-2.9-1.98-3.88-.83-.54-1.71-.81-2.64-.81-1.46 0-2.71.66-3.74 1.98-3.42 5.03-6.67 10.62-9.76 16.73V4.29Zm0 97.69V86.9c8.79-.33 15.86-.66 21.19-.99.07 0 .13-.03.2-.04-.87 3.24-1.73 6.56-2.59 9.96-.53 2.1-1.03 4.14-1.53 6.15h-17.27Z”></ path >
</ g >
</ svg > ’
}
$w . onReady ( function () {
});
export function sectionCALENDRIER_viewportEnter ( event ) {
animateMenuElements ( menuItems . color . white )
}
export function sectionCALENDRIER_viewportLeave ( event ) {
animateMenuElements ( menuItems . color . black )
}
asyncfunctionanimateMenuElements ( color ){
$w ( ‘#vectorlogo’ ). src = menuItems . setItemsColor ( color ). vectorlogo ;
}
Hello
I have tried your code, but the “export” function does not work…, the “animate MenuElements” does not seem supported. I have been figuring this out for a week now, and I am completely lost.
Thanks a lot for your help!
Kris
const menuItems = {
color: {
black: '#262626',
white: '#FFFFFF',
pink: '#FF00DE'
},
setItemsColor: (color) => {
return {
logo: `<svg preserveAspectRatio="xMidYMid meet" data-bbox="0 0 170.74 24.509" viewBox="0 0 170.74 24.509" height="24.508" width="170.74" xmlns="http://www.w3.org/2000/svg" data-type="color" role="presentation" aria-hidden="true"><defs><style>#comp-lgu7g90u_r_comp-lhil9sry svg [data-color="1"] {fill: ${color};}</style></defs>
<g>
<defs>
<clipPath id="svgcid-td4hbr-vphbs1">
<path fill="${color}" d="M170.74 0v24.508H0V0h170.74z"></path>
</clipPath>
</defs>
<g>
<path fill="${color}" d="m15.708.539-5.586 8.382L4.536.539H0v23.467h4.488V7.171L9.5 14.746h1.194l5.013-7.507v16.767H20.2V.539Z" data-color="1"></path>
<g>
<g clip-path="url(#svgcid-td4hbr-vphbs1)">
<path fill="${color}" d="M46.836 5.522v13.466s-.239 5.521-9.5 5.521c-9.214 0-9.5-5.521-9.5-5.521V5.522S28.12 0 37.335 0c9.263 0 9.5 5.522 9.5 5.522m-4.154.808s0-3.434-5.347-3.434c-5.3 0-5.3 3.434-5.3 3.434v11.883s0 3.232 5.3 3.232c5.347 0 5.347-3.232 5.347-3.232Z" data-color="1"></path>
<path fill="${color}" d="M73.478 5.522v13.466s-.239 5.016-9.5 5.016h-9.5V.539h9.5c9.263 0 9.5 4.983 9.5 4.983m-4.154.808s0-2.828-5.347-2.828h-5.013V20.84h5.014c5.347 0 5.347-2.626 5.347-2.626Z" data-color="1"></path>
<path fill="${color}" d="M99.678.539v23.467h-4.487l-9.5-15.992v15.992h-4.487V.539h4.487l9.5 15.958V.539Z" data-color="1"></path>
<path fill="${color}" d="M125.511 24.006h-4.157l-1.957-6.127h-6.923l-1.764 6.127h-4.2L112.954.539h6.159Zm-6.684-9.258L116.01 3.671l-2.769 11.075Z" data-color="1"></path>
<path fill="${color}" d="M145.216 7.642V6.329s0-3.434-5.347-3.434c-5.3 0-5.3 3.434-5.3 3.434v11.884s0 3.232 5.3 3.232c5.347 0 5.347-3.232 5.347-3.232v-3.467h-6.159v-3.165h10.316v7.407s-.239 5.521-9.5 5.521c-9.214 0-9.5-5.521-9.5-5.521V5.522S130.654 0 139.873 0c9.263 0 9.5 5.522 9.5 5.522v2.12Z" data-color="1"></path>
<path fill="${color}" d="M160.28 3.67v7.911h8.785v3.164h-8.785v6.094h10.46v3.167h-14.943V.538h14.943V3.67Z" data-color="1"></path>
</g>
</g>
</g>
</g>
</svg>`,
menuAbout: `<svg preserveAspectRatio="xMidYMid meet" data-bbox="0.141 -3 47.891 20" viewBox="0 0 54 18" height="18" width="54" xmlns="http://www.w3.org/2000/svg" data-type="ugc" role="presentation" aria-hidden="true">
<g>
<text letter-spacing=".04em" font-weight="500" font-family="AktivGrotesk-Medium, Aktiv Grotesk" font-size="18" fill="${color}" transform="translate(54 13)"><tspan y="0" x="-53.856">About</tspan></text>
</g>
</svg>`,
}
}
}
$w.onReady(function () {
});
/**
* Adds an event handler that runs when an element is no longer
displayed in the viewable part of the current window.
[Read more](https://www.wix.com/corvid/reference/$w.ViewportMixin.html#onViewportLeave)
* @param {$w.Event} event
*/
export function section1_viewportLeave(event) {
animateMenuElements(menuItems.color.black)
// This function was added from the Properties & Events panel. To learn more, visit http://wix.to/UcBnC-4
// Add your code for this event here:
}
/**
* Adds an event handler that runs when an element is displayed
in the viewable part of the current window.
[Read more](https://www.wix.com/corvid/reference/$w.ViewportMixin.html#onViewportEnter)
* @param {$w.Event} event
*/
export function section1_viewportEnter(event) {
animateMenuElements(menuItems.color.white)
// This function was added from the Properties & Events panel. To learn more, visit http://wix.to/UcBnC-4
// Add your code for this event here:
}
Hi,
I tried what was mentioned in the video, and I can change my logo color without any issue.
but I tried to then add the hamburger menu but this doesn’t work.
here is the code just for the logo, and it works fine:
const menuItems = {
color: {
black: '#000000',
white: '#ffffff'
},
setItemsColor: (color) => {
return `<svg preserveAspectRatio="xMidYMid meet" data-bbox="0 0.01 826.9 502.74" viewBox="0 0.01 826.9 502.74" xmlns="http://www.w3.org/2000/svg" data-type="color" role="presentation" aria-hidden="true" aria-label=""><defs><style>#comp-kbgakxea_r_comp-lgyas5ji svg [data-color="1"] {fill: ${color};}</style></defs>
<g>
<path d="m94.26 150.45.02-13.76c-2.26 2.56-4.94 4.91-8.02 7.1s-6.4 4.05-9.94 5.63a56.067 56.067 0 0 1-10.94 3.6c-3.76.82-7.3 1.22-10.61 1.22-8.58-.01-16.24-1.66-23.01-4.98-6.76-3.32-12.51-7.8-17.24-13.45-4.74-5.64-8.34-12.15-10.81-19.52C1.22 108.91-.01 101.24 0 93.27c0-8.12 1.37-15.8 4.08-23.02 2.72-7.22 6.56-13.53 11.53-18.94 4.97-5.41 10.91-9.68 17.84-12.85 6.92-3.15 14.59-4.72 23.02-4.72 7.07.01 14.06 1.64 20.98 4.88 6.91 3.24 12.55 7.65 16.91 13.21l.02-14.21 24.82.03-.12 112.81-24.82-.02Zm-.62-56.86c0-4.81-.79-9.37-2.36-13.65-1.58-4.3-3.83-8.02-6.76-11.18-2.93-3.16-6.42-5.64-10.48-7.46-4.06-1.8-8.57-2.71-13.54-2.71-4.96-.01-9.52.97-13.65 2.91-4.15 1.96-7.68 4.58-10.62 7.89-2.94 3.32-5.19 7.14-6.78 11.5-1.59 4.36-2.38 8.96-2.38 13.76 0 4.67.82 9.11 2.46 13.32 1.65 4.21 3.98 7.9 6.99 11.06 3 3.16 6.54 5.69 10.6 7.57 4.05 1.88 8.49 2.83 13.31 2.83 5.11.01 9.7-.93 13.77-2.81 4.07-1.87 7.52-4.46 10.38-7.77 2.86-3.31 5.08-7.14 6.67-11.5 1.58-4.36 2.38-8.95 2.39-13.76Z" fill="#231f20" data-color="1"></path>
<path d="m173.77 62.53-.09 88-27.08-.02.09-88-13.31-.02.02-24.81h13.31l.04-37.67 27.08.02-.04 37.69h16.25l-.02 24.83-16.25-.02Z" fill="#231f20" data-color="1"></path>
<path d="M316.79 92.69c0 2.25-.15 4.51-.46 6.75-.31 2.26-.68 4.52-1.13 6.78l-87.55-.09c1.8 6.76 5.48 12.37 11.04 16.82 5.55 4.44 11.87 6.67 18.95 6.68 5.72 0 10.6-1.23 14.67-3.71s7.6-6.11 10.62-10.94l29.78.03a53.713 53.713 0 0 1-8.14 15.9c-3.62 4.89-7.84 9.06-12.65 12.52-4.82 3.46-10.09 6.16-15.81 8.11-5.72 1.94-11.59 2.92-17.61 2.91-8.43-.01-16.24-1.59-23.46-4.76-7.21-3.16-13.49-7.46-18.82-12.88-5.33-5.42-9.54-11.78-12.62-19.08-3.07-7.29-4.61-15.08-4.59-23.36 0-8.26 1.51-16.09 4.53-23.47 3.01-7.36 7.2-13.82 12.54-19.38 5.34-5.56 11.63-9.99 18.85-13.3 7.23-3.29 15.04-4.95 23.47-4.94 8.12 0 15.72 1.6 22.78 4.76 7.07 3.16 13.27 7.46 18.6 12.88 5.33 5.42 9.5 11.75 12.5 18.97 3 7.22 4.5 14.82 4.49 22.8Zm-26.39-8.15c-1.8-7.68-5.48-13.99-11.03-18.97-5.56-4.97-12.41-7.46-20.53-7.46-8.13-.01-15.08 2.42-20.88 7.3-5.8 4.89-9.52 11.24-11.19 19.06l63.63.07Z" fill="#231f20" data-color="1"></path>
<path d="m335.91 150.69.15-150.5 27.08.03-.15 150.5-27.08-.03Z" fill="#231f20" data-color="1"></path>
<path d="m387.58 150.75.12-112.81 27.08.02-.12 112.82-27.08-.03Zm.13-125.68.02-24.82 27.08.03-.02 24.82-27.08-.03Z" fill="#231f20" data-color="1"></path>
<path d="M551.45 92.92c0 2.26-.15 4.52-.46 6.76-.31 2.26-.68 4.52-1.13 6.78l-87.55-.09c1.8 6.76 5.48 12.37 11.04 16.82 5.55 4.44 11.87 6.67 18.95 6.67 5.72.01 10.6-1.22 14.67-3.7 4.07-2.48 7.6-6.13 10.62-10.94l29.78.03a53.713 53.713 0 0 1-8.14 15.9c-3.62 4.89-7.84 9.06-12.65 12.52-4.82 3.46-10.09 6.16-15.81 8.11a54.467 54.467 0 0 1-17.61 2.91c-8.43-.01-16.24-1.6-23.46-4.76-7.21-3.16-13.49-7.46-18.82-12.88-5.33-5.43-9.54-11.78-12.62-19.08-3.07-7.29-4.61-15.08-4.59-23.36 0-8.27 1.51-16.09 4.53-23.47 3.01-7.36 7.2-13.83 12.54-19.39 5.34-5.55 11.63-9.98 18.85-13.29 7.23-3.31 15.04-4.95 23.47-4.95 8.12.01 15.72 1.6 22.78 4.77 7.07 3.16 13.27 7.46 18.6 12.88 5.33 5.42 9.5 11.75 12.5 18.96 3 7.23 4.5 14.83 4.49 22.8Zm-26.39-8.15c-1.8-7.67-5.48-13.99-11.03-18.96-5.56-4.97-12.41-7.46-20.53-7.47-8.13 0-15.08 2.43-20.88 7.32-5.8 4.88-9.52 11.24-11.19 19.05l63.63.07Z" fill="#231f20" data-color="1"></path>
<path d="M622.11 60.73c-8.73.3-14.97 2.69-18.73 7.21-3.77 4.51-5.65 11.05-5.66 19.62l-.07 63.41-27.08-.03.12-112.81 24.82.02V48.3c3.45-4.65 6.92-8.14 10.38-10.48 3.47-2.32 8.2-3.49 14.22-3.48.9 0 1.58.08 2.03.22l-.03 26.18Z" fill="#231f20" data-color="1"></path>
<path d="M123.71 247.12c0 7.98-1.41 15.65-4.2 23.01-2.79 7.37-6.71 13.84-11.75 19.4-5.05 5.55-11.03 9.99-17.95 13.29-6.92 3.31-14.52 4.95-22.79 4.94-3.76 0-7.19-.26-10.27-.79-3.09-.53-5.98-1.37-8.68-2.49a34.504 34.504 0 0 1-7.78-4.53c-2.48-1.87-5.07-4.1-7.77-6.65l-.05 48.28-27.08-.02.15-150.5 24.82.02-.02 13.31c4.67-5.86 10.13-10.17 16.38-12.96 6.24-2.78 13.12-4.15 20.64-4.15 8.27.01 15.87 1.64 22.78 4.88 6.92 3.24 12.86 7.57 17.82 12.99 4.96 5.42 8.83 11.75 11.6 18.97 2.78 7.22 4.16 14.9 4.15 23.02Zm-27.08.42c0-4.51-.78-8.91-2.35-13.2-1.58-4.29-3.83-8.09-6.76-11.4a33.324 33.324 0 0 0-10.37-7.91c-3.98-1.95-8.38-2.94-13.19-2.94s-9.25.97-13.32 2.92-7.57 4.54-10.5 7.77c-2.94 3.24-5.24 7-6.89 11.28-1.66 4.27-2.5 8.76-2.5 13.42s.78 9.13 2.36 13.43c1.58 4.29 3.83 8.04 6.76 11.28 2.93 3.25 6.42 5.84 10.48 7.8 4.06 1.96 8.49 2.94 13.31 2.94 4.81.01 9.21-.96 13.2-2.92 3.98-1.94 7.45-4.54 10.39-7.77 2.94-3.24 5.23-6.99 6.9-11.28 1.65-4.29 2.48-8.75 2.49-13.42Z" fill="#231f20" data-color="1"></path>
<path d="M255.04 246.13c0 2.25-.15 4.51-.46 6.76-.3 2.26-.68 4.51-1.13 6.76l-87.55-.09c1.8 6.78 5.48 12.38 11.04 16.82 5.55 4.44 11.87 6.67 18.95 6.68 5.72 0 10.6-1.23 14.66-3.71 4.07-2.48 7.6-6.11 10.62-10.93l29.78.02c-1.81 5.73-4.52 11.02-8.14 15.91-3.62 4.88-7.83 9.05-12.65 12.51-4.82 3.46-10.09 6.16-15.81 8.11-5.72 1.94-11.59 2.92-17.6 2.91-8.43 0-16.25-1.59-23.46-4.76-7.22-3.16-13.5-7.46-18.83-12.88-5.33-5.42-9.54-11.78-12.62-19.08-3.08-7.29-4.61-15.08-4.6-23.36.01-8.26 1.51-16.09 4.53-23.46 3.02-7.36 7.2-13.83 12.54-19.39 5.34-5.56 11.63-9.99 18.86-13.3 7.22-3.29 15.04-4.95 23.47-4.94 8.12.01 15.72 1.6 22.79 4.76 7.06 3.17 13.26 7.46 18.6 12.88 5.33 5.42 9.5 11.75 12.51 18.97 3 7.22 4.5 14.82 4.48 22.8Zm-26.39-8.15c-1.8-7.68-5.48-13.99-11.04-18.97-5.56-4.97-12.4-7.45-20.52-7.46-8.13-.01-15.09 2.42-20.88 7.3-5.79 4.89-9.52 11.25-11.18 19.06l63.63.07Z" fill="#231f20" data-color="1"></path>
<path d="M325.69 213.92c-8.73.3-14.97 2.7-18.73 7.21-3.77 4.51-5.65 11.05-5.66 19.63l-.06 63.4-27.08-.02.12-112.82 24.82.02v10.16c3.45-4.66 6.91-8.15 10.38-10.49 3.46-2.32 8.2-3.48 14.22-3.48.9 0 1.58.08 2.03.23l-.03 26.17Z" fill="#231f20" data-color="1"></path>
<path d="M448.63 246.33c0 2.25-.15 4.51-.46 6.76-.3 2.26-.68 4.51-1.13 6.76l-87.55-.09c1.8 6.78 5.48 12.38 11.04 16.82 5.55 4.44 11.87 6.67 18.95 6.68 5.72 0 10.6-1.23 14.66-3.71 4.07-2.48 7.6-6.11 10.62-10.93l29.78.02c-1.81 5.73-4.52 11.02-8.14 15.91-3.62 4.88-7.83 9.05-12.65 12.51-4.82 3.46-10.09 6.16-15.81 8.11-5.72 1.94-11.59 2.92-17.6 2.91-8.43 0-16.25-1.59-23.46-4.76-7.22-3.16-13.5-7.46-18.83-12.88-5.33-5.42-9.54-11.78-12.62-19.08-3.08-7.29-4.61-15.08-4.6-23.36.01-8.26 1.51-16.09 4.53-23.46 3.02-7.36 7.2-13.83 12.54-19.39 5.34-5.56 11.63-9.99 18.86-13.3 7.22-3.29 15.04-4.95 23.47-4.94 8.12.01 15.72 1.6 22.79 4.76 7.06 3.17 13.26 7.46 18.6 12.88 5.33 5.42 9.5 11.75 12.51 18.97 3 7.22 4.5 14.82 4.48 22.8Zm-26.39-8.15c-1.8-7.68-5.48-13.99-11.04-18.97-5.56-4.97-12.4-7.45-20.52-7.46-8.13-.01-15.09 2.42-20.88 7.3-5.79 4.89-9.52 11.25-11.18 19.06l63.63.07Z" fill="#231f20" data-color="1"></path>
<path d="m459.18 304.33.02-24.37 49.93-63.58-44-.04.03-24.81 76.72.08-.03 24.36-49.93 63.58 53.25.06-.02 24.82-85.97-.09Z" fill="#231f20" data-color="1"></path>
<path d="M123.55 408.29c0 7.98-1.41 15.65-4.2 23.01-2.79 7.37-6.71 13.84-11.75 19.4-5.05 5.55-11.03 9.99-17.95 13.29-6.92 3.31-14.52 4.95-22.79 4.94-3.76 0-7.19-.26-10.27-.79-3.09-.53-5.98-1.37-8.68-2.49a34.504 34.504 0 0 1-7.78-4.53c-2.48-1.87-5.07-4.1-7.77-6.65l-.05 48.28-27.08-.02.15-150.5 24.82.02-.02 13.31c4.67-5.86 10.13-10.17 16.38-12.96 6.24-2.78 13.12-4.15 20.64-4.15 8.27.01 15.87 1.64 22.78 4.88 6.92 3.24 12.86 7.57 17.82 12.99 4.96 5.42 8.83 11.75 11.6 18.97 2.77 7.22 4.16 14.9 4.15 23.02Zm-27.08.42c0-4.51-.78-8.91-2.35-13.2-1.58-4.29-3.83-8.09-6.76-11.4a33.324 33.324 0 0 0-10.37-7.91c-3.98-1.95-8.38-2.94-13.19-2.94s-9.25.97-13.32 2.92-7.57 4.54-10.5 7.77c-2.94 3.24-5.24 7-6.89 11.28-1.66 4.27-2.5 8.76-2.5 13.42s.78 9.13 2.36 13.43c1.58 4.29 3.83 8.04 6.76 11.28 2.93 3.25 6.42 5.84 10.48 7.8 4.06 1.96 8.49 2.94 13.31 2.94 4.81.01 9.21-.96 13.2-2.92 3.98-1.94 7.45-4.54 10.39-7.77 2.94-3.24 5.23-6.99 6.9-11.28 1.65-4.29 2.48-8.75 2.49-13.42Z" fill="#231f20" data-color="1"></path>
<path d="M194.21 374.96c-8.73.3-14.97 2.7-18.73 7.21-3.77 4.51-5.65 11.05-5.66 19.62l-.06 63.41-27.08-.03.12-112.81 24.82.02v10.16c3.45-4.66 6.91-8.15 10.38-10.49 3.46-2.32 8.2-3.49 14.22-3.48.9 0 1.58.08 2.03.23l-.03 26.17Z" fill="#231f20" data-color="1"></path>
<path d="M294.08 465.32v-13.76c-2.25 2.56-4.92 4.92-8 7.11-3.09 2.17-6.4 4.05-9.94 5.63-3.54 1.56-7.19 2.78-10.95 3.59-3.76.83-7.3 1.23-10.6 1.23-8.58-.01-16.25-1.67-23.01-4.99-6.77-3.32-12.52-7.8-17.25-13.44-4.74-5.64-8.34-12.15-10.81-19.52-2.48-7.37-3.71-15.05-3.7-23.03.01-8.12 1.37-15.79 4.09-23.01 2.72-7.22 6.56-13.53 11.52-18.94s10.91-9.7 17.84-12.85c6.92-3.15 14.59-4.73 23.02-4.72 7.07.01 14.06 1.63 20.98 4.87 6.91 3.24 12.55 7.66 16.91 13.22l.02-14.21 24.82.02-.12 112.82-24.82-.03Zm-.62-56.86c0-4.8-.78-9.35-2.35-13.65-1.58-4.29-3.83-8.01-6.76-11.17-2.94-3.16-6.42-5.65-10.49-7.46-4.05-1.81-8.57-2.71-13.53-2.72-4.96 0-9.52.97-13.66 2.92-4.14 1.95-7.68 4.58-10.61 7.89-2.94 3.31-5.2 7.14-6.78 11.5-1.59 4.36-2.38 8.95-2.39 13.76 0 4.66.82 9.1 2.47 13.31 1.65 4.22 3.98 7.9 6.98 11.07 3.01 3.15 6.54 5.69 10.6 7.57s8.5 2.82 13.32 2.83c5.11 0 9.7-.93 13.76-2.81 4.07-1.87 7.53-4.46 10.39-7.77 2.86-3.32 5.08-7.15 6.67-11.5 1.58-4.36 2.37-8.95 2.38-13.77Z" fill="#231f20" data-color="1"></path>
<path d="M432.17 465.46V451.7c-4.51 5.41-10.27 9.7-17.27 12.85-7 3.15-14.11 4.72-21.33 4.72-7.98-.01-15.35-1.71-22.11-5.1-6.76-3.39-12.63-7.88-17.59-13.44-4.96-5.56-8.83-11.97-11.6-19.19-2.78-7.23-4.16-14.66-4.15-22.34.01-7.81 1.44-15.37 4.31-22.67 2.86-7.28 6.82-13.72 11.87-19.27 5.05-5.56 11.03-10.04 17.95-13.41 6.92-3.38 14.44-5.07 22.56-5.06 6.32 0 12.64 1.25 18.96 3.75 6.31 2.49 11.73 5.92 16.23 10.28l.05-47.84 27.08.03-.15 150.5-24.82-.03Zm-.4-56.41c0-4.66-.82-9.13-2.47-13.43-1.66-4.29-3.98-8.04-6.99-11.28-3.01-3.24-6.53-5.84-10.6-7.8-4.05-1.95-8.49-2.93-13.3-2.94-4.51 0-8.8.97-12.87 2.92-4.06 1.95-7.6 4.54-10.61 7.77a37.26 37.26 0 0 0-7.12 11.05 33.146 33.146 0 0 0-2.61 12.98c0 4.66.82 9.18 2.47 13.54 1.65 4.36 3.94 8.21 6.88 11.51 2.93 3.32 6.42 5.98 10.48 8.02 4.06 2.04 8.58 3.05 13.54 3.06 4.81 0 9.25-.97 13.31-2.93 4.07-1.94 7.56-4.53 10.51-7.77 2.93-3.23 5.23-6.99 6.89-11.28 1.65-4.27 2.49-8.75 2.5-13.42Z" fill="#231f20" data-color="1"></path>
<path d="M596.03 409.22c0 8.43-1.6 16.28-4.76 23.58-3.17 7.29-7.46 13.64-12.89 19.06-5.42 5.41-11.78 9.68-19.08 12.84-7.3 3.15-15.09 4.73-23.36 4.72-8.27-.01-16.06-1.6-23.35-4.76-7.3-3.16-13.65-7.5-19.06-13-5.41-5.49-9.7-11.89-12.84-19.18-3.16-7.3-4.72-15.09-4.72-23.37.01-8.26 1.59-16.09 4.76-23.46 3.17-7.36 7.5-13.76 13-19.17 5.5-5.41 11.93-9.68 19.3-12.84 7.38-3.15 15.2-4.73 23.47-4.72 8.27.01 16.02 1.6 23.24 4.76 7.22 3.17 13.53 7.5 18.94 12.99 5.41 5.51 9.65 11.9 12.73 19.2 3.08 7.29 4.62 15.08 4.61 23.35Zm-27.08.43c0-4.52-.78-8.95-2.35-13.31-1.58-4.36-3.83-8.21-6.76-11.51-2.93-3.32-6.39-5.99-10.37-8.02-3.98-2.04-8.38-3.06-13.19-3.06-4.81-.01-9.22.97-13.2 2.92a34.623 34.623 0 0 0-10.5 7.89c-3.01 3.31-5.35 7.1-7.01 11.38s-2.49 8.68-2.5 13.2c0 4.81.78 9.33 2.36 13.54 1.58 4.22 3.82 7.98 6.76 11.29a31.54 31.54 0 0 0 10.48 7.79c4.07 1.9 8.58 2.83 13.54 2.83 4.81.01 9.21-.93 13.2-2.8 3.98-1.87 7.45-4.43 10.39-7.67 2.93-3.23 5.19-6.94 6.78-11.16 1.58-4.21 2.37-8.65 2.38-13.31Z" fill="#231f20" data-color="1"></path>
<g opacity=".5">
<path d="m586.9 216.13-2.63-6.37h-8.74l-2.74 6.37h-5.04l10.26-24.71h3.59l10.37 24.71h-5.08Zm-7.08-18.23-2.67 7.6h5.3l-2.63-7.6Z" fill="#231f20" data-color="1"></path>
<path d="m610.46 216.13-6.59-9.45v9.45h-4.59v-24.71h7.56c1.41 0 2.71.17 3.91.5s2.26 1.07 3.2 2.21c1.21 1.43 1.82 3.09 1.82 4.96 0 .86-.14 1.74-.43 2.63-.28.89-.67 1.68-1.17 2.37-.62.86-1.33 1.51-2.13 1.93-.8.42-1.71.75-2.72 1l6.67 9.12h-5.52Zm.74-16.71c0-.64-.12-1.2-.37-1.67s-.57-.85-.98-1.15-.88-.52-1.41-.66c-.53-.15-1.08-.22-1.65-.22h-2.93v7.52h2.93c.62 0 1.19-.07 1.72-.22s.99-.38 1.39-.7c.39-.32.71-.72.94-1.18.23-.47.35-1.04.35-1.7Z" fill="#231f20" data-color="1"></path>
<path d="M642.36 198.5c-.86-1.01-1.85-1.82-2.94-2.41-1.1-.59-2.33-.89-3.69-.89-1.14 0-2.19.24-3.17.72s-1.83 1.12-2.55 1.93-1.3 1.72-1.7 2.74a8.548 8.548 0 0 0 .02 6.39c.42 1.04 1 1.96 1.74 2.76.74.8 1.61 1.44 2.61 1.91 1 .47 2.08.7 3.24.7 1.33 0 2.48-.28 3.43-.83.95-.56 1.87-1.3 2.76-2.24h5.3c-.47 1.14-1.1 2.16-1.89 3.06-.79.9-1.69 1.67-2.71 2.29-1.01.63-2.1 1.12-3.26 1.46s-2.35.52-3.56.52c-1.78 0-3.45-.35-5-1.04s-2.92-1.62-4.09-2.8c-1.17-1.17-2.1-2.54-2.78-4.11s-1.02-3.23-1.02-4.98.34-3.4 1.02-4.95c.68-1.54 1.6-2.9 2.76-4.06s2.51-2.08 4.06-2.74c1.55-.67 3.19-1 4.95-1s3.45.34 5.02 1.02c1.57.68 2.98 1.65 4.24 2.91.3.3.56.58.8.85.23.27.45.55.63.83.19.28.35.58.5.89.15.31.31.66.48 1.06h-5.19Z" fill="#231f20" data-color="1"></path>
<path d="M669.34 216.13v-10.37h-8.82v10.37h-4.59v-24.71h4.59v10.08h8.82v-10.08h4.59v24.71h-4.59Z" fill="#231f20" data-color="1"></path>
<path d="M683.57 216.13v-24.71h4.59v24.71h-4.59Z" fill="#231f20" data-color="1"></path>
<path d="M705.02 195.72v20.41h-4.56v-20.41h-4.59v-4.3h13.71v4.3h-4.56Z" fill="#231f20" data-color="1"></path>
<path d="M717.32 216.13v-24.71h13.3v4.3h-8.71v6h8.34v4.3h-8.34v5.85h8.71v4.26h-13.3Z" fill="#231f20" data-color="1"></path>
<path d="M757.63 198.5c-.86-1.01-1.85-1.82-2.94-2.41-1.1-.59-2.33-.89-3.69-.89-1.14 0-2.19.24-3.17.72s-1.83 1.12-2.55 1.93-1.3 1.72-1.7 2.74a8.548 8.548 0 0 0 .02 6.39c.42 1.04 1 1.96 1.74 2.76.74.8 1.61 1.44 2.61 1.91 1 .47 2.08.7 3.24.7 1.33 0 2.48-.28 3.43-.83.95-.56 1.87-1.3 2.76-2.24h5.3c-.47 1.14-1.1 2.16-1.89 3.06-.79.9-1.69 1.67-2.71 2.29-1.01.63-2.1 1.12-3.26 1.46s-2.35.52-3.56.52c-1.78 0-3.45-.35-5-1.04s-2.92-1.62-4.09-2.8c-1.17-1.17-2.1-2.54-2.78-4.11s-1.02-3.23-1.02-4.98.34-3.4 1.02-4.95c.68-1.54 1.6-2.9 2.76-4.06s2.51-2.08 4.06-2.74c1.55-.67 3.19-1 4.95-1s3.45.34 5.02 1.02c1.57.68 2.98 1.65 4.24 2.91.3.3.56.58.8.85.23.27.45.55.63.83.19.28.35.58.5.89.15.31.31.66.48 1.06h-5.19Z" fill="#231f20" data-color="1"></path>
<path d="M778.01 195.72v20.41h-4.56v-20.41h-4.59v-4.3h13.71v4.3h-4.56Z" fill="#231f20" data-color="1"></path>
<path d="M790.31 216.13v-24.71h13.3v4.3h-8.71v6h8.34v4.3h-8.34v5.85h8.71v4.26h-13.3Z" fill="#231f20" data-color="1"></path>
<path d="M826.88 208.61c0 1.11-.21 2.16-.63 3.13-.42.98-.99 1.82-1.7 2.54-.72.72-1.56 1.29-2.54 1.7s-2.02.63-3.13.63-2.11-.19-3.07-.56c-.97-.37-1.81-.89-2.52-1.56s-1.29-1.46-1.72-2.39c-.43-.93-.67-1.95-.72-3.06h4.78c.02 1.01.34 1.82.94 2.41.6.59 1.41.89 2.43.89.94 0 1.73-.28 2.37-.83.64-.56.96-1.32.96-2.28 0-.67-.15-1.23-.45-1.69-.29-.46-.69-.84-1.16-1.15a8.83 8.83 0 0 0-1.63-.8c-.6-.22-1.22-.45-1.85-.69-.63-.24-1.25-.5-1.85-.8a5.54 5.54 0 0 1-1.58-1.15c-.64-.66-1.15-1.43-1.52-2.29s-.56-1.77-.56-2.71.19-1.91.57-2.76c.38-.85.91-1.59 1.58-2.22.67-.63 1.44-1.13 2.32-1.5s1.8-.56 2.76-.56c1.01 0 1.95.18 2.81.54.87.36 1.63.85 2.28 1.48.65.63 1.18 1.38 1.57 2.24s.62 1.79.67 2.78h-4.74c-.05-.79-.3-1.45-.76-1.98s-1.1-.8-1.94-.8c-.77 0-1.38.22-1.85.67-.47.44-.7 1.06-.7 1.85 0 .5.08.91.26 1.26.15.27.38.52.71.74s.67.43 1.06.61c.38.18.77.34 1.15.48.38.14.71.25.98.35.79.27 1.54.57 2.24.89.71.32 1.37.78 1.98 1.37.74.72 1.3 1.5 1.67 2.35.37.85.55 1.8.55 2.83Z" fill="#231f20" data-color="1"></path>
<path d="M587.45 253.45c0 1.38-.16 2.67-.48 3.85s-1 2.26-2.04 3.22c-.86.79-1.83 1.39-2.89 1.8-1.06.4-2.19.61-3.37.61-.79 0-1.59-.1-2.39-.32-.8-.21-1.56-.51-2.28-.91-.72-.39-1.36-.88-1.94-1.46s-1.04-1.24-1.39-1.98c-.34-.74-.57-1.53-.69-2.37s-.17-1.66-.17-2.45v-15.71h4.56v15.71c0 .74.07 1.43.21 2.06.13.63.37 1.18.7 1.65s.77.84 1.32 1.11c.54.27 1.22.41 2.04.41s1.5-.13 2.06-.41c.56-.27 1-.64 1.32-1.11s.55-1.02.69-1.65c.13-.63.2-1.31.2-2.06v-15.71h4.56v15.71Z" fill="#231f20" data-color="1"></path>
<path d="m608.05 262.45-6.59-9.45v9.45h-4.59v-24.71h7.56c1.41 0 2.71.17 3.91.5s2.26 1.07 3.2 2.21c1.21 1.43 1.82 3.09 1.82 4.96 0 .86-.14 1.74-.43 2.63-.28.89-.67 1.68-1.17 2.37-.62.86-1.33 1.51-2.13 1.93-.8.42-1.71.75-2.72 1l6.67 9.12h-5.52Zm.74-16.71c0-.64-.12-1.2-.37-1.67s-.57-.85-.98-1.15-.88-.52-1.41-.66c-.53-.15-1.08-.22-1.65-.22h-2.93v7.52h2.93c.62 0 1.19-.07 1.72-.22s.99-.38 1.39-.7c.39-.32.71-.72.94-1.18.23-.47.35-1.04.35-1.7Z" fill="#231f20" data-color="1"></path>
<path d="M638.03 255.11c0 1.46-.38 2.76-1.13 3.91-.76 1.15-1.8 2.01-3.13 2.58-.77.35-1.62.58-2.56.69-.94.11-1.83.17-2.67.17h-6.59v-24.71h4.89c.67 0 1.34.01 2.02.04s1.34.09 1.98.2c.64.11 1.27.3 1.89.56.61.26 1.18.62 1.7 1.09a6.49 6.49 0 0 1 1.54 2.09c.38.83.57 1.67.57 2.54 0 1.09-.22 2.01-.66 2.76-.45.76-1.14 1.4-2.08 1.95 2.81 1.09 4.23 3.14 4.23 6.15Zm-6.04-10.41c0-.52-.1-.94-.31-1.28-.21-.33-.48-.6-.82-.81s-.71-.36-1.13-.45c-.42-.08-.85-.13-1.3-.13h-1.89v5.34h1.48c.47 0 .94-.03 1.41-.09s.9-.19 1.28-.37c.38-.19.69-.46.93-.81.23-.36.35-.82.35-1.39Zm1.44 10.26c0-.64-.13-1.17-.39-1.59-.26-.42-.61-.76-1.04-1.02s-.91-.44-1.44-.55c-.53-.11-1.07-.17-1.61-.17h-2.41v6.56h2.3c.54 0 1.09-.04 1.63-.13s1.04-.25 1.48-.5.8-.57 1.07-.98c.27-.41.41-.94.41-1.61Z" fill="#231f20" data-color="1"></path>
<path d="m662.86 262.45-2.63-6.37h-8.74l-2.74 6.37h-5.04l10.26-24.71h3.59l10.37 24.71h-5.08Zm-7.08-18.23-2.67 7.6h5.3l-2.63-7.6Z" fill="#231f20" data-color="1"></path>
<path d="m690.2 262.45-10.37-17.93v17.93h-4.59v-24.71h5.22l10.26 17.97v-17.97h4.59v24.71h-5.11Z" fill="#231f20" data-color="1"></path>
<path d="M704.95 262.45v-24.71h4.59v24.71h-4.59Z" fill="#231f20" data-color="1"></path>
<path d="M733.58 254.93c0 1.11-.21 2.16-.63 3.13-.42.98-.99 1.82-1.7 2.54-.72.72-1.56 1.29-2.54 1.7s-2.02.63-3.13.63-2.11-.19-3.07-.56c-.97-.37-1.81-.89-2.52-1.56s-1.29-1.46-1.72-2.39c-.43-.93-.67-1.95-.72-3.06h4.78c.02 1.01.34 1.82.94 2.41.6.59 1.41.89 2.43.89.94 0 1.73-.28 2.37-.83.64-.56.96-1.32.96-2.28 0-.67-.15-1.23-.45-1.69-.29-.46-.69-.84-1.16-1.15a8.83 8.83 0 0 0-1.63-.8c-.6-.22-1.22-.45-1.85-.69-.63-.24-1.25-.5-1.85-.8a5.54 5.54 0 0 1-1.58-1.15c-.64-.66-1.15-1.43-1.52-2.29s-.56-1.77-.56-2.71.19-1.91.57-2.76c.38-.85.91-1.59 1.58-2.22.67-.63 1.44-1.13 2.32-1.5s1.8-.56 2.76-.56c1.01 0 1.95.18 2.81.54.87.36 1.63.85 2.28 1.48.65.63 1.18 1.38 1.57 2.24s.62 1.79.67 2.78h-4.74c-.05-.79-.3-1.45-.76-1.98s-1.1-.8-1.94-.8c-.77 0-1.38.22-1.85.67-.47.44-.7 1.06-.7 1.85 0 .5.08.91.26 1.26.15.27.38.52.71.74s.67.43 1.06.61c.38.18.77.34 1.15.48.38.14.71.25.98.35.79.27 1.54.57 2.24.89.71.32 1.37.78 1.98 1.37.74.72 1.3 1.5 1.67 2.35.37.85.55 1.8.55 2.83Z" fill="#231f20" data-color="1"></path>
<path d="M749.34 242.04v20.41h-4.56v-20.41h-4.59v-4.3h13.71v4.3h-4.56Z" fill="#231f20" data-color="1"></path>
<path d="M761.64 262.45v-24.71h13.3v4.3h-8.71v6h8.34v4.3h-8.34v5.85h8.71v4.26h-13.3Z" fill="#231f20" data-color="1"></path>
<path d="M798.2 254.93c0 1.11-.21 2.16-.63 3.13-.42.98-.99 1.82-1.7 2.54-.72.72-1.56 1.29-2.54 1.7s-2.02.63-3.13.63-2.11-.19-3.07-.56c-.97-.37-1.81-.89-2.52-1.56s-1.29-1.46-1.72-2.39c-.43-.93-.67-1.95-.72-3.06h4.78c.02 1.01.34 1.82.94 2.41.6.59 1.41.89 2.43.89.94 0 1.73-.28 2.37-.83.64-.56.96-1.32.96-2.28 0-.67-.15-1.23-.45-1.69-.29-.46-.69-.84-1.16-1.15a8.83 8.83 0 0 0-1.63-.8c-.6-.22-1.22-.45-1.85-.69-.63-.24-1.25-.5-1.85-.8a5.54 5.54 0 0 1-1.58-1.15c-.64-.66-1.15-1.43-1.52-2.29s-.56-1.77-.56-2.71.19-1.91.57-2.76c.38-.85.91-1.59 1.58-2.22.67-.63 1.44-1.13 2.32-1.5s1.8-.56 2.76-.56c1.01 0 1.95.18 2.81.54.87.36 1.63.85 2.28 1.48.65.63 1.18 1.38 1.57 2.24s.62 1.79.67 2.78h-4.74c-.05-.79-.3-1.45-.76-1.98s-1.1-.8-1.94-.8c-.77 0-1.38.22-1.85.67-.47.44-.7 1.06-.7 1.85 0 .5.08.91.26 1.26.15.27.38.52.71.74s.67.43 1.06.61c.38.18.77.34 1.15.48.38.14.71.25.98.35.79.27 1.54.57 2.24.89.71.32 1.37.78 1.98 1.37.74.72 1.3 1.5 1.67 2.35.37.85.55 1.8.55 2.83Z" fill="#231f20" data-color="1"></path>
</g>
</g>
</svg>`
}
}
$w.onReady(function () {
});
/**
* Adds an event handler that runs when an element is no longer
displayed in the viewable part of the current window.
[Read more](https://www.wix.com/corvid/reference/$w.ViewportMixin.html#onViewportLeave)
* @param {$w.Event} event
*/
export function section1_viewportLeave(event) {
$w('#vectorlogo').src = menuItems.setItemsColor(menuItems.color.black);
// This function was added from the Properties & Events panel. To learn more, visit http://wix.to/UcBnC-4
// Add your code for this event here:
}
/**
* Adds an event handler that runs when an element is displayed
in the viewable part of the current window.
[Read more](https://www.wix.com/corvid/reference/$w.ViewportMixin.html#onViewportEnter)
* @param {$w.Event} event
*/
export function section1_viewportEnter(event) {
$w('#vectorlogo').src = menuItems.setItemsColor(menuItems.color.white);
// This function was added from the Properties & Events panel. To learn more, visit http://wix.to/UcBnC-4
// Add your code for this event here:
}
/**
* Adds an event handler that runs when an element is no longer
displayed in the viewable part of the current window.
[Read more](https://www.wix.com/corvid/reference/$w.ViewportMixin.html#onViewportLeave)
* @param {$w.Event} event
*/
export function line1_viewportLeave(event) {
$w('#vectorlogo').src = menuItems.setItemsColor(menuItems.color.white);
// This function was added from the Properties & Events panel. To learn more, visit http://wix.to/UcBnC-4
// Add your code for this event here:
}
/**
* Adds an event handler that runs when an element is displayed
in the viewable part of the current window.
[Read more](https://www.wix.com/corvid/reference/$w.ViewportMixin.html#onViewportEnter)
* @param {$w.Event} event
*/
export function line1_viewportEnter(event) {
$w('#vectorlogo').src = menuItems.setItemsColor(menuItems.color.black);
// This function was added from the Properties & Events panel. To learn more, visit http://wix.to/UcBnC-4
// Add your code for this event here:
}
the link to the page is here:
when trying to change the code to add the hamburger menu, I come to a few issues:
- no color data in the code of the hamburger menu, so no way to make it dynamic.
- the asyncfunc animateMenuElements is not recognized.
can you help?
Hi, thanks for this video! Is there a way to change the color of the menu items? I have tried your tutorial however, the code is not letting me access the horizontal menu’s color. Would appreciate your advice regarding this challenge Thank you!!