Carl Posted July 2, 2020 Share Posted July 2, 2020 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 Link to comment Share on other sites More sharing options...
ZachSaucier Posted July 2, 2020 Share Posted July 2, 2020 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 1 Link to comment Share on other sites More sharing options...
Carl Posted July 2, 2020 Author Share Posted July 2, 2020 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! Link to comment Share on other sites More sharing options...
mikel Posted July 2, 2020 Share Posted July 2, 2020 Hey Carl, Is that an American car? Kind regards ... Mikel 1 Link to comment Share on other sites More sharing options...
Carl Posted July 2, 2020 Author Share Posted July 2, 2020 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. Link to comment Share on other sites More sharing options...
ZachSaucier Posted July 2, 2020 Share Posted July 2, 2020 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. 2 Link to comment Share on other sites More sharing options...
Carl Posted July 2, 2020 Author Share Posted July 2, 2020 thanks, zach. Mikel, I'm shocked. You should have these everywhere (VW GTI or Golf) Link to comment Share on other sites More sharing options...
GreenSock Posted July 2, 2020 Share Posted July 2, 2020 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? 2 Link to comment Share on other sites More sharing options...
mikel Posted July 2, 2020 Share Posted July 2, 2020 Hey Carl, It was just fun. Did you the illustration? 2 Link to comment Share on other sites More sharing options...
Carl Posted July 2, 2020 Author Share Posted July 2, 2020 @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. 1 Link to comment Share on other sites More sharing options...
mikel Posted July 2, 2020 Share Posted July 2, 2020 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. 1 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