Now we will see how to change the color of the .svg logo when scrolling at certain points
first we make or take our logo in vector graphics
and we export it as SVG after renaming it
and insert it into our code as an image, I have already created three spaces at the bottom, one of which is yellow
and we set up an ID (in my case "logo") and we attribute position and size of our logo
here's the problem, as we scroll we have an area where our logo is not clearly visible
Now what we have to do is open the .svg file with a text editor
this is because we have to insert the code directly into our HTML page and then be able to use the .cls class to manage the color of the image
adding the ID "logo" to our svg and cutting and pasting the style in our CSS file
from here we can clearly see the attribute "fill" that defines the color
as you can see, the result is the same as before
now that everything is positioned, let's add jquery, scrollmagic and gsap
scrollmagic and indicators useful for managing scenes
and from cdn the plug-in for gsap, tween-max and jquery
and finally we open or create our .js file
I already have one in the main folder
let's start scrollmagic and define the scene, the moment in which to make the transition take place
in this way we have defined the scene and the presence of the indicators on the right will confirm if everything is correct and the possibility of adjusting the transition point
now it's time to tweenmax tweet and define what to change
this procedure can be applied to any type of SVG, text or div
in the next tutorial instead we will see how to add a duration to the transition and parallax movement
