Maniak Development

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

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

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

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

Hi, I have an animation that I'm having issues with. I'm trying to reveal a text while also push the logo at the same time (look video reference) but I can't do it smoothly. On my codepen it shows a big jump for the logo image once the text is reveled.

Any help on how can I solve this?

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

@GreenSock hey! thanks for the help! I didn't see your reply until today, but yeah, it looks like that fixed it!

so, I would still need for an update to be pushed to the npm package to use it on a live project right?

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

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.

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!

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!

@GreenSock I'm back 🙃 but now I was able to pinpoint the problem to a scrolltrigger that is snapping to different sections and I created a CodePen that reproduces the problem

See the Pen MWQaMQx by diegoatmaniak (@diegoatmaniak) on CodePen

Yup! nevermind! I have a ScrollTrigger implementation that is creating some sort of conflict with ScrollSmoother on resize. I'll check my code!

@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!

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?

I need to update the width to full screen  of my red box when the user resize the screen to bigger and the scroll is on the top
 

before resize

after

See the Pen poaJpwb?editors=1010 by huzzidiel-the-flexboxer (@huzzidiel-the-flexboxer) on CodePen

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

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

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? 

On 8/20/2020 at 11:19 AM, GreenSock said:

Alright, I think I found something that may have resolved things. Would you mind trying the latest beta? https://assets.codepen.io/16327/ScrollTrigger.min.js

 

(you may need to clear your cache)

 

Better? 

Hi @GreenSock, thank you for shared that. Do you have some installation steps for business accounts?

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

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!

I have this issue with SplitText where the text inside a <span> is breaking into another line and I have no idea how to fix it.

According to the docs they spans shouldn't be a problem, but I don't know what is causing this

In my example, the  "this is the THIRD line" should be on the same line

See the Pen mdmBmyp?editors=1010 by godhandkiller (@godhandkiller) on CodePen

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

@PointC any update on when can I expect the update? Or is there a workaround I can use for now?

@GreenSock any updates on when the update is coming? Or is there a way to download the beta with NPM?