Share Posted July 24, 2019 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 More sharing options...
Share Posted July 24, 2019 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..."] 3 Link to comment Share on other sites More sharing options...
Share Posted July 24, 2019 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 comment Share on other sites More sharing options...
Share Posted July 24, 2019 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 comment Share on other sites More sharing options...
Author Share Posted July 24, 2019 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 comment Share on other sites More sharing options...
Share Posted July 24, 2019 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 1 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now