pattocheu Posted January 5, 2021 Share Posted January 5, 2021 Hi everybody, My first topic ! First off all, thank you for all support we can find on this forum. I'm a newbie on JavaScript and Gsap, but I've done my first code pen for my website and i have a question. I would like to know the right syntax in order to replace "color" by "images". On my code pen when i click on the viewport i change the color of the box but for my website i would like to change an image. Sorry for my english, i'm french 😀 Thank you. Patrick. See the Pen WNGJYzx by pattocheu (@pattocheu) on CodePen Link to comment Share on other sites More sharing options...
ZachSaucier Posted January 6, 2021 Share Posted January 6, 2021 Hey Patrick and welcome to the GreenSock forums. Thanks for supporting GreenSock with a Club GreenSock membership! Usually when you want to transition between images in the same position it's best to layer them and then fade in the new image that you want to show. If you only switch the src then you'll have to wait for the new image to load which isn't a good experience. So I'd position the images absolutely all on top of each other at the start with some hidden then animate their autoAlpha in your tween that you have. You should also set the zIndex of the new image to one higher than the one visible to make sure it's on top. 1 Link to comment Share on other sites More sharing options...
pattocheu Posted January 24, 2021 Author Share Posted January 24, 2021 Hi @ZachSaucier many thanks for your advice. I will work accordingly your idea, and paste my code pen once it will be done. Thank you. 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