Jump to content

Search In
  • More options...
Find results that contain...
Find results in...


  • Posts

  • Joined

  • Last visited

amit95's Achievements

  1. I have an element called .listing__nav which I want to pin upon scroll. When the .listing__nav touches the top of the window, I want it to become fixed and to unpin only when the banner element comes into view. To achieve this, I've tried the following codepen: https://codepen.io/amitr95/pen/dyJMawR As you can see, the .listing__nav doesn't pin where intended instead pinning at the bottom of the window, giving it glitchy behaviour.
  2. @OSUblake Are you saying the CSS is part of the issue (if so, are you saying to remove it)? And is there a way to prevent resize on mobile? And do you see any issues with doing so?
  3. @OSUblake - You're correct, that's what I'm referring to. I've removed anticipatePin and refreshPriority before and have done so again. After clearing cache, this issue still remains, still jumps. Note: I've added both properties back in so that it doesn't effect desktop.
  4. @OSUblake - I've seen the issue happen on iPhone 6/7/8 (Safari) and also on Android (Chrome) on my OnePlus 5T. If you open this page on mobile and scroll past the horizontal scroller and then stop scrolling, you will see the jump.
  5. Hi @OSUblake Yes that's correct. Even when I remove everything and have just the below, it still jumps (and that's testing after clearing cache). let container = document.querySelector(".horizontalScroller__items"); gsap.to(container, { ease: "none", scrollTrigger: { trigger: ".horizontalScroller", pin: ".horizontalScroller", anticipatePin: 1, scrub: 0.2, invalidateOnRefresh: true, refreshPriority: 1, end: '+=450%', } }); In regards to containerAnimation, I actually tried this approach a few weeks back, but couldn't get it to work. I then reached out for guidance on Stack Overflow and there they told me that "Pinning and snapping won't work on ScrollTriggers with a containerAnimation" (reference)
  6. I have what looks to be a rare bug with my pinned section. When viewing a page which contains this pinned section, on mobile, it will automatically start jumping up and down. Here are visual of my issue: Video (notice the automatic jump 13s in) In the above visual, it is automatically jumping up and down (I'm not scrolling near the end). In my demo, I've stripped back all of my JS to test what may be causing this. However, the issue persisted. It only works if I comment out pin: ".horizontalScroller", which I cannot, as it's pivotal. It works fine on desktop, no jumping, but when viewing on a mobile device, it starts to jump. I can only assume calculations with .pin-spacer are messing up, because once I'm passed that section, it almost jumps up to pin again., then realises it shouldn't do that so goes back down, when the element isn't even in view. See sandbox here (again, the effect I'm having is on mobile) Any ideas?
  7. I realized that part of my issue in the above demo was that I was applying .animate to the path element, which already had an inline transform property set. I resolved this by grouping the path in a g tag and applying the .animate class on that instead (so the transforms do not conflict). V3 can be seen below, still working on a solution, but in case it helps further debugging: https://codepen.io/amit_rai95/pen/mdqVRgG?editors=1010
  8. No worries Was just curious to see how that demo works without containerAnimation but, it also seems like an older demo (before containerAnimation was about). Nevertheless, I've been experimenting with it and I'm encountering issues. From the containerAnimation demo you've linked above, the bare minimum code required to get .box-1 to animate on scroll is : let sections = gsap.utils.toArray(".panel"); let scrollTween = gsap.to(sections, { xPercent: -100 * (sections.length - 1), ease: "none", // <-- IMPORTANT! scrollTrigger: { trigger: ".container", pin: true, scrub: 0.1, //snap: directionalSnap(1 / (sections.length - 1)), end: "+=3000" } }); gsap.set(".box-1", {y: 100}); gsap.to(".box-1", { y: -130, duration: 2, ease: "elastic", scrollTrigger: { trigger: ".box-1", containerAnimation: scrollTween, start: "left center", toggleActions: "play none none reset", id: "1", } }); Which I have mimicked as best as possible, just to get something animating on scroll. In my original demo, I was using timelines to get content to fade out on scroll and for it to then start the horizontal scroller (you can see this in action in my original question). Now in my latest demo below, as I've adapted the code to accomodate containerAnimation , I've had to remove the timeline, the horizontal scroller doesn't work as it did in the original and the .animate elements are in no way working as they should in the demo. Any hints to point me in the right direction? Apologies in advance if I've asked something super stupid, only started learning GSAP about two weeks ago, but making progress slowly slowly 😬 Latest: https://codepen.io/amit_rai95/pen/LYOGYZx
  9. Hi @Cassie, I'll look into that demo above For arguments sake, it my approach definitely not possible for horizontal scrolling? I.e, see this demo here: https://codepen.io/GreenSock/pen/jOWvgjV
  10. I have an svg which forms the basis of my horizontal scroller. Within this svg, I have added the class .animate to the elements which I want to fade in up as the item comes into view. The .animate class for reference has been added to all the text items in the svg. Currently, only the .animate elements that are in view initially fade in up. When I scroll down to continue the scroller, the other elements are static. They're not fading in or translating up or down in any way? Note: view pen in full view
  11. Hi @Cassie, Appreciate the advice and the demo, both are extremely helpful I will have a play around and see if I can make things work, and more importantly, understand what's happening.
  12. I've been struggling with this one for quite some time (as you may be able to tell with my previous posts 😅). Nevertheless, thanks to the forums, and demos, I have been able to experiment with multiple approaches, none which work in the the way I want. In short, here is my expected behaviour: User scrolls down the page and .horizontalScroller__intro pins and moves down to the center of my .horizontalScroller which I've currently defined as end: "+=30%"). Once it has reached the end, as the user continues to scroll down, I now want .horizontalScroller__intro to fade out slowly Once .horizontalScroller__intro has faded out completely, I now want to fade in .horizontalScroller__items which has an opacity of 0 in the css. Once .horizontalScroller__items has faded in completely, I want the user to be able to scroll horizontally. Then the reverse when the user is scrolling back up Current results: .horizontalScroller__intro starts to fade out immediately (and is completely gone by the end position). I'm looking for .horizontalScroller__intro to start fading out after it has reached its end position. I have a separate scrollTrigger defined for the horizontal scroll (which just contains an image). When this trigger is used alongside the .horizontalScroller__intro trigger, the .horizontalScroller__intro jumps. Cannot get the .horizontalScroller__items to fade in (unsure if it doesn't like it because it's defined in the css?) What have I tried? Used this demo to achieve fade out Used this demo to achieve basic pin Tried the below snippet to get intro to fade out const tl = gsap.timeline( { scrollTrigger: { trigger: ".horizontalScroller__intro", start: "top", end: "+=30vh", scrub: true, // markers: true, toggleActions: "play reverse play reverse", } }); tl .to('.horizontalScroller__intro', { autoAlpha: 1, duration: 0.5 }) .to('.horizontalScroller__intro', { autoAlpha: 0, duration: 0.5 }, 0.5); Appreciate I've asked a few questions in this post. Any help would be appreciated
  13. I'm using ScrollTrigger pin to turn my section into a horizontal scroll section. In this section, I have an element called .horizontalScroller__intro . On scroll, say 20% of the width of .horizontalScroller__items , I'm trying to gradually fade the intro away, so that the image is the only thing in view. To achieve this, I've created a timeline, similar to the approach defined here. However, in my demo, my intro disappears immediately. In short: When scrolling down (start to end of image), slowly fade away .horizontalScroller__intro When scrolling up (end to start of image), slowly fade .horizontalScroller__intro back in Note: Please view the pen in full view.
  14. I have a block which becomes pinned and scrolls horizontally. Within this block, I have a vector which has a width of 3573px. When a user scrolls, I want the vector to scroll also, alongside the images in my demo. Have tried moving my vector under .horizontalScroller__scroll, so that it scrolls alongside the images, but that didn't work. In addition to this, I'm looking for a way to slow down the slider. If a user slingshots the scrollbar up, they miss the first few items in the pinned container. See visual below: In the above: When you scroll down fast, it's already started scrolling and the first image is outside view already (which is expected behaviour). But is there a way to slow it down so that the first slide is always visible, no matter scroll speed. When you scroll up fast, it doesn't showcase the first few slides. See approach: <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/gsap.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/ScrollTrigger.min.js"></script> <section class="spacer"></section> <section class="horizontalScroller"> <div class="container"> <div class="row justify-content-center"> <div class="col-12 col-md-8"> <div class="horizontalScroller__intro text-center"> <h2 class="horizontalScroller__header">Header</h2> </div> </div> </div> </div> <div class="horizontalScroller__scroll"> <div class="horizontalScroller__images" id="horizontal-scroll"> <div class="horizontalScroller__item"> <div class="horizontalScroller__image" style="background-image:url('https://picsum.photos/200/300');"></div> </div> <div class="horizontalScroller__item"> <div class="horizontalScroller__image" style="background-image:url('https://picsum.photos/200/300');"></div> </div> <div class="horizontalScroller__item"> <div class="horizontalScroller__image" style="background-image:url('https://picsum.photos/200/300');"></div> </div> <div class="horizontalScroller__item"> <div class="horizontalScroller__image" style="background-image:url('https://picsum.photos/200/300');"></div> </div> </div> </div> <div class="horizontalScroller__pattern"> <div class="horizontalScroller__pattern-inner"> <svg class="horizontalScroller__pattern-svg" xmlns="http://www.w3.org/2000/svg" width="3573.448" height="935.115" viewBox="0 0 3573.448 935.115"> <g id="Journey_line" data-name="Journey line" transform="translate(58.751 66.918)"> <path id="Path_111603" data-name="Path 111603" d="M-57.191,807.764c141.061,46.335,271.1-48.506,208.8-171.343-44.647-88.041-84.385,2.223-76.906,70.2,11.034,100.3,75.906,190.808,216.669,143.778C406.3,812,470.169,700.216,568.892,676.505c94.985-22.813,137.722,77.422,240.409,77.422,189.877,0,202.929-186.737,384.8-145.215,70.851,16.176,119.356,96.77,315.333,91.709,108.733-2.808,183.293-179.6,324.1-222.009,136.412-41.091,145.842,55.306,290.03,55.078,221.015-.348,232.464-251.918,446.846-265.314,144.5-9.029,229.247,90.469,364.966-54.532,26.116-27.9,52.772-44.257,77.079-53.559,38.931-14.9,81.644-13.148,119.848,3.795,52.233,23.165,142.179,57.218,225.578-44.538C3456.26-.7,3510.921-63.64,3510.921-63.64" fill="none" stroke="rgba(249,247,250,0.3)" stroke-miterlimit="10" stroke-width="10" /> <path class="pulse" id="Path_111604" data-name="Path 111604" d="M1922.219,474.558a33.6,33.6,0,1,1-33.6-33.6,33.6,33.6,0,0,1,33.6,33.6" fill="#5d209f" /> <path class="pulse" id="Path_111605" data-name="Path 111605" d="M1908.09,474.558a19.475,19.475,0,1,1-19.476-19.476,19.476,19.476,0,0,1,19.476,19.476" fill="#f6eb61" /> <path class="pulse" id="Path_111606" data-name="Path 111606" d="M1056.355,649.037c0-19.115-15.045-34.611-33.6-34.611s-33.6,15.5-33.6,34.611,15.045,34.611,33.6,34.611,33.6-15.5,33.6-34.611" fill="#5d209f" /> <path class="pulse" id="Path_111607" data-name="Path 111607" d="M1042.226,649.037c0-11.078-8.719-20.059-19.476-20.059s-19.475,8.981-19.475,20.059,8.719,20.059,19.475,20.059,19.476-8.981,19.476-20.059" fill="#f277c6" /> <path class="pulse" id="Path_111610" data-name="Path 111610" d="M623.423,672.044c0-18.834-15.045-34.1-33.6-34.1s-33.6,15.268-33.6,34.1,15.045,34.1,33.6,34.1,33.6-15.268,33.6-34.1" fill="#5d209f" /> <path class="pulse" id="Path_111611" data-name="Path 111611" d="M609.294,672.044a19.478,19.478,0,1,0-19.476,19.764,19.621,19.621,0,0,0,19.476-19.764" fill="#ff6d6a" /> <path class="pulse" id="Path_111608" data-name="Path 111608" d="M2355.151,439.3a33.6,33.6,0,1,0-33.6,33.6,33.6,33.6,0,0,0,33.6-33.6" fill="#5d209f" /> <path class="pulse" id="Path_111609" data-name="Path 111609" d="M2341.022,439.3a19.475,19.475,0,1,0-19.476,19.476,19.476,19.476,0,0,0,19.476-19.476" fill="#ff6d6a" /> </g> </svg> </div> </div> </section> <section class="spacer"></section> .spacer { height: 100vh; background: lightblue; } .horizontalScroller { padding: 100px 0 60px 0; background-color: #5D209F; height: 100vh; position: relative; overflow: hidden; } .horizontalScroller__intro { margin-bottom: 25px; } .horizontalScroller__scroll { height: 70%; position: relative; overflow: hidden; } .horizontalScroller__images { display: flex; align-items: center; position: relative; z-index: 1; } .horizontalScroller__item { width: 50vw; display: flex; justify-content: center; flex: 0 0 auto; } .horizontalScroller__image { -o-object-fit: fill; object-fit: fill; margin: 0 auto; width: 260px; height: 255px; } .horizontalScroller__pattern { position: absolute; top: -50%; width: 100%; height: 100%; } .horizontalScroller__pattern-inner { height: 100%; } $(function() { let images = gsap.utils.toArray(".horizontalScroller__item"); gsap.to(images, { xPercent: -100 * (images.length - 1), ease: "none", scrollTrigger: { trigger: ".horizontalScroller", pin: true, scrub: 1, end: "+=3600", // size of svg bg //end: () => "+=" + document.querySelector(".horizontalScroller__images").offsetWidth } }); });