Separating divs at a specific point when scrolling

[LM17]

Hey Guys,

 

Very new to gsap and scrollmagic.

 

I've managed to work it so my heading scales when scrolling, I'm happy with that. 

What I want to do and don't know how is when the scaled text gets to a certain point I want the two divs leftdiv  and rightdiv  to both separate (almost like a window). 

Can someone assist with this.

 

See the Pen poVwezx by luke-mancuso (@luke-mancuso) on CodePen

[mvaneijgen]

Hi @LM17 welcome to the forum!

 

ScrollMagic is a third party plugin and is not something that GSAP supports, but great news GSAP has it's own scroll plugin called ScrollTrigger which is build for GSAP and is really easy to use! It is up to you which one you like to use, so if you insist on using ScrollMagic be sure to hop over to their support page https://nerdpool.io/support/scrollmagic

 

I also see you're using the syntax of GSAP 2, but are loading GSAP 3 take a look at the migration guide

  

Now that I look at your pen even closer, you're loading a lot of duplicated libraries!  I've add some comments behind them. 

<script src="//cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/ScrollMagic.min.js"></script> // not a GSAP libary
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/plugins/animation.gsap.min.js"></script>// not a GSAP libary
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/plugins/debug.addIndicators.min.js"></script> // not a GSAP libary
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.1/ScrollTrigger.min.js"></script> // GSAP scroll libary works like ScrollMagic, but is build for GSAP. Needs to be loaded after gsap.min.js
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.1/gsap.min.js"></script> // The latest GSAP version
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TweenMax.min.js"></script> // A really old version of GSAP, dont use this one!

I would take a step back and watch some tutorials to get a better understanding of what you could do. This is a great introduction on ScrollTrigger  , if you choose to use it (you're loading it) and also take a look at the demo page, there are a lot of examples that can get you up and running https://greensock.com/st-demos/