Ilse

Scrollmagic

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!

 

Ilse

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:

 

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

 

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

 

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

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.