Pin Spacing Adjustments | Chrome Render/z-index Issue | Tween Inside Timeline Scroll Trigger

[nevanthegreat 4 Likes (Newbie)]

Hey Club Greensock! I was just wondering if I could get some assistance on my project.

 

I have a pretty good base (I think). I just had a couple questions and was wondering if someone might be able to give me some ideas and direction.

 

1.  In my pinned timeline, I have a container that I scale down. I am wondering how might one go about how to decrease the pin spacing as this timeline progresses? As you can see in the image, there is a huge gap due to the scale down. Is there a way to adjust the pinspacing so the final resting place of the animation obeys the global defaults I have setup for the section container? If that makes sense?
2. Specifically if you look at my pen on chrome, there is a weird thing it's doing where there's like a slight margin that is revealing the background slide as it moves. It doesn't do this on FF. Tell me if there is a better way to do this, but basically I have the laptop as a png, the screen area is the transparency, and I have a white bg on the sides of the screen image (to hide the slides) and then I did an overflow: hidden on that laptop png. I know there's got to be a better, more flexible way of doing this. Any suggestions?
3. I would like to setup a global tween (".reveal-up") that I can apply to be flexible to many elements on the page (sort of how like green sock does it here). I have it setup on the header and text in the section with the boxes that rotate and "fly-in". It plays, but it doesn't play when in view, rather it plays at the top of the page. How can I approach this to be more flexible so it plays when in view and also be able to apply it to other elements?
4. Tweening inside my scroll trigger timeline. Specifically I am talking about the text "Lorem Ipsum" that is layerd above the laptop. I know how to make it part of the scroll, but is there a way to trigger it on scroll, but not to play with the scroll? If that makes sense. How would one go about triggering it on scroll, but to play through regardless of the users inputs on the scroll and additionally to reset?
5. I am not sure if this is a thing, but when the browser resizes, there's some funkiness that happens to the timelines. Is there a way that I can make it more flexible on browser resize so the funkiness doesn't happen? 

 

Thank you for any help.

 

Here's a couple images to assist in my questions:

See the Pen RwadVNd by EvanScorpion (@EvanScorpion) on CodePen

[ZachSaucier 7,070 Likes (Superhero)]

1 hour ago, nevanthegreat said:

I am wondering how might one go about how to decrease the pin spacing as this timeline progresses?

That's not the way to go about doing something like that. What you could do change one or more of the following:

• The transformOrigin of your element so it scales down to a different location in your viewport.
• Pin a different part of your container.
• Add a translation along with your scaling.

2 hours ago, nevanthegreat said:

there is a weird thing it's doing where there's like a slight margin that is revealing the background slide as it moves

This is 100% a Chrome rendering bug. Looks like something is being rounded incorrectly. Apply overflow-x: hidden; to your .screen to hide it.

 

2 hours ago, nevanthegreat said:

It plays, but it doesn't play when in view, rather it plays at the top of the page. How can I approach this to be more flexible so it plays when in view and also be able to apply it to other elements?

It actually works properly. But your animation is so fast it's hard to catch. It might be better to change the start position to something like "center 80%" to have it be on screen more.

 

2 hours ago, nevanthegreat said:

How would one go about triggering it on scroll, but to play through regardless of the users inputs on the scroll and additionally to reset?

Don't use a scrub. Use toggleActions. 

 

2 hours ago, nevanthegreat said:

I am not sure if this is a thing, but when the browser resizes, there's some funkiness that happens to the timelines. Is there a way that I can make it more flexible on browser resize so the funkiness doesn't happen? 

You'll have to be more specific, I don't know what you're talking about.

 

In general it's best to try to stick to one question per thread when possible. Asking us to debug several aspects of a project like this make it harder for us to help and in most cases you'll actually figure out the issue yourself when you try to make a more minimal demo  

[nevanthegreat 4 Likes (Newbie)]

@ZachSaucier

 

Hey Zach thank you for your thoughtful reply.

 

Sorry for putting so much into one...so let me just start with one.

 

