Jump to content

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


  • Posts

  • Joined

  • Last visited

About rubenmeines

rubenmeines's Achievements

  • Week One Done
  • One Month Later
  • One Year In

Recent Badges



  1. 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!
  2. 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.
  3. 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.
  4. 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; }