Jump to content



Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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!



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

Link to comment
Share on other sites

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:




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.




  • Like 4
Link to comment
Share on other sites

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

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.