Jump to content

Search In
  • More options...
Find results that contain...
Find results in...
B. Ihab

Changing images when scrolling

Go to solution Solved by Cassie,

Recommended Posts

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.


See the Pen xxqxzez by B-Ihab (@B-Ihab) on CodePen

Link to post
Share on other sites

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.

  • Thanks 1
Link to post
Share on other sites

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.



  • Like 1
Link to post
Share on other sites

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

  • Like 4
Link to post
Share on other sites

You can make this timeline last a longer 'amount of time' or scrolling distance, by moving the end marker further down the page.

  • Like 3
Link to post
Share on other sites

That was really helpful, I'll review my entire code and try to follow your advices, thanks a lot.

  • Like 1
Link to post
Share on other sites

Glad I could help! Good luck with it. ☺️

Link to post
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    No registered users viewing this page.