[Illustrator SVG change fill opacity using gsap]

@Shaun Gorneau Thanks for the quick reply! I was afraid that was the case. Your solution will work! I really appreciate it.

[Illustrator SVG change fill opacity using gsap]

I have .svg that was generated by Illustrator that is being pulled in by css.

star.svg:

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 25.2.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version="1.1" id="star" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 100 100" style="enable-background:new 0 0 100 100;" xml:space="preserve">
<style type="text/css">
	.star_fill{opacity:0.3;fill:#ED1C24;}
	.star_outline{fill:#231F20;}
</style>
<polygon id="star_x5F_fill" class="star_fill" points="50,11.958 62.361,37.003 90,41.019 70,60.515 74.721,88.042 50,75.045 
	25.279,88.042 30,60.515 10,41.019 37.639,37.003 "/>
<path id="star_x5F_outline" class="star_outline" d="M76.714,90.784L50,76.74L23.287,90.784l5.102-29.746L6.776,39.972l29.867-4.34L50,8.568
	l13.356,27.064l29.867,4.34L71.611,61.038L76.714,90.784z M50,73.352L72.729,85.3l-4.341-25.309l18.388-17.924l-25.412-3.692
	L50,15.347L38.635,38.375l-25.412,3.692l18.388,17.924L27.271,85.3L50,73.352z"/>
</svg>

css & html:

.star {
    background: url(star.svg) no-repeat top center;
    background-size: 100% 100%;
}

<div id="star" class="star"></div>

How do you change the opacity value inside the ".star_fill" class inside the svg using gsap?
 

[loop back to beginning on a slider]

@OSUblake This is perfect! I really appreciate it!

[loop back to beginning on a slider]

On 10/12/2018 at 9:41 AM, Carl said:

yup and just to add onto Jonathan's advice, here you can see some buttons to navigate

 

be sure to read this thread for more info on what is happening and how it works

 

https://greensock.com/forums/topic/16952-modifiers-plugin-for-infinite-image-carousel/

 

 

 

 

 

 

 

@Carl This is great! I've been trying to modify the code to work in percentages. Specifically using css: {left: "-=100%"} so the slides (boxes) can scale if the browser window scales. I haven't had any luck.