[.setClassToggle issues in Safari]

I am trying to add a class into an SVG object, inside a foreign object area. The purpose is to add a class at the trigger point and tell that class to fade the section in (see css for .foreigntext and .foreigntext.fade-in). 

 

 

It works great in Chrome, but it doesn't work in Safari. Is there a known issue with safari? Or do I have my code stated incorrectly. Any help would be appreciated. You will see the CSS style 

See the Pen WRVyzv by c308marketing (@c308marketing) on CodePen

[Creating JS controller to activate Tweens]

Your pen still wasn't loading the ScrollMagic GSAP plugin I mentioned in Post #2. Here's a fork of your pen with that added:

 

See the Pen qReGZX by PointC (@PointC) on CodePen

 

It all looks like it's working to me. I'm not seeing any setTween error now. I am still seeing the Bootstrap error Jonathan mentioned in Post #5, but it doesn't look like it's preventing anything from working. I don't know anything about Bootstrap so you'll have to investigate that one.

 

Happy tweening.

THANK YOU!!! It works now. Funny thing I had it linked on my dev environment. Must have had a typo or something in there. Thank you for your time on this. 

[Creating JS controller to activate Tweens]

 

Looks like there is one more fix necessary. Lines 32 and 33:

TweenMax.fromTo("#path1", 1, {drawSVG:0},), // missing to
TweenMax.fromTo("#path2", 1, {drawSVG:0, delay:0.5}), // missing to

These are fromTo() tweens so they need a fromVars:Object and a toVars:Object. Drop in your ending values and you should be good to go.

 

Happy tweening.

 

I get an error in my console from the ".setTween" function. Is this the correct syntax for that function.

See the Pen WRVyzv%C2%A0 by c308marketing (@c308marketing) on CodePen

 (It still doesn't recognize the trigger element on the page)

[Creating JS controller to activate Tweens]

Hi mikekerby 

 

Welcome to the GreenSock forum.

 

You're not doing anything wrong. You're just missing the ScrollMagic GSAP plugin. Please add this script to your pen:

https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/animation.gsap.js

Happy tweening.

Thank you for the quick reply. I added the animation.gsap.js to the pen and it still doesn't work. 

[Creating JS controller to activate Tweens]

I am trying to create an animation using GSAP and ScrollMagic. 

 

The first codepen includes the desired animation. I am trying to trigger this at various parts through the animation. 

See the Pen RKXJQE by c308marketing (@c308marketing) on CodePen

 

The second codepen is the controller I am trying to build to accomplish this. What am I doing wrong? 

 

Also, there is a black box that is covering the text that fades in…not sure where that is coming from either. 

 

 

Any help would be greatly appreciated. 

See the Pen WRVyzv by c308marketing (@c308marketing) on CodePen