Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
hybreeder

How to change the background image when scroll

Recommended Posts

Hello hybreeder,

 

I hope that you are just using those images for an example/learning purpose. It's illegal to copy assets from other's websites. 

 

With that being said, the biggest issue is that you are trying to use ScrollMagic but didn't include it in the pen. You should include the following assets:

ScrollMagic isn't a GreenSock product and we don't officially support it in these forums. Maybe this post by our very own Craig can help you:


If you have any GSAP-specific questions, we'd love to help. Good luck with your project!

Share this post


Link to post
Share on other sites

Thanks for the reply @ZachSaucier

 

Yes images are only for testing purpose.

 

I added both links again

Share this post


Link to post
Share on other sites

Hey @hybreeder,

 

You can also use the intersectionObserver - for example:

 

See the Pen bGGqgQj by mikeK (@mikeK) on CodePen

 

Happy tweening ...

Mikel

 

  • Like 1

Share this post


Link to post
Share on other sites

Hi @mikel,

 

Thanks for the code pen.

The issue is if I go down and come back to top then it's not going to the previous one. I mean

On page load

1 -> go down -> 2

2-> go up-> 1

Share this post


Link to post
Share on other sites

Hey @hybreeder,

 

Unfortunately, I do not understand your comment.

Here are two other concepts:

 

intersectionObserver and a Threshold array

See the Pen RwwpxxB by mikeK (@mikeK) on CodePen

 

ScrollMagic

 

See the Pen JjjWeyj by mikeK (@mikeK) on CodePen

 

Happy tweening ...

Mikel

  • Like 3

Share this post


Link to post
Share on other sites

@mikel

 

Thanks for the answer. Really appreciate your support. I think this is enough for me to implement on my project.

Share this post


Link to post
Share on other sites

@mikel I tried your code pen with mine, but not working like a reference link.

Share this post


Link to post
Share on other sites

Hey @hybreeder,
 

What do mean saying 'not working like a reference link' ?

could you show your case in a CodePen?

 

Best regards

Mikel

Share this post


Link to post
Share on other sites

@mikel, Sorry for miss communication.

 

I updated the code here. What I am doing Is, on page load I have to display image from css(OR image tag) and once indicator start 1 cross the target then display the image form GSAP script and it will override the image which coming from the CSS and vise and versa

This is my example link section  "How it works"  https://www.sketchdeck.com/

 

See the Pen JjjWoyy by Narendra_verma (@Narendra_verma) on CodePen

Share this post


Link to post
Share on other sites

@mikel, I am appreciate your help and support and sorry for the late reply.

 

Is there any way to use png instated of svg?

Share this post


Link to post
Share on other sites
2 hours ago, hybreeder said:

Is there any way to use png instated of svg?

Yep. Just switch out the elements and the timeline for what you want instead :) 

  • Haha 1

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.

×