Search the Community
Showing results for tags 'translatey'.
Found 2 results
-
I am struggling to get this effect to work. There is a hero image with parallax that is working. But the logo, which starts full size and fixed to the bottom of the hero container (with a slight overlap of about 75px at the bottom), needs to resize smaller to fit in the sticky header at the top. This should scrub with the scrollbar and be sticky at the top shortly before the hero is fully scrolled past. I've spent days trying to get this to work, and I can't find any examples anywhere that have helped me get to the bottom of the issue. Any help would be greatly appreciated!
-
Hi, I just came across this wonderful product and realized this is exactly what I need! I have a huge image that is x times the window size, so I want to scroll to the very bottom of it on button click. I would do so with CSS like this: @keyframes { to { transform: translateY(-100%) translateY(100vh); } } This proved to be a crossbrowser way in CSS instead of: transform: translateY(calc(-100% + 100vh)) .Is there any way to do so with TweenMax? I do understand that I can calculate these values in pixels and specify them explicitly: var value = -$('img').height() + $(window).height(); var tweenDown = TweenMax.to("img", 5, {y: value}); However the advantage of the "stacked" way is that when you resize the window, it keeps the image in the same position. Thanks in advance!
