Change Images to my own

[AnnaMakesMagic]

Hey thanks for your help! 

 

I'm a new coder and just discovered Green Sock. 

 

I'm trying to plug this into my website on Square Space and need help changing the images. 

 

I have several images uploaded to Imgur with url links ready to go but I can't seem to find out where to place those in html (after the <display layer> or <display block> divs), in css, or  Javascript by replacing the code at the bottom that links to a set of randomized photo options. 

 

At this point I am lost and would appreciate any help you can give me. 

 

Thanks! 

Anna 

See the Pen wvKwZXG by GreenSock (@GreenSock) on CodePen

[akapowl]

 

Hello Anna, welcome to the GSAP forum!

 

In JS, instead of the line that sets the random image from lorem picsum, you could create an array with all your image-urls and then adjust that image-setting line to target the element with the respective index, like so maybe:
 

// instead of this..

gsap.set('.gridBlock', {backgroundImage: i => `url(https://picsum.photos/${size}/${size}?random=${i})`});



//... you could do this for your pre-stored images

const imageArray =  [
  'url(https://picsum.photos/id/231/400/300)',
  'url(https://picsum.photos/id/232/400/300)',
  'url(https://picsum.photos/id/233/400/300)',
  'url(https://picsum.photos/id/234/1600/1200)',
  'url(https://picsum.photos/id/235/400/300)',
  'url(https://picsum.photos/id/236/400/300)',
  'url(https://picsum.photos/id/237/400/300)',
  'url(https://picsum.photos/id/238/400/300)',
  'url(https://picsum.photos/id/239/400/300)'
]

gsap.set('.gridBlock', {backgroundImage: i =>  imageArray[i] });

 

Then you'll probably also have to change the bigImg url to e.g. the url of your largest image, so the 'pre-loading' type of functionality of that pen will still work out as intended.

 

See the Pen oNdXpOE by akapowl (@akapowl) on CodePen

 

 

Or, since after all, all that line does is set a background-image to the respective div-element, you could just do it manually via CSS instead.

 

.gridLayer:nth-child(1) .gridBlock {
  background-image: url(https://your.url/image1.jpg)
}

.gridLayer:nth-child(2) .gridBlock {
  background-image: url(https://your.url/image2.jpg)
}

...

See the Pen VwxLybz by akapowl (@akapowl) on CodePen

 

 

[AnnaMakesMagic]

Thanks so much for your help. It has helped me so far! 

 

My only issue now is this page section is overflowing into the section before it. 

 

I've had this issue before when using javascript and just gave up because when I added it to one section it the entire formatting of the page unravel. 

 

In this case it's not terrible but is causing an issue because it's covering text. See my website elephant-raspberry-f4jz.squarespace.com/about us (about 2/3 of the way down the page)

 

If you could give me any advice on how to move the section down and/or other solutions that would be amazing. 

 

Again, thank you so much! You've given me hope!

 

 

[AnnaMakesMagic]

Whoops. Here is the codepin that I've linked to in my coding block.

See the Pen KKRdzLW by annamakesmagic (@annamakesmagic) on CodePen

[akapowl]

3 hours ago, AnnaMakesMagic said:

elephant-raspberry-f4jz.squarespace.com/about us

 

Actually on that website (you meant about-us, right? ...looks like you forgot the hyphen) the section doesn't animate at all for me on desktop, and while it does animate on mobile, it gets triggered way too late. But debugging live-websites is not really within the scope of this forum, as there is too much involved apart from GSAP, so I can't really help with that - just thought I'd let you know. Also, your codepen doesn't reflect the issue you mentioned, so this will be more of a guess of mine for now.

What you could do with regard to sections overflowing/intersecting, is set pin: true instead of pin: '.grid' - which will then pin the .grid-container  that is set as the trigger and should help with pin-spacing being applied properly. With regard to the overflowing, in CSS you could set overflow: hidden on that .grid-container and maybe an additional overflow-x: hidden on the body could also be helpful.

 

See the Pen rNvOzoO by akapowl (@akapowl) on CodePen

 

 

I'm not sure how helpful this is going to be for you though, since I can not really make out what the issue is on your website.

Some additional sidenotes:

• If you have additional questions that deviate from your original question, usually it's best to create a new topic for those, so other users that might run into the same problem can easier find help and benefit from your question asked, too.
   
• I saw that you were using the latest beta files from the codepen demo for both GSAP and ScrollTrigger on your website. I would suggest not doing that when you are going live with that website, since those are beta files after all, so they get updated frequently and might introduce breaking bugs to your website. Here's where you can find CDN links to the latest versions, that you can include just like you did before
  
  https://cdnjs.com/libraries/gsap