Jump to content
GreenSock

BC Development

Members
  • Posts

    38
  • Joined

  • Last visited

Posts posted by BC Development

  1. Hi, I have a really dumb question about a functionality. I need a container that has text to move vertically each time I click a key. Is there an easy way to do it with a tween? I see the container only moves one time and that's it. How can I make it to move each time I click a key?

    See the Pen WNzxmmL by godhandkiller (@godhandkiller) on CodePen

  2. Hi, I'm having a difficult time with this animation. I have a logo which is going to animate from the bottom then the letters of the logo are going to be reveal from right to left at the same time that it push the logo so everything stays centered. 

    I have and example but it looks like the animation is starting from the center, and not from right to left.

    I tried to use a background image instead of the SVG and seems to work fine, the issue is that later on I need to change the logo color, so using background image is not an option.

    Any help would be appreciated.

     

    Here is an example of the animation I'm trying to do

    See the Pen oNqgMVR by godhandkiller (@godhandkiller) on CodePen

  3. I have a weird issue with an animation I'm trying to create. I want to move the window trough sections when the user scrolls just a little bit. It works great using a regular mouse, but whenever I use the macbook trackpack the animation triggers multiple times, so instead of moving to the next section, it goes to the last one. Is there a way to fix this issue?

    See the Pen zYWOQXW by godhandkiller (@godhandkiller) on CodePen

  4.  

    19 hours ago, SteveS said:

    The way you are trying to make the image appear won't work. There's a number of ways to do this, but I animated a clip-path. Definitely needs some tweaking, but this is the general idea:

     

     

    Thank you for your solution, the only issue that I see is that the logo is not centered in the screen

  5. 10 minutes ago, elegantseagulls said:

    Do you have a CodePen that shows this? Also what screen recorder and OS are you using?

    I don't have a codepen cause the issue is on my actual website, on codepen I can't reproduce the issue.
    I'm using a macbook so I use the native recorder program. I can upload some videos of the issue.
    It seems like when I record the computer uses a lot of resources and that makes chrome to behave slower which causes the scrolltrigger to not function properly

  6. I have a really weird issue that only happens on Google Chrome. While recording my screen the scrolltrigger breaks, I did some testing and this only seems to happen on Chrome, I did some research but couldn't find a reason why.
    I just need some help or if this is something that has been reported before. I think is more of an issue with Chrome instead of Gsap but I just wanted to try my luck in this forum because I can't find a fix.

  7. Hello! @GreenSock Just wanted to bump this to see if there's an update. Been trying for more than a month to add smooth scrolling to a website using other libraries or methods but the reality is that only ScrollSmoother has worked without breaking anything (except for the issue I've been sharing), so not really wanting to be annoying or impatient 😬

     

    I appreciate any help!

    • Like 1
  8. Thanks for the update @GreenSock, I don't notice a difference right now... cleared chache and all. And the problem is in all browsers for me. Just to be sure, because I just noticed I didn't go through the steps to replicate in my last post:

     

    Scroll down either to section 1 or section 2 (after section 3 it doesn't glitch, I'm guessing because its where the ScrollTrigger with snap ends), then resize the codepen window (vertically or horizontally). On the next scroll, it will suddenly jump and when you scroll back, it doesn't let you go beyond the section you were in.

     

    Here's a quick screen recording I just did in Chrome: 

    https://drive.google.com/file/d/1OrJvjuE9ieHdgcWqqZZpRwVC83hv200Z/view?usp=sharing

     

    Hope this helps!

  9. @GreenSock oh! I implemented ScrollSmoother recently on a site, I don't have a CodePen demo and since the problem I'm seeing is the same described above, I thought that maybe I didn't have the fix.

    Basically if I resize the window with the page scrolled down, it glitches and doesn't let me go up after that. I'm certain that is ScrollSmoother because if I remove it, it doesn't happen.

     

    I have many Scrolltrigger transitions on that homepage so I could guess something is interfering there, but I would have to test. Thanks for the quick response!

  10. Hi! I'm having this same problem on a website I'm building but I noticed in the CodePens the fix comes on a 3.10.5 version of ScrollSmoother but the latest I get is 3.10.4. I'm getting it from NPM, is there a way to get the new version from there?

  11. 1 hour ago, GreenSock said:

    That jumping isn't a bug. It's not "fixed" in 3.10.0, but there are some nifty goodies that can help you get more of the behavior you may want. You can definitely disable the refresh() that happens on resize by using the .config() method if it's on a mobile device: 

     

    if (window.matchMedia("(hover: none), (pointer: coarse)").matches) {
      // notice "resize" is not in the list:
      ScrollTrigger.config({ autoRefreshEvents: "DOMContentLoaded,load" });
    }

     

    I tried that but I was debugging and when I use the onRefresh function I still have occurrences of refresh

  12. On 3/22/2022 at 7:36 PM, GreenSock said:

    Oh, I see. No, we don't distribute beta versions that are in-progress. I'm curious why you wanted to use that version in particular - what prompted your interest? 

     

    We do hope to launch 3.10.0 within the next 2-3 weeks, FYI. We're working very hard on it. Super exciting features are coming :) 

    I'm having the same issue as the OP, the scrollTrigger end and start keeps jumping when the browser navigation hides and I can't find a way to solve the issue

  13. 2 minutes ago, GreenSock said:

     

    First of all, thanks for being a Club GreenSock member! 🙌

     

    There are lots of details about installation options here: https://greensock.com/install

     

    Was there something specific you were struggling with? 

    I want to install the 3.10.0 version of the scrollTrigger plugin that you guys are using in this code pen https://assets.codepen.io/16327/ScrollTrigger.min.js, is there a way that I can get that version? 

  14. Hello, I have an issue that I haven't been able to fix. I have a scrolltrigger moving some pinned images right to left and the final images has to stay close to the edge of the screen. The issue is when there is a resize it seems that the scrolltrigger just breaks and I don't know exactly how to handle the resize. I try to kill the tween and created again but it does nothing.

     

    Edit. It looks like the codepen is not working, don't know why. I had to open it and then click run to make it work.

    See the Pen porZXXr by godhandkiller (@godhandkiller) on CodePen

  15. 1 hour ago, GreenSock said:

    The algorithm that SplitText uses to discern when it's a different line looks at the y position of the resulting <div> elements and you've got text inside your <span> that's a very different font size which makes it shift beyond the threshold to be considered not on the same line. The solution is simple - by default lineThreshold is 0.2 which means 20% of the font-size is where it breaks, so you can just set lineThreshold: 0.5 or something like that instead.

    
    lineThreshold: 0.5

    I also simplified some of your code: 

     

     

     

    Better?

    Thank you! Little mad that this is not documentation but thank you for the help! I actually had to put it on 0.9 in my real project since the font is going to be much bigger than the example, but it still works!

  16. On 7/14/2021 at 7:21 PM, GreenSock said:

    Sure, the point was just to craft your selection to properly focus on the elements you want to split, that's all. Are you asking how to select the paragraphs that don't contain a certain class? And you said you can't control what classes are applied to the paragraphs, right? 

     

    Maybe: 

    
    let dynamicText = gsap.utils.toArray("#insights-shipping-text p:not(.flex)");

     

    Thank you for the answer, It was actually more complicated than using just the selector (just how the project is setup) but this give me the main idea of how to do it

×