Moving an item with translate3d based on scroll-position

[Its_Lefty 0 Likes (Newbie)]

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

[Shrug ¯\_(ツ)_/¯ 67 Likes (Contributor)]

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..."]

[ZachSaucier 467 Likes (Leader)]

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.

[ZachSaucier 467 Likes (Leader)]

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.

[Its_Lefty 0 Likes (Newbie)]

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

[mikel 1,823 Likes (Superhero)]

Hey @Its_Lefty,

 

Welcome to the GreenSock Forum.

 

Here is another approach to achieve the desired.

 

See the Pen JgXBbw by mikeK (@mikeK) on CodePen

 

But please note the effects of such scrolling and debounce or throttle the event - more here "debouncing-throttling-explained-examples"..

 

Happy tweening ...

Mikel