Search the Community
Showing results for tags 'scrollto'.
Found 89 results
-
Hello all, I just had a problem with iOS 10 Safari and the ScrollToPlugin, there are some changed that now will trigger the autoKill function. It has taken me more than a hour to realize that it was the autoKill function who stopped the animation. (iOS9 Safari didnt had this problem) Just for people with the same problem (I think almost everybody who is using ScrollToPlugin) for now just add "autoKill:false": TweenLite.to(window, 1, {scrollTo: {y:2000, autoKill:false}, ease:Power2.easeInOut}); Sorry for no Codepen but you can easily try it out with the Safari Developers Debug, just open a page that is using GSAP on your iPhone en run code without autoKill:false. (Sometimes it will not autoKill it, but almost always). Hope that I have made someone happy with the same problem Greets! Vincent
- 12 replies
-
- 11
-
-
I'm using the ScollTo plugin to hijack the scrolling of the user: I've got multiple sections. Once the user scrolls a little bit the first scrollTo animation gets triggered and scroll the whole window to the second section. Once the user scrolls down more it automatically scrolls down to a third section. To achieve this I've use this code: let tlhomescroll = gsap.timeline({ scrollTrigger: { trigger: '.o-herotall__bg', start: "top top", end: "bottom center", autoKill: false, markers: true, pin: false, scrub: false, toggleActions: "restart none none none" } }); tlhomescroll .to(window, {duration: 1.5, ease: "power3.inOut", scrollTo: "#section2"}); using "o-herotall__bg" as a trigger on my 1st section it scrolls to section 2. I then do the same for section 2 to section 3. This all works fine, but the problem is: Once the user scolls down and reloads the page or comes back from another page to this on on a lower scroll position, the scrollTo is triggered and the window scrolls to section 3. How can I prevent the scroll event from triggering when the page isn't loaded at the top? -
In this demo I’m trying to create a navigation that scrolls horizontally to show more navigation items as the user scrolls down the page, the navigation allows the user to manually scroll horizontally and click on different nav items and will scroll to that section of the page. The issue comes when the user manually scroll horizontally, then click on a nav item, the navigation jumps. How can i control this part of the animation to create a smooth transition after the user scrolls the navigation horizontally?
-
Allows GSAP to animate the scroll position of the window (like doing window.scrollTo(x, y)) or a <div> DOM element (like doing myDiv.scrollTop = y; myDiv.scrollLeft = x;). To scroll the window to a particular position, use window as the target of the tween like this: //scroll to 400 pixels down from the top gsap.to(window, {duration: 2, scrollTo: 400}); //or to scroll to the element with the ID "#someID": gsap.to(window, {duration: 2, scrollTo:"#someID"}); //or to specify which axis (x or y), use the object syntax: gsap.to(window, {duration: 2, scrollTo: {y: 400, x: 250}}); Or to tween the content of a div, make sure you've set the overflow:scroll on the div and then do this: //scroll to 250 pixels down from the top of the content in the div gsap.to(myDiv, {duration: 2, scrollTo: 250}); Learn more in the ScrollToPlugin documentation. To learn how to include the ScrollToPlugin into your project, see the GSAP install docs. -
Hello, The first 2 panels should be reached via ScrollTo, but the second ScrollTo always starts from the top of the page. How can I fix this?
-
I have panels for content that use a scroll trigger (scrubbing & Pinning) to reveal. I would like users to be able to click on the nav to jump to one of the content panels. After leveraging bits from this wonderful forum, I was able to get a working prototype. Only issue I'm having now is that when a user clicks to go to a lower content panel it works. Then when they click on a higher content panel it appears the offset is off by about 50% the window.innerHeight. When I use an OffsetY value (window.innerHeight / 2) the lower content panels show at 50% but the higher panels show correctly. I feel like if I could determine the scroll position of the element I'm scrolling to I could just add the correct offset to compensate. Is there any way to correct this behaviour? (FYI, It doesn't appear to be showing well in the embeded codepen... Seems to work fine on codepen.io)
-
hello everyone! i wanted to show you a little excercise i made applying what i've learn with @Carl on his fantastic ScrollTrigger course. i am having a problem.. everything works fine until i click a button which fires a function that uses the ScrollTo plugin. i did add that button with the intention of giving the user the option to skip the animation (happening as they scroll) and jump to the following scene... its best if you see for yourselves what i mean. since is a VUE project i have all the logic separated on mixins. here is the link to the codeSandbox i made. https://codesandbox.io/s/help-me-world-44mr3 thanks again for reading me.
-
Hi all! I'm new to GreenSock and I haven't been able to find a similar issue in the forum. Does anyone know if it's possible to stop Scroll Trigger when ScrollTo is actively scrolling? I have navigation links which use `ScrollTo` to navigate to specific sections. I also have a section which I want to pin and show an animation inside. I'm looking for a way to pause `ScrollTrigger` when the user clicks a navigation link that utilizes `ScrollTo` - but have `ScrollTrigger` activated when the user is scrolling the page. Thank in advance for all the help :)
-
I'm using the following code to automatically scroll a div up & down when the user has not been interacting for a while (idle). objListingScrollTween = gsap.timeline({ repeat: -1, repeatDelay: 1, yoyo: true }); objListingScrollTween.add(gsap.to("#sessionListingsHolder", { duration: 5, scrollTo: { y: "max" }, ease: "none"})); This works fine but I have two questions: 1) is there an inbuilt way of getting the value of "max" ? 2) when the user interacts, I pause the timeline. When idle resumes I call resume() on the timeline. But the user may have scrolled manually to a different scroll position in which case there is a jump. Is there an inbuilt way to get the value the timeline needs to seek() to in order to restart the timeline from the correct place? thanks
-
Hello, I'm doing something in React.js and I don't know why the scrollTo doesn't work. Basically what I'm trying to do is something similar to what Mikel did : https://codepen.io/e1668058/pen/XWbBGPz?editors=0010 but without the buttons. I'm just trying to figure out how to do it just with the mousescroll. just a little extra, I've also thought of adding an onStart and onComplete for the TweenMax so that when it starts I lock the mousewheel with : window.addEventListener("wheel", function(e){e.preventDefault();}, {passive: false} ); and when it completes I unlock the mouse with passive: true. Thank you. Heres my code pen.
-
Hi - just migrated to v3, and not sure what I'm doing wrong, here's the code that works in one version, but not the other. It is the second one, the one that fails, that I want. //works wis.slideToTopOfViewport = function(slideNum, wrapper) { gsap.registerPlugin(ScrollToPlugin); let targetElem = wrapper.querySelector(`.slideW[data-filename="Slide${slideNum}"]`); console.log(targetElem); // works gsap.to(targetElem, {duration:0.4, y:-200 }); //works } //fails wis.slideToTopOfViewport = function(slideNum, wrapper) { gsap.registerPlugin(ScrollToPlugin); let targetElem = wrapper.querySelector(`.slideW[data-filename="Slide${slideNum}"]`); console.log(targetElem); // works gsap.to(window, {duration:0.4, scrollTo: targetElem}); //FAILS!! }
-
Hi, I'm trying to get smooth scrolling to work properly, but unfortunately I can't handle it myself (sorry, I'm pretty new of this). I'm using a scrollToPlugin and external plugin called "Smooth Scrollbar". If you look at it you will see that it is not working properly. Clicking on the link will move it chaotically. Also, if you click on the link multiple times, the page will move up and down, though it shouldn't. Hopefully someone can help me with this. Thank you.
-
Hi everyone, I'm new to GSAP and having a bit of trouble getting the ScrollTo to work properly. I have gsap and ScrollTo CDN at the bottom of the body. Below is pretty much all I have in my JS file. I'm guessing I missed something in the docs just because it seemed so simple to implement GSAP.
-
Hi GSAPers, I have an interesting challenge. I would like to scroll a div using GSAP. I want to scroll the div vertically using a tween that I can control using the position on an audio track head. I thought I could use the ScrollTo plugin, but I can't seem to understand see how to do it since both the time and the y position are fixed before the plugin initiates. Is it possible to change the div scroll position with ScrollTo interactively?
-
Hi, i'm trying to make alternative drag gable navigation element , that would scroll the page by dragging it up and down. So i have ran into 2 problems one is the moment you start to drag it jumps to the bounds top/bottom bounds of y axis instantly. Secondly i wan't to animate it, when you scroll the page normally, but that that brakes brakes everything also. Any help/tricks/tips with this would be greatly appreciated.
-
Hi there, Based on TweenMax, the ScrollTo Plugin and ScrollMagic (this is probably not where the problem came from): I wanna have a hero section on top of a page, only tweening downwards if the user is scrolling from the very beginning. Everything works as expected on my laptop (MBP). Following problem: If I use a touch-device (iPhone SE, iOS 12.4.1) and use a short touch gesture, the window is tweening to the destination withouth any issue. But if I keep my finger on the screen, the page starts to flicker and jumps back to the top after the tween finished. Is there any way to fix this behaviour? Already tried to toggle preventDefault with eventListeners on Callbacks as well as setting the position again onComplete. Since it's not working with Codepen on my mobile device (maybe because of the iframe issue since iOS11?): http://grommas-dietz.com/reduced-test.html reduced-test.mov
-
Note: This page was created for GSAP version 2. We have since released GSAP 3 with many improvements. While it is backward compatible with most GSAP 2 features, some parts may need to be updated to work properly. Please see the GSAP 3 release notes for details. GSAP version 1.19.0 introduces some exciting new features for advanced users as well as conveniences for everyone (even the "greenest" novices). The most noteworthy improvements are summarized below: Function-based values Instead of a number (x:100) or string (width:"300px") or relative value (y:"+=50"), you can now define most values as a function that'll get called once for each target the first time the tween renders, and whatever is returned by that function will be used as the value. This can be very useful for randomizing things or applying conditional logic. See it in action in the demos below. See the Pen BzmGba by GreenSock (@GreenSock) on CodePen. ...and more GSAP 1.19.0 is more ES6-friendly (for example, you can npm install gsap and then import {TweenLite, Elastic, TimelineMax} from "gsap" in your project). Plenty of bug fixes too. See the whole list in the github changelog. DOWNLOAD GSAP TODAY Happy tweening! -
Hello, I'm using ScrollToPlugin to animate window position between sections. The issue is the following. I'm trying to check the window offset at the end of the animation (window scrolled to correct position), but I actually get the $(window).scrollTop() BEFORE the animation in the onComplete callback. The example code: // Go To Slide functionality goToSlide(slideIndex) { //If the slides are not changing and there isn't such a slide let $slide = $($(this.slides).get(slideIndex)); if (!this.isAnimating && $slide.length) { //setting animating flag to true this.isAnimating = true; //Sliding to current slide TweenMax.to(window, 0.5, { scrollTo: { y: $slide.offset().top, autoKill: false, }, onComplete: this.onSlideChangeEnd(slideIndex), onCompleteScope: this, ease: Sine.easeInOut, }); } } The onComplete callback // Change animation status onSlideChangeEnd(slideIndex) { this.currentIndex = slideIndex; this.isAnimating = false; this.nextSliderIndex = undefined; this.updateCurrentOffset(); console.log('this.offsets :', this.offsets); console.log('this on end :', this.currentTop); console.log('this on end :', $(window).scrollTop); console.log('vanilla :', document.documentElement.scrollTop || document.body.scrollTop); } The logged window.scrollTop are the actual values when animation starts (previous section coordinates). When you scroll again - the value becomes accurate for the previous callback. How can I get the window offset value after it was animated to a position via scrollTo plugin? Thank you
-
Hi, I have build a really small component (see codepen) which is a list of entries with the first being sticky element. I would like to scroll to an entry which seem slightly buggy due to the sticky element, or I am doing something wrong. If you click on the the last element you will see what the problem is. It works well for entries where scrolling is required, but if en entry sits at the end (entry 9 for instance), where we can't scroll to, then the scroller does not scroll to very end but leaves the gap at the bottom (offset of 30px). Is there a way around this (without adding a margin-bottom to the ul list). I hope I could explain it well, if not, please let me know and will try to elaborate. Best regards Thomas PS: the markup can't be changed
-
I am building a dynamic form/div which has a clone button on the right bottom corner. Once you click it, it should clone the .item:first and then auto scroll down so the last div will hide. and when you click on prev or next button, it should scroll to the exact div that i want. my approach by using jQuery scrollTop with fixed px but it is not effective. since we have a lot of screen size. How can I achieve this? this is the first time i want to try Greensock to make this happen. Thanks
-
Hi, I'm trying to use scrollTo in React. But I can't make the increment value to works with scrollTo... Here is the function that not working: handleClick = () => { let incrementNumber = 500 TweenMax.to('content', 0.5, { scrollTo: { x:'+='+incrementNumber } }); } Here is the function that can works if I just use a fixed number, but like this I can make the scrollTo increase 500px every time I click it: handleClick = () => { TweenMax.to('content', 0.5, { scrollTo: { x:500} }); }
-
Hi mr admin i run script this error : $.fn.setSmoothPageScroll = function (options) { var ops = { time: 0.8, distance: 190 }, t = $(this), g = 'mousewheel DOMMouseScroll MozMousePixelScroll'; ops = $.extend({}, ops, options || {}); t.unbind(g).on(g, function (e) { var elem, v = $(this); if (e.srcElement) elem = $(e.srcElement); else if (e.target) elem = $(e.target); if (elem) { var t = $(elem).getInputType(); if (t == 'select' || t == 'option') return; } e.preventDefault(); e.stopPropagation(); e.stopImmediatePropagation(); var delta = e.wheelDelta || e.detail || e.originalEvent.wheelDelta || e.originalEvent.detail * -1; if (delta < 0) delta = -1; else delta = 1; var scrollTop = v.scrollTop(), finalScroll = scrollTop - parseInt(delta * ops.distance); TweenMax.to(v, ops.time, { scrollTo: { y: finalScroll, autoKill: true }, ease: Back.easeOut, autoKill: true, overwrite: 5 }); }); return this; }; -
Hi experts, It's a little strange: Only the first scrollTo (button on hero) does not land correctly. After that, everything works as desired. Everything is fine in the test case: In the finished web https://www.mandantum.com however not. I checked a lot. But do not find the mistake that I have 'built in'. Small hint, where to look, would be nice. Mikel
-
I am running into an issue with my QA department and using the ScrollTo Plugin on a Windows 10 machine while using Firefox. They are saying that the problem occurs in all Browsers, but I'm only able to replicate it in FireFox. This is what they wrote: While the text is auto scrolling, pull the scroll down or click on the downward arrow to scroll the ISI down Expected result: user should be able to scroll up and down at any time Actual result: the scroll is not responding, a user needs to scroll up first to be able to scroll down Is this a bug in the ScrollTo Plugin or my code? https://codepen.io/blooaux/full/ELMPqw
-
Good day lads. I have a pressing question and I am hoping this is the right place to ask. Can anyone direct me on the general approach towards achieving scrolling like these on the following sites - http://fantasy.co/ and https://www.ramotion.com/. Generally what I want to know is how to listen for the onScroll event and scroll to an anchor or an element on the page such as can be seen from those sites. I've tried searching online but all the tutorials seem to be doing this on click of an anchor link whereas I want to achieve this on scroll. Anyone able to help?
