ScrollMagic and Joomla | Issues

[Ooops-404]

Post #1 Joomla Issues: post #1 by error404 , Today, 03:59 AM Hi Everyone,

I have been trying to set GSAP on a Joomla website. Well, was able to make it work with the quote below BUT with issues, now the trigger always start way before it should. It starts at the beginning of the page instead of at the orange div start like in the doc example.

<script type="text/javascript">

        jQuery(document).ready(function() {
            var controller = new ScrollMagic.Controller();

  var blockTween = new TweenMax.to("scblock", 1.5, {
    backgroundColor: '#f1f1f1f1'});

  var containerScene = new ScrollMagic.Scene({
      triggerElement: 'sccontainer'
    })
    .setTween(blockTween)
    .addIndicators()
    .addTo(controller);

        }); //ready

</script>

this code was taken out from the doc example at https://github.com/j...ted-First-Tween the only difference is that the CSS id to work in Joomla can't include the '#' like already reported on a different topic within this forum. There are no errors showing on the Chrome and/or Firefox Firebug console.

Please take a look at the attached image to see what I mean.

Anyideas on why this is happening?

Thanks for the help guys :)

[janpaepke]

I'm quite sure there are errors in the console, you're just not seeing them, because I bet you're using the minified version of ScrollMagic (which you shouldn't do for development). The reason i'm sure is that triggerElement: 'sccontainer' can not be successful, because sccontainer is not a valid selector. So it's impossible for ScrollMagic to find your trigger element.

Use the uncompressed version of ScrollMagic, check your console and make sure that you reference the correct element. I promise you it'll work. :)

please report back.

[Ooops-404]

Hi,

Thanks for wanting to help, I have been drowned in work, I am comming back to this issue now and really want to get it working.

I will do as you suggested and report back. Again thanks!.

[Ooops-404]

Did as you sugested. heres the results:

In Chrome: Visually: The markers dissipated. No action happens. Errors; Uncaught TypeError: Cannot assign to read only property '_gsTweenID' of #scblockG @ TweenMax.min.js:16(anonymous function) @ TweenMax.min.js:16r @ TweenMax.min.js:14r.to @ TweenMax.min.js:14(anonymous function) @ index.php?option=com_blankcomponent&view=default&Itemid=123:130m.Callbacks.j @ jquery.min.js:2m.Callbacks.k.fireWith @ jquery.min.js:2m.extend.ready @ jquery.min.js:2J @ jquery.min.js:2

Uncaught TypeError: Cannot assign to read only property 'backgroundColor' of #scblockn.render @ TweenMax.min.js:17N.lazyRender @ TweenMax.min.js:16O._updateRoot.D.render @ TweenMax.min.js:16n.dispatchEvent @ TweenMax.min.js:16g @ TweenMax.min.js:16 612TweenMax.min.js:17 Uncaught TypeError: Cannot assign to read only property 'backgroundColor' of #scblockn.render @ TweenMax.min.js:17n.render @ TweenMax.min.js:16O._updateRoot.D.render @ TweenMax.min.js:16n.dispatchEvent @ TweenMax.min.js:16g @ TweenMax.min.js:16

Firefox: Visually: The markers are still visible, and now in the right place, but no action happens. Errors: Nothing showing up on the console

Any of this makes sense?

[janpaepke]

Have you tried following the troubleshooting guide? Particularly the part about getting your tweens to run before even attaching it to ScrollMagic?

My guess here is that something is preventing GSAP from being loaded properly. But it's a shot in the dark..