Jump to content
Search Community

rubenmeines

Premium

  • Posts

    8

  • Joined

  • Last visited

About rubenmeines

Contact Methods

Recent Profile Visitors

868 profile views

rubenmeines's Achievements

  • Dedicated Rare
  • Reacting Well Rare
  • First Post Rare
  • Conversation Starter Rare
  • Week One Done

Recent Badges

4

Reputation

  1. rubenmeines
    Hey @Rodrigo, Ah ok thanks! Yes please, that would be awesome if possible. Also would be a good test because I got a lot of scrolltrigger animations in the site. How could I receive it? Thanks!
  2. rubenmeines
    Hey @Cassie I tried real hard but it does not seem to break! How did you do it? Cheers!
  3. rubenmeines started following Bug report: border disappears or flickers on scroll when using scrollTrigger "y: 0" , How i make the scroll smoother with ScrollSmooth , Scrolltrigger.refresh() moves my ScrollSmoother around and breaks when I click on elements that fold open and close (accordion) and 1 other
  4. rubenmeines
    Hi Andy, If you want to use scrollsmoother you need to register it because it is a separate plugin. Then you need to add 2 divs to your html and tell in javascript that you are using those as the scrolling element. Please check: "https://greensock.com/docs/v3/Plugins/ScrollSmoother". This is the HTML <body> <div id="smooth-wrapper"> <div id="smooth-content"> <!--- ALL YOUR CONTENT HERE ---> </div> </div> <!-- position: fixed elements can go outside ---> </body> And this is the JavaScript: import { gsap } from "gsap"; import { ScrollSmoother } from 'gsap/all'; gsap.registerPlugin(ScrollSmoother); let smoother = ScrollSmoother.create({ wrapper: '#smooth-wrapper', content: '#smooth-content', smooth: 2, }); Is that what you meant? In codepen you can ignore the import and the registerplugin if you have used the traditional starterpack from greenSock: https://codepen.io/GreenSock/pen/aYYOdN
  5. rubenmeines
    Hi there, I am working on a website with a lot of ScrollTrigger that has some side scrolling elements and in combination with Scrollsmoother. At the end of the page I have an accordion component that folds and closes elements and therefor makes my scrollsmoother container's height bigger and smaller on click. To make sure that when I change this height the start position of my upcoming scrolltrigger element I call a ScrollTrigger.refresh(). This sometimes works fine but sometimes it totally breaks the scroll by moving to the top and the scrollsmoother height way bigger, or it moves to another position or moves up and animates back really fast to the position where I was. In general it breaks. I have made a small demo hier on codepen with the scrollsmoother, a side-scrolling element with scrolltrigger and boxes that open and close. If you scroll down to boxes 6, 7, and 8 and click on them slightly fast 1 after another you will see a breaking effect. See video also. I think that something goes wrong when scrolltrigger.refresh and updating the scollsmoother height colides. But I am not sure how I should fix that or what would be a better strategy to implementing those fold open and close elements while making sure my next scrolltrigger elements start position is updated. Does anyone have an idea? breaking scrolltrigger.mov
  6. rubenmeines
    Thanks guys, the anticipate pin did improve some of it, but had some issues with browser resizing on mobile due to the browsers bars shrinking. In the end the client decided it did not like the effect at all so I'm moving on from it, until it comes on my path again. Thanks for the great support. I'm gonna keep exploring Scrolltrigger!
  7. rubenmeines
    Thanks Zach! Sorry for the super late reply, but the will-change: transform did do the trick (just tested it now)! I'm gonna pay some more attention to the best practises. Thanks again! Super nice.
  8. rubenmeines
    Hi there, I am working with scrolltrigger and I am pinning some full sized background images when they hit the bottom (see code). The only thing is that on mobile the stop is quite abrupt and sometimes has a bit of a back kick. So my question is if there is a possibility to smoothen this stop and if somebody has had this issue before as well? gsap.to(scene, { scrollTrigger: { trigger: bgVisual, endTrigger: nextScene, start: "bottom 125%" , end: "bottom -=5%", scrub: true, pin: true, }, }); Hope this is clear.
  9. rubenmeines
    Hi, I have had this issue in multiple sites where I am using scrolltrigger and animating the y property. This is what happens on an <a> tag for example (see screenshot). I have had this issue also appear on normal <div> that have border properties. I have also tried to replace the border with outline for example but same thing happens. When I hover over it, the border corrects itself and looks fine after that. Also when you change some properties through "inspect element" in chrome for example. The error also occurs in Microsoft EDGE, but have not seen it in firefox or safari. One fix that seems to work is to not use the transform property Y but the basic TOP property. I prefer to use the Y property however. Does anyone know how to fix this issue? This is my code: JS gsap.registerPlugin(ScrollTrigger); setTimeout(function(){ ScrollTrigger.batch('.animate-in', { onEnter: batch => gsap.to(batch, {autoAlpha: 1, y: 0, ease: "power2.out", duration: 1.6, delay: 0.15}), }); }, 100); CSS animation: .animate-in { opacity: 0; transform: translateY(80px); } CSS button: .button { border: 1px solid $black; background-color: transparent; display: inline-flex; align-self: center; transition: all ease-out 300ms; padding-top: 15px; padding-bottom: 16px; padding-left: 22px; padding-right: 22px; }
×
×
  • Create New...