Jump to content
Search Community

Moving an item with translate3d based on scroll-position

Its_Lefty test
Moderator Tag

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 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 comment
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 4
Link to comment
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: 

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.
×
×
  • Create New...