iammarkmulvey

You make everything so easy Zach! Thanks again for the quick response.

Below is a great example of a scroll indicator using ScrollTrigger. What I am curious about is how would you make the scroll indicator only work for a specific div or section height rather than the entire page/document height?

Bingo! That did the trick. Safari mobile is a little on the slow side to refresh so it doesn't look as smooth but works great in the Chrome mobile browser. Thanks again, Zach.

Ok that makes the toolbar at the bottom in codepen function normally when viewing from my iPhone (learn something new everyday). Browser Tool bar disappears on scroll up and reappears on scroll down and you can see how the "tomorrow" header is a bit buggy and gets stuck hanging. Thanks for the quick response Zach!

I am running into a problem when viewing on a mobile device. Specifically the browser toolbar (both Safari and Chrome) at the bottom that slides in and out on scroll. Because of this the 2 headers that we wanted to appear "pinned" to the bottom "Today" and "Tomorrow" are left hanging in the original "absolute" position when the the page loads, rather than always repositioning to the bottom as desired. Any thoughts on that one? Is there a way to hide that toolbar at the bottom or something like that? Also it's hard to replicate in the codepen example because when you view codepen on a mobile device the toolbar at the bottom stays visible and constant the entire time. How does codepen control the toolbar in mobile view?

Quick question? Take a look at the "content" sections. The Today "content" at the top is getting cut off and the Tomorrow "content" even more. What do you think is causing that? Thanks again for all you help on this one. https://codepen.io/markmulvey/pen/vYLGyqL

Great! Thank you both Zach and Jack.

Almost Jack! That is essential the effect but it's a little backwards. Rather than the header divs unpinning from their initial fixed position at the bottom of the related content div they would unpin and be positioned at the top of the content div when scrolling. I tweaked it to get the result I was looking for. Obviously, a key factor is pointing to a different ScrollTrigger JS file. Is that available for me to use? Thank you! Good stuff. https://codepen.io/markmulvey/pen/vYLGyqL

Thanks Zach for your response! I am trying to make it so the "today" header and the "tomorrow" header are fixed to the bottom of the viewport regardless of the viewport height on load. When the user scrolls the "today" header would "unpin" and scroll in position above the "today" content until it reaches the top and "pins" itself just below the nav. As the user continues scrolling the "today" content will continue scrolling until we reach the bottom of the "today" content, at which point the "tomorrow" header would "unpin" and continue to scroll in position above the "tomorrow" content until it reaches the top and pins itself below the nav. Obviously would want everything to work in reverse if the user changes the scroll direction. Hopefully, that makes sense?

Is it possible with ScrollTrigger to assign a pin set for both top and bottom of the viewport? So when you scroll up the element pins to the top and when you scroll down it pins to the bottom. I tried starting with the elements fixed bottom on load and as soon as you started scrolling removed the sticky class and assigned the ScrollTrigger. That resulted in the elements disappearing.

Absolutely brilliant! Thank you Sahil. You rock! How would I apply this behavior to other buttons? I tried changing tradeButton to a class rather than an ID so I could apply that class to other buttons. I must be missing something because that didn't work? So I just duplicated the functions and created unique buttons for each one which worked but I ma sure there's a better, cleaner way. Thanks again fro your help.

Sahil thanks for your response and helping with any of my bad coding. Actually its the white box not the black transparent overlay that I would like to look like its animating from the button point of origin.

Thanks Mikel. Yes the behavior is correct in that regardless of where you click the animation transition appears to originate from where you clicked. Now how would I apply that behavior to a button transitioning into a a centered modal regardless of where the button is? Here's an example of what I have now.

Hi. I am trying to figure out how to animate a modal from the click point of origin. I can animate in a modal from top, bottom, left, right - no problem, but would love to figure out how to animate it in by clicking a button regardless of where the button is on the page, and regardless of the size of the browser window. Here's a decent example someone created but using bootstrap. http://jsfiddle.net/jschr/B584D/ Thanks in advance.

Hi would you make this work a $ sign, commas and decimal? For example make it animate from $0.00 (or another number) to $829,546.42?

Cool. Thanks Carl

thanks Carl. now how do I do the alternating lines version of the split text within your code? I can't figure out how/where to replace the chars version you did as a demo. Again thank you.

How do I trigger splitText within this slide show so the animation only happens when slide is in view?

Again thank you all but BINGO Craig. Was looking for an easier way to target part of the gray lines (an array). 0 thru 8 or 3 thru 5, etc.

Sorry didn't explain that well. I only want to change the color of some of the lines (from bottom to top) and is there a simpler way to target which lines for example GrayLine_38 thru GrayLine_01, or GrayLine_38 thru GrayLine_10, rather than what I did. Thanks!

Thank you guys. Another question. Is there a more efficient way to define which # Grayline I want to change the gray color to green?

There's got to be an easier way to do this rather than animating in each poly path?

Perfect and understood. Overflow in CSS. Thanks again Craig.

one more question though. When I add. The SVG gets cut off? TweenMax.to("#Finger1", 1, {x: 20, ease: Power1.easeOut});

Craig you rock! Thank you.