Jump to content

Search In
  • More options...
Find results that contain...
Find results in...


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

Share this post

Link to post
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

Share this post

Link to post
Share on other sites

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

  • Like 1

Share this post

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    No registered users viewing this page.