dtpmike2 Posted October 13, 2021 Share Posted October 13, 2021 Hi, I need to make a block in which the picture scrolls and in certain places the text begins to scroll along with the image- I designated it as text for the section in the image. I also have a problem with scrolling in the iPhone block.. I don't quite understand how to do it correctly.. See the Pen qBXdMyb by dtpmike (@dtpmike) on CodePen Link to comment Share on other sites More sharing options...
OSUblake Posted October 13, 2021 Share Posted October 13, 2021 Welcome to the forums @dtpmike2 You probably shouldn't be using onUpdate for something like that. Just make an animation on your timeline that moves it. It will probably help if you focus on your animations first without using ScrollTrigger or any other 3rd party libraries like smooth scrollbar first. Once your animation works the way want, then add in all the scrolling stuff. See the Pen qBXdLZW by GreenSock (@GreenSock) on CodePen 3 Link to comment Share on other sites More sharing options...
dtpmike2 Posted October 14, 2021 Author Share Posted October 14, 2021 10 hours ago, OSUblake said: Welcome to the forums @dtpmike2 You probably shouldn't be using onUpdate for something like that. Just make an animation on your timeline that moves it. It will probably help if you focus on your animations first without using ScrollTrigger or any other 3rd party libraries like smooth scrollbar first. Once your animation works the way want, then add in all the scrolling stuff. Thx. But i have another one trouble. How get correct end.. I'll try img height - img wrapper, but end value incorrect(too big) Link to comment Share on other sites More sharing options...
OSUblake Posted October 14, 2021 Share Posted October 14, 2021 Do you mean like this? .to(".iphone-scroll-image img", { yPercent: -100, y: $('.iphone-scroll-image').height() }) 1 Link to comment Share on other sites More sharing options...
dtpmike2 Posted October 14, 2021 Author Share Posted October 14, 2021 3 hours ago, OSUblake said: Do you mean like this? .to(".iphone-scroll-image img", { yPercent: -100, y: $('.iphone-scroll-image').height() }) yes! but i dont understand how set opacity 1 to .text-pin while .text-pin in view See the Pen jOLbqqJ by dtpmike (@dtpmike) on CodePen Link to comment Share on other sites More sharing options...
OSUblake Posted October 14, 2021 Share Posted October 14, 2021 If you're trying to fade them in, set their opacity to 0 in your CSS. You will probably have to create a trigger each one. Some pseudo code.... gsap.utils.toArray(".text-pin").forEach(el => { gsap.timeline({ scrollTrigger: { trigger: el, ... } }) .to(el, { opacity: 1 }) ... }); 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