So for #3, I tried turning on the markers and setting the start to the one you suggested and it still seems like the pinspacing on both my timelines is messing it up still. I see where the markers come up on the document and it's like the pinspacing isn't playing nice with those particular elements. Am I overcomplicating this? Is it maybe because I need to put the ScrollTrigger in the timeline instead of in it's own method? I apologize I am a complete noob.

[ZachSaucier 7,070 Likes (Superhero)]

You should create ScrollTriggers in the order that they are needed in or user refreshPriority to order them property. In this case that's a little tricky because you have pinned elements surrounding non-pinned ScrollTriggers. Perhaps it'd be easiest to use a data-attribute to set the refreshPriority of elements? Simply moving the contentSelector.forEach((element) => { code to the end helps.

[nevanthegreat 4 Likes (Newbie)]

1 hour ago, ZachSaucier said:

You should create ScrollTriggers in the order that they are needed in or user refreshPriority to order them property. In this case that's a little tricky because you have pinned elements surrounding non-pinned ScrollTriggers. Perhaps it'd be easiest to use a data-attribute to set the refreshPriority of elements? Simply moving the contentSelector.forEach((element) => { code to the end helps.

Thank you so much Zach! I had no idea that needed to be at the end. That seemed to work perfectly.

I've since updated my pin and I think I have the tween down on "Lorem Ipsum" (in the hardware container) to work right. I tried to attach it to the hardware timeline so that it is based off of that scroll trigger, but I think I may be doing it wrong because it happens so fast. Any tips for this part?

[ZachSaucier 7,070 Likes (Superhero)]

The issue is that you first have a .from() tween which sets ".animated-header" to 0 when it initialized. Then you have a .to() tween when animates from the current opacity value of 0 to a value of 0. Hence it visually jumps. That's actually one of the most common GSAP mistakes. To fix it, just use a .fromTo() instead.

hardwareTimeLine
  .fromTo(".animated-header", { autoAlpha: 1 }, { autoAlpha: 0 })

 

Side notes:

• Please use the "fork" button on CodePen when making new versions so that context is retained for future readers of the forum.
• I recommend using the built in formatter so your code is more readable. 
• It's best to avoid inline styles in your HTML.

[nevanthegreat 4 Likes (Newbie)]

44 minutes ago, ZachSaucier said:

The issue is that you first have a .from() tween which sets ".animated-header" to 0 when it initialized. Then you have a .to() tween when animates from the current opacity value of 0 to a value of 0. Hence it visually jumps. That's actually one of the most common GSAP mistakes. To fix it, just use a .fromTo() instead.

hardwareTimeLine
  .fromTo(".animated-header", { autoAlpha: 1 }, { autoAlpha: 0 })

 

Side notes:

• Please use the "fork" button on CodePen when making new versions so that context is retained for future readers of the forum.
• I recommend using the built in formatter so your code is more readable. 
• It's best to avoid inline styles in your HTML.

Thank you Zach. Good points. This also worked for me and I think I am understanding this better now.

 

I was just doing the inline styles for some example sections, but I definitely will not do that in the finished product.

 

I wanted to continue an earlier question concerning the chrome bug. I tried messing with the overflows and that didn't seem to work. I was reading https://stackoverflow.com/questions/13628832/chrome-rendering-bug about the box-sizing property and that didn't seem to work either...

 

Any other ideas? Should I start a new thread?

[ZachSaucier 7,070 Likes (Superhero)]

2 hours ago, nevanthegreat said:

I tried messing with the overflows and that didn't seem to work.

I recommend hiding overflow on the .screen element like I said and then translating the content within it (instead of the .screen element itself like you are currently doing). That way you can work around the rendering bug.

[nevanthegreat 4 Likes (Newbie)]

19 hours ago, ZachSaucier said:

I recommend hiding overflow on the .screen element like I said and then translating the content within it (instead of the .screen element itself like you are currently doing). That way you can work around the rendering bug.

I see what you mean. That seemed to work nicely. Had to adjust some other things about it too, but that seemed to work out pretty well. Thanks a lot Zach!