Jump to content
GreenSock

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

Moving an item with translate3d based on scroll-position

Recommended Posts

Hi there!

I'm trying to create a scrolling effect like this:

Scroll / Parallax effect
 

If you scroll the page down and the image is in the viewport, it will receive a dynamic translate3d on the y-axis between 0% and max. +25% (based on scroll ). If you scroll the page up, it will be reserved (up to -25%).

I'm still a JS beginner, below you can see my attempt with GASP/ScrollMagic/TweenMax.

 

Unfortunately this is still not like in the example above. The parallax-item stops moving at a certain point although it is still in the viewport and you keep on scrolling. Moreover the speed is too fast.

I guess I have to modify the offset and duration ScrollMagic-Options (?) but I don't know what I should exactly do.
I know that ScrollMagic and animation.gsap are not GSAP products but maybe someone can help me.

 

Thanks in advance! :)

See the Pen wVGYmw by ItsLefty (@ItsLefty) on CodePen

Link to post
Share on other sites

Hi @Its_Lefty,

 

Welcome to the forums. Based upon the example site you showed, I feel the below examples may help you better achieve your goals.

 

See the Pen dWvRBX by jbsmith731 (@jbsmith731) on CodePen


See the Pen xorjLK by ethanwalpole (@ethanwalpole) on CodePen


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

 

Hopefully something within those examples will help your efforts. Again welcome to the forums.

 

[ EDIT: Did some formating change on the forum that is parsing the links? Instead of just posting a link it parses it to "See the pen..."]

  • Like 3
Link to post
Share on other sites
15 minutes ago, Shrug ¯\_(ツ)_/¯ said:

Did some formating change on the forum that is parsing the links?

 

Yes, the forums currently automatically convert CodePen links to demos, even when you have an inline link.

Link to post
Share on other sites

Hey @Its_Lefty and welcome to the forums!

 

There's a whole article on using GSAP with ScrollMagic that you can check out here. Example 8 in the article is similar to what you're trying to do.

Link to post
Share on other sites

Thanks so far. I've modified my script (added triggerHook: 1 and duration: '100%').
Now my parallax-item starts to move as soon it does hit the viewport. But if you keep on scrolling, it does immediately stop as soon the trigger 1 reaches end 1.
 

On this page the image keeps on moving until it is completely out of the viewport. How can I achieve this?

Check out the current attempt: 

See the Pen wVGYmw by ItsLefty (@ItsLefty) on CodePen

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.

×