Hi there,
Thanks for using my plugin!
Hard to say. Can you please provide links to have a look at the two? One working in your template file and the other not working when inlined using my plugin.
Then I can take a look and see if I can spot what’s happening.
Hi thanks for the quick response.
I’ve put both the svgs next to each other to compare
http://web.artisan-creative.co.uk/staging/bcp/
Its the logo at the top of the screen (BCP) when you scroll down the page and then back up, scroll magic should change the color of the letters in the logo to white, then back to their original color when you get to the top of the website, you will see the svg that is embedded in the code is working, but the one inlined by advance mode isn’t
My pleasure.
I see what you mean, but I can’t really see why that is happening.
The SVG is definitely inlined correctly and you should be able to target elements within it no problem as I can modify the elements just targeting the classes you have in there using CSS such as:
.slideUp .top-bar .style-svg .cls3 {
fill: red;
}
I’m unfamiliar with scrollmagic, so I can’t really help on that front… But what exactly are you targeting? Maybe if I have more context and details, I’ll be able to help troubleshoot more.
Might be worth hitting up scrollmagic support also, because technically, you should be able to target the content of the SVG inlined using my plugin.
It just occurred to me that it might be to do with when JS files are enqueued. There is an option to pick header/footer in my plugin settings if you want to try switching that just to see if it makes a difference when the JS for inlining is fired.
-
This reply was modified 8 years, 6 months ago by
Benbodhi.
Thanks
I’ve tried both header and footer for the scripts, and the svg scripts are loading before scrollmagic.
This is the scroll magic code
// build tween
var tween = new TimelineMax()
.add(TweenMax.to(".cls1", 0.5, {fill:"#ffffff", ease:Linear.easeNone}), 0)
.add(TweenMax.to(".cls3", 0.5, {fill:"#ffffff", ease:Linear.easeNone}), 0)
.add(TweenMax.to(".cls4", 0.5, {fill:"#ffffff", ease:Linear.easeNone}), 0)
.add(TweenMax.to(".cls5", 0.5, {fill:"#ffffff", ease:Linear.easeNone}), 0)
.add(TweenMax.to(".cls2", 0.5, {fill:"#ffffff", autoAlpha: 0.4, ease:Linear.easeNone}), 0)
;
// build scene
var scene = new ScrollMagic.Scene({
triggerElement: "body",
triggerHook: 0,
offset: 100,
tweenChanges: true})
.setTween(tween)
.addTo(controller);
So its basically targeting the .cls classes and changing the fill over half a second after you have scrolled 100px from the top of the screen.
To be honest, I have no idea why it wouldn’t work on the inlined SVG.
I don’t see how it’s any different to the one embedded in the template except for a few classes.
Maybe it’s to do with your targeting, might need more specificity like:
svg.replaced-svg .cls4
This is certainly a strange case as I see it now.
No afraid not, I had to add the svg code to the template because the site needs to go live next week. I’ll have time to fiddle after that
No problem, I’m interested to find out what’s happening.
Good luck with the launch, I hope it all goes well 🙂
I’ll leave this ticket open for now.
I’m going to close this thread due to inactivity. Please do get in touch if you need further assistance.
Yeah no worries, I couldn’t get anything to work, I guess scrollmagic is getting loaded before your plug in even when one is in the footer and one is in the header
It’s very strange. Have you spoken to the Scroll Magic devs?
Hi again, I posted about this issue on the scroll magic forum and just received this reply
“You want to make sure your injected SVGs are loaded before controller is added. So wrap your scrollmagic related code in a function and call that function once the SVGs are injected. Like:
var mySVGsToInject = document.querySelectorAll(‘img.inject-me’); SVGInjector(mySVGsToInject, injectorOptions, function (totalSVGsInjected) { STARTanimation(); });
I got help on a similar issue in 2015 and there is a codepen:
https://greensock.com/forums/topic/11909-iconic-svginjector-preventing-gsap-animations/”
It doesn’t help completely because I think you need to be using SVGInjector.js, but I guess if there was a way to reference your inliner in javascript then this could be modified to wait for your inliner to load, what do you think?
Just seen this post on your support as well https://wordpress.org/support/topic/call-inline-function-via-js/
I guess if this is implemented it would help with my issue as well?
This may help, I can’t be sure exactly.
My plugin puts unique classes on the replaced SVG files though, so you could possibly target those to trigger scrollmagic later…
