Here's the scenario I'm coming across that's affecting my GSAP ScrollTrigger animations:
I have a home page that loads and animates.
When I scroll down the home page, scroll trigger behaves normally.
When I get to the bottom and decide to use the navbar to navigate to another page (I'm using the Nextjs <Link> component here), it sends me to the new page but starts at the BOTTOM Of the new page and quickly scrolls to the TOP of the new page.
This is a problem because it triggers all of my GSAP animations simultaneously for that page.
Is there a way to switch to a new page but START at the top— rather than start where ever you are in the y-position and scrolling to the top of the new page?
Essentially what's happening is that when I click on a <Link> component in Nextjs, the y-position of my viewport is retained during page transition. Once I'm on the new page, I'm still on that same y-position of the previous page, but then it SCROLLS to the top. This is bad because it triggers all of my GSAP animations.
Nevermind, I solved it!
I needed to override the scroll-behavior: smooth; with scroll-behavior: auto !important;.
I basically put scroll-behavior: auto !important; at the root :root {}.
Related
I am using Gatsby for the first time and I have started with the Cara starter template.
I have added a link to the hero that would scroll to the next sections (projects) when clicked.
The link does take you to the next section, however the scroll bar remains scrolled all the way to the top of the bar. Meaning that you cannot scroll back up the page. (Strangely now when you scroll to the bottom of the page, the footer is not aligned with the bottom of the page, but you can now scroll all the way back to the top of the page again.)
I tried using various techniques; a standard anchor tag referencing an id, using gatsby-plugin-smoothscroll to scrollTo() the element, and all have this same end result.
I'm not sure what is causing this behaviour, but maybe it is something to do with the layout or some conflicting scrolling or offsetting. I would appreciate any help to get me back on track.
I have hosted what I have done so far, so that you can see the issue I am having:
https://portfoliositemain36740.gatsbyjs.io/
I'm essentially making a 'shopping cart' UI and I want it so that when the user hits the 'Add' button, a little tiny box-label appears at the bottom of the screen that says 'Added Item' or something like that.
My question is how to do that with my current set up. I am currently using a nested Grid inside of a Scroll view for the main content of the page. I want the box-label to fade in at the bottom of the screen and stay located at the bottom of the screen ontop of everything else even if you scroll, until the animation fades.
Now i figure it doesn't make sense to add it into the grid since the grid's end will be out of view in the scrolling part of the scroll view, and same for the Scroll View. I am considering nesting the entire scroll view inside of a stack layout but i fear the button will just be located at the end of the stack layout under the scroll view instead of on TOP of the scroll view. How do you recommend I achieve this effect?
I prefer not to use a custom renderer if possible due to my lack of experience in the three separate platforms.
Thanks
Make vertically oriented stack layout. When you need to add you animation add it programmatically to the stack. When it finishes remove it from stack. Your scroll view will not affect animation
I am building a website using react to implement.First, we scroll the page to the bottom or middle position.Then we click refresh button in the iphone safari browser，page scroll to the permanent position strangely.I have tried to change the flex layout to float layout and add pageshow event listener to set scrollTop zero using
window.scrollTo(0,0)
.But page still stop at the permanent position in safari mobile.
I guess the problem is the page save the position of last view, but when page fresh, the content of the page is not show completely, and then the page could only scroll to the permanent position.At last, the rest part of the page show out.And the pageshow event has been triggered early before the page scroll to the permanent position.
How can I force the page to be scrolled to the top on page refresh except window.scroll? How can I solve this strange behavior of the safari browser?
I have the same issue as you using react on ios safari, the only fixed I found is to use a setTimeout in componentDidMount, but I really don't like this solution
componentDidMount() {
setTimeout(() => {
window.scrollTo(0, 0);
}, 800);
}
Hope it'll help
use window.scroll(0, 0) instead of window.scrollTo()
In WP 8.1 Store app, how can I change page animation upon navigating to another page within the frame such that the current page stays still while the new page is animating on top of it by moving from the top of the screen to the bottom?
I'm currently animating my navigation like so:
protected override void OnNavigatedTo(NavigationEventArgs e)
{
Frame.ContentTransitions = new TransitionCollection
{
new PaneThemeTransition{Edge = EdgeTransitionLocation.Top}
};
}
But this is animating both pages by moving the current one from bottom to top while the second one simultaneously moves from top to bottom. I'm also seeing a black background while the pages are moving for screen area that's not occupied by any content.
You unfortunately can not navigate to a different page and keep the previous page visible during the animation. That is why all page Transitions right now only support an In-Transition and an Out-Transition. We discussed the issue with Microsoft developers during this years //Build so I'm certain of this information.
If you really need that effect you can perhaps achieve it using a workaround. Instead of placing your content on separate pages you would create user controls and animate those while staying on a single page. This however can be a little tricky due to you manually having to manage "navigation" between the user controls instead of having the system deal with it for regular pages.
More information on how to implement animations in Windows Phone Silverlight Apps can be found in this article: http://msdn.microsoft.com/en-us/library/windows/apps/jj206955%28v=vs.105%29.aspx
I had a similar problem a while ago and it is kind of a workaround as well but it might do the trick for you.
You can place a Frame object taking all the available space on your current page. Then, instead of navigating from your current Page Frame, you navigate from the Frame object you put on top of your actual page.
The problem with this approach is that you would really "get rid" of the first page.
But this can work for you, or at least give you another insight of the problem.
I am using jquery layout plugin and have the following situation that I cannot find a solution. How do I make the center pane increase its size permanently by dragging the div beyond the bottom border.
I have a left pane and a center pane. I dynamically generate div
when the user clicks on the left pane. The divs are generated and
dropped on the center pane. The divs are draggable and resizable.
Everything works fine with dragging and resizing on the visible center
area. The moment I drag the div beyond the bottom, the scroll bar on
the center pane appears and it seems the center pane is extending to
accommodate the new position of the dragged div. But the moment I try
to resize the div or add another div, it jumps to the top section of
the div and resets the scrollbars. I checked the center div height in
firebug and it remains at the same height when initialized
even after dragging the new div beyond the bottom.
Here is the test page html code.
Just copy/paste entirely into a html page. On the left pane, click on the "Add new" button will add new div that is draggable and resizable.
Click on "Add new"
Drag the newly added div beyond the bottom of the center pane.
The center pane shows the scrollbar as it is suppose to.
If you check the center div's height in firebug, it is not changing
Now try resizing the newly added div by dragging its handle
It jumps to the top and the center box loses its scrollbar.
I could not paste the complete html page so here is the reference to the code at the bottom of this thread
http://groups.google.com/group/jquery-ui-layout/browse_thread/thread/ca922aa44c0048ee
And here is the test link http://jsfiddle.net/yZc63/
I am surprised no one has come across this situation before? Even without the layout plugin, my solution is not very pretty. In order to simulate the page without the layout plugin, I had to keep the top and the left pane using position:fixed property in css. And there is no center div at all. I add the new div directly to the body of the html. The reason is I don't want to see additional scrollbars on top the browser scrollbars. In other words the center pane should scroll when the browser scrollbars are moved. I am attaching the solution so you have an idea.
I am open to any solution even without the layout plugin if i can simulate the previous attached file using any other approach. i am attaching my page without the layout plugin but am not sure if that is the only elegant solution left.
You can check the solution here http://jsfiddle.net/c7wrT/
Is adding the dynamic div directly to the html body a good approach?
I ran into same situation and this answer helped.
https://stackoverflow.com/a/33004821/2139859. Updated Fiddle: http://jsfiddle.net/bababalcksheep/yZc63/11/
$(".removalbe-recom").draggable({
appendTo: "body",
helper: "clone",
revert: "invalid",
cursor: "move",
containment: "document",
zIndex: 10000,
scroll:false,
start: function (event, ui) {
$(this).hide();
},
stop: function (event, ui) {
$(this).show();
}
});