B. Ihab Posted May 5, 2021 Share Posted May 5, 2021 Hi dear, This is my first post in this Forum, I apologize for my ignorance, I joined a video to my request, as you can see in the video, there are 2 sections ( Call to Action + A second Section with text and Images ) I have pinned a laptop to the scroll, the thing I want to achieve is that I want to change the laptop screen in the second section every time the text change, I spent 4 days trying to achieve that effect without any result, if someone can just guide me it will be a great help for me. 2021-05-05 11-38-10.m4v See the Pen xxqxzez by B-Ihab (@B-Ihab) on CodePen Link to comment Share on other sites More sharing options...
Cassie Posted May 5, 2021 Share Posted May 5, 2021 Hey there! We can usually help more effectively if you provide a minimal demo, codepen is great for this. If you haven't used codepen before, here's a post explaining how. 1 Link to comment Share on other sites More sharing options...
B. Ihab Posted May 6, 2021 Author Share Posted May 6, 2021 Thank you Cassie for your quick response, I provided a demo like suggested, if I need to provide anything else feel free to notice it, If my code need some optimization or can be improved please tell me. 1 Link to comment Share on other sites More sharing options...
Solution Cassie Posted May 6, 2021 Solution Share Posted May 6, 2021 Hi there - this is quite an overcomplicated approach. The best way I find to approach scroll animations is to create a timeline that animates how you want it to - and then hook that timeline up to the scroll. Here, take a look at this example - the first text fades out, then immediately afterward the next text fades in and up, and at the same time ( '<' ) the images swop out using opacity. See the Pen 1d5548ccffebad7019b6936af6bd8f56?editors=0010 by cassie-codes (@cassie-codes) on CodePen The process I tend to lean on is - Position everything nicely from the start, layout is key! - Plan out a timeline step by step on paper or in pseudo code - Write the timeline - Then hook up with scrolltrigger 4 Link to comment Share on other sites More sharing options...
Cassie Posted May 6, 2021 Share Posted May 6, 2021 You can make this timeline last a longer 'amount of time' or scrolling distance, by moving the end marker further down the page. 3 Link to comment Share on other sites More sharing options...
B. Ihab Posted May 6, 2021 Author Share Posted May 6, 2021 That was really helpful, I'll review my entire code and try to follow your advices, thanks a lot. 1 Link to comment Share on other sites More sharing options...
Cassie Posted May 6, 2021 Share Posted May 6, 2021 Glad I could help! Good luck with it. ☺️ 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