ScrollTrigger: trouble with pinning

[Carl]

I'm working on a lesson for pinning and getting some weird results in the attached pen.

 

It seems that when the animation starts the #car's container div .carContainer collapses making the white background go away. 

 

Also the "more text" is moving up while the animation is being pinned and scrubbed, and then oddly jumps back down when the animation is complete. I was expecting the default pinSpacing to keep the "more text" hidden and only come into view when the car becomes un-pinned.

 

Also, when the animation gets unpinned you will see the car is under its container div instead of inside it.

 

It's likely there is some css setting I'm missing or something else I'm doing wrong, but stumped at the moment.

 

 

Thanks for you help

 

best viewed on desktop

 

EDIT: The demo above has been heavily modified since this thread started

See the Pen eYJyZgv?editors=0010 by snorkltv (@snorkltv) on CodePen

[ZachSaucier]

Hey Carl.

 

12 minutes ago, Carl said:

It seems that when the animation starts the #car's container div .carContainer collapses making the white background go away. 

 

Also the "more text" is moving up while the animation is being pinned and scrubbed, and then oddly jumps back down when the animation is complete. I was expecting the default pinSpacing to keep the "more text" hidden and only come into view when the car becomes un-pinned.

These are the same cause - the container's height is collapsing. Apparently there is a bug where display: inline is set instead of display: inline-block when an SVG element is pinned. If you use your dev tools to switch the display to inline-block for the pin-spacer you'll see what it should look like.

 

Are you wanting the car to move outside of the white background? I would think you would use the .carWrapper as the trigger and pin element instead...

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

 

[Carl]

thanks for the speedy help.

 

i realized a few minutes after posting that what you said here is most likely my big issue.

 

7 minutes ago, ZachSaucier said:

Are you wanting the car to move outside of the white background? I would think you would use the .carWrapper as the trigger and pin element instead...

 

 

but I was also having trouble just pinning the car when it wasn't in the container and you are most likely onto something with that display:inline thing.

 

Thanks!

[mikel]

Hey Carl,

 

Is that an American car?

 

Kind regards ...

Mikel

[Carl]

perhaps this is still related to the display:inline thing.

 

But now with .carWrapper (white background) as the trigger, notice that it is twice as tall as it should be.

 

If you comment out all the JS code you will see the white background of carWrapper is just about the height of the svg car (as expected)

When the js runs, the wrapper div grows in height. it gives the impression the car is moving diagonally from top left to bottom right as you scroll.

 

[ZachSaucier]

5 minutes ago, Carl said:

But now with .carWrapper (white background) as the trigger, notice that it is twice as tall as it should be.

That's because of the pin spacing. Set pinSpacing to false if you don't want it to be there.

[Carl]

thanks, zach.

 

Mikel, I'm shocked. You should have these everywhere  (VW GTI or Golf)

 

[GreenSock]

Yep, I hadn't realized that when an element is display: inline, it completely ignores the width/height styles. Weird! I've updated the beta so that it senses that condition and uses inline-block instead. The preview of the beta is here: 

https://assets.codepen.io/16327/ScrollTrigger.min.js

 

Does that work better for you, @Carl? 

[mikel]

Hey Carl,

 

It was just fun. Did you the illustration?

[Carl]

@GreenSock thanks, the new file fixes the issue. I don't need a container div for the svg now and i'm getting a better understanding of how pinning works.

 

@mikel love your humor  I drew the car (kind of traced it) in Flash many years ago. I've gotten a lot of miles out of it for many lessons through the years. I was surprised how well the SVG export from Flash held up in the browser. 

 

 

[mikel]

 

Hey Carl,

 

If you bought a few TESLA shares a few months ago and traced the upcoming TESLA pickup,

it would be an easier option: simple shape and good value today.