Kamran Posted June 1, 2021 Share Posted June 1, 2021 Hi friends, I'm new. There are a few texts. Text must be fixed in the middle. I want the text to scale as you scroll down the page(opacity 0 to 1). Thank you for helping me. Here is example from apple website.https://www.apple.com/ipad-pro/ Link to comment Share on other sites More sharing options...
Cassie Posted June 1, 2021 Share Posted June 1, 2021 Hi there Kamran! If you'd like help with this, could you post a minimal demo of what you've tried and what you're struggling to understand? We'd love to help you figure this out but we don't have the capacity to create custom animations from scratch. If you're stuck with where to start, try the scrollTrigger docs or the scrollTrigger demos ----- If you would like the solution coded for you, I recommend heading over to our freelance jobs board and posting there. 3 Link to comment Share on other sites More sharing options...
Kamran Posted June 2, 2021 Author Share Posted June 2, 2021 Hi Cassie, Thank you for your reply. I'm trying to achieve that ipad landing page animation effect but its not the same that I have made Here is codepen link: See the Pen XWMZJzj by camraan (@camraan) on CodePen Link to comment Share on other sites More sharing options...
Trapti Posted June 2, 2021 Share Posted June 2, 2021 Hey, @Kamran Here is a quick fix on what I understood you need See the Pen yLMvYeE by tripti1410 (@tripti1410) on CodePen . You modify the values according to your need. Suggestions: 1. You are using older versions of GSAP and Scroll. 2. Markup has unnecessary elements(divs). h1 tag should be 1 in a page. 2 Link to comment Share on other sites More sharing options...
Kamran Posted June 2, 2021 Author Share Posted June 2, 2021 Hi @Trapti, Thank you for you reply and recommendations. Really appreciated. Actually i wanted to animate paragraphs one by one just like attached gif. Currently on scroll both paragraphs are animating. I took inspiration from apple website. Can you please guide me how can i achieve that effect. Here is live link, you can see working animation. Just scroll down to M1, XDR,5G section. https://www.apple.com/ipad-pro/ Link to comment Share on other sites More sharing options...
Trapti Posted June 2, 2021 Share Posted June 2, 2021 @kamran If you see the code both the paragraphs are being targeted separately. You need to adjust the time and distance for both of them according to your need. If you are not familiar with syntax check ScrollTrigger Docs. 3 Link to comment Share on other sites More sharing options...
Kamran Posted June 3, 2021 Author Share Posted June 3, 2021 @Trapti Thank you very much.. I appreciate your guidance and time. I will definitely look into docs. Link to comment Share on other sites More sharing options...
Mukhriddin Posted May 29, 2022 Share Posted May 29, 2022 On 6/2/2021 at 10:47 AM, Trapti said: Hey, @Kamran Here is a quick fix on what I understood you need . You modify the values according to your need. Suggestions: 1. You are using older versions of GSAP and Scroll. 2. Markup has unnecessary elements(divs). h1 tag should be 1 in a page. Hi there. How can I set the Main title pinned to top? Now it is pinned until its scroll position is over. See the Pen OJQQoZp by Mukher (@Mukher) on CodePen Link to comment Share on other sites More sharing options...
GreenSock Posted May 30, 2022 Share Posted May 30, 2022 I'm not exactly sure what you want, but something like this?: See the Pen OJQQqaJ?editors=0010 by GreenSock (@GreenSock) on CodePen Beware that if an element gets position: fixed when it has an ancestor with a transform applied, it won't be fixed to the viewport - it'll be fixed to that ancestor element. That has nothing to do with GSAP - it's just how CSS works. So you can set pinType: "transform" if you need to. By the way, it is always best to just start your own thread rather than posting in an old thread with a new question. Link to comment Share on other sites More sharing options...
Mukhriddin Posted May 30, 2022 Share Posted May 30, 2022 1 hour ago, GreenSock said: I'm not exactly sure what you want, but something like this?: Beware that if an element gets position: fixed when it has an ancestor with a transform applied, it won't be fixed to the viewport - it'll be fixed to that ancestor element. That has nothing to do with GSAP - it's just how CSS works. So you can set pinType: "transform" if you need to. By the way, it is always best to just start your own thread rather than posting in an old thread with a new question. yes, something like this. But I wanted to pin it to the viewport. pinType: 'transfrom' didn't help, by the way Link to comment Share on other sites More sharing options...
GreenSock Posted May 30, 2022 Share Posted May 30, 2022 25 minutes ago, Mukhriddin said: But I wanted to pin it to the viewport Isn't that exactly what my demo is doing? 25 minutes ago, Mukhriddin said: pinType: 'transfrom' didn't help, by the way Right, but it would if you tried pinning the first <h1> like you were originally doing. Link to comment Share on other sites More sharing options...
Mukhriddin Posted May 30, 2022 Share Posted May 30, 2022 10 minutes ago, GreenSock said: Isn't that exactly what my demo is doing? Right, but it would if you tried pinning the first <h1> like you were originally doing. Right now, it is pinning for some time, exactly untill end. What I want is pin it always once scrollTrigger starts Link to comment Share on other sites More sharing options...
GreenSock Posted May 30, 2022 Share Posted May 30, 2022 17 minutes ago, Mukhriddin said: What I want is pin it always once scrollTrigger starts If you didn't want it to end, just set end: "max". Or some huge number. See the Pen LYQQoVG?editors=0010 by GreenSock (@GreenSock) on CodePen Is that what you mean? 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