Jump to content
Search Community

Changing images when scrolling

B. Ihab test
Moderator Tag

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 comment
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 comment
Share on other sites

  • Solution

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 comment
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.
×
×
  • Create New...