Scrollmagic

[Ilse]

Hi Guys,

 

I want to add a scroll magic effect on the website I'm currently working on. 

First I wanted to get it working in a codepen test. I followed some tutorials and tried to figure out some codepens.

 

What I want to achieve is to let the square move when the element with id: move is triggered.

At the moment the tweening starts immediately when the page is loaded. I'm struggling with getting the code work and I don't see what I'm missing.

 

I hope someone can help me.

 

Thanks in advance!

 

Ilse

See the Pen RxZaXQ by ilsethijs (@ilsethijs) on CodePen

[PointC]

Hi @Ilse ,

 

There are a few problems to correct. First, you've got really old versions of GSAP, jQuery and ScrollMagic. It's always best to use the latest version of everything. The reason the tween was triggering immediately is you were missing the GSAP plugin for ScrollMagic. It allows ScrollMagic to take control of the tweens. More info here:

 

http://scrollmagic.io/docs/animation.GSAP.html

 

Here's a fork of your pen with current scripts and the addition of that extra plugin.

 

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

Hopefully that helps. Happy tweening.

 

 

[Ilse]

Oh wauw, that is so stupid of me, should have checked that. Thanks for you help @PointC !!