Unable to fix pin spacing

[pabschabs]

Hi

I am trying to build out a design around 2 svg elements. The elements will move in and out of the screen revealing things like a video when you scroll down. 

I would then roll the elements back in and they would be used as a background for text.

Unfortunately i am quite stuck on the pin spacing. I have tried a few suggestions but feel there is something basic i am missing and simply cannot identify.

How can i make these elements cover the entire screen and as you scroll they roll away revealing the video?



Thank you!

Paul

See the Pen NWYXZra by paul-cullen (@paul-cullen) on CodePen

[Cassie]

Hi there! Welcome to the forums.

 

GSAP wise you can just use one ScrollTriggered timeline for both your animations
 

gsap.timeline({
 scrollTrigger: {
  trigger: "#section_1",
  ...
}
}).to(".circle_container_2",  { width: "140%", x: "-75%", rotation: -60})
  .to(".circle_container_1",  { width: "120%", x: "-75%", rotation: 45}, '<');

I'm not certain what you're after visually though. Sounds like more of a styling conumdrum! You probably just need to position the SVG as a fixed element?

[pabschabs]

When you say a fixed element do you mean in img tags? if so that doesn't change anything. I just avoided hosting the images.
 

Thanks for your help though!


 

[pabschabs]

When you say a fixed element do you mean in img tags? if so that doesn't change anything. I just avoided hosting the images.

 

 

Thanks for your help though!


 

[pabschabs]

I have edited the original codepen and tweaked the code as you suggested.

 

Thanks

 

Paul

[Cassie]

No I meant using position:fixed to position the SVG over the whole screen so everything will scroll underneath it? Not quite sure what you're after though so this might not be helpful.

 

Also you can't use 'width' for groups in SVG. Maybe you're looking for scale? And as you're using percents for the x movement you can use xPercent instead.
 

.to(".circle_container_2",  { scale: 4, xPercent: -75, rotation: -60})

 

[pabschabs]

I will try all of these and get back to you!

What about the length of time it takes to get to the next section? The one in blue? Do you know what is increasing the scroll distance so much?

[pabschabs]

What i would like to have is just as the circles are rolling out the video is fading in. 

 

Currently the circles roll out, then we continue to scroll for days and then the video comes into view.

[GreenSock]

It was just a typo in your code: 

// BAD
pinspacing: false

// GOOD
pinSpacing: false

See the Pen yLKvORo?editors=0010 by GreenSock (@GreenSock) on CodePen

 

Does that help? 

[pabschabs]

OMG thank you so much!

 

Sometimes when you stare at the same screen for so long you miss the most obvious things!

[GreenSock]

It happens to all of us