newguy123

I was dabbling with that also, but in my case what seem to make the difference was the autoAlpha Do you have a second to briefly explain how you would have used the pointer-event:none instead, seeing that all titles with buttons get their property set in a loop in 1 go, same with the tween?

In my 1st post, there's an issue my end in that different code runs to the button I clicked In my next post with the 2nd pen, I changed opacity to autoAlpha instead, and that one seems to work great as expected. Perhaps the 1st time I tried autoAlpha I might have had a typo or something and that is why it didnt work, but as you see, it works now perfectly fine (only in the 2nd pen though)

In this one, I used autoAlpha, instead of opacity, and it appears to be working now Weird, as I said in my 1st post, I tried this and it didnt work before... https://codepen.io/newguy123/pen/OJqdJPZ

If what you're saying is true, then it seems to be more an issue with the label, to which ScrollTo is suppose to go to. Since as I say, if you click a button, then just SLIGHTLY manually scroll further, then the button ALMOST works. Anybody have any ideas?

Hi Following on from another post I made yesterday, this one takes it a step further. I have a simple image sequence, with 4 titles spread over the sequence. I have an initial jump button, which jumps to the 1st title. Then I have buttons to the next title etc, with the last title having a button to jump back to the 1st title. However, the buttons DONT ALWAYS WORK. Sometimes they are not clickable, other times it seems to run the wrong ScrollTo code, asif its seeing the other buttons on top of each other or something, I can't figure out what the issue is. I thought of perhaps using autoAlpha, instead of opacity, but that doesnt really seem to make much difference. If you run through the buttons, top to bottom, and keep going, you'll notice sometimes the correct button code is run sometimes on the 1st run, but jumping back to 1st title and then keep going, it seems to run the wrong button code. https://codepen.io/newguy123/pen/bGZOqdV

Nice one! Thanks And thanks for the tip in checking the codepen is using the latest versions of the various plugins. I always forget about that part!

Hi GSAP Team and Community I have this simple image sequence, with 4 different titles, coming up at specific frames. Each title div has an id of section1, section2 etc. I have a button top left, which I've currentl set with a scrollto, to scroll to section2, ie I would expect the sequence to advance, and the 2nd title to come up. ...but the button appears to not do anything. In fact, if you refresh the page, and scroll, the titles show up, however if you press the jump button, nothing scrolls and the title are suddenly gone if you manually scroll.... I want to add a button in different places, for each section/title. However I'm just testing with 1 button for now. https://codepen.io/newguy123/pen/oNVJYex

Hi Team GSAP On this page: https://gsap.com/scroll/ However, that is part of the free plugins as far I'm aware...

Hi all If I'm a Club GSAP member, and use one of the "paid" plugins, do I need to enter some API key into my dev code or anything to load the plugin? Or the membership only comes into play when installing the plugin via private npm and once its 'in' my dev project, it stays there and I can build the dev for dist without concerns that somebody could read my membership key and use it for their own purpose on their own sites?

My sincere apologies! I found the issue. We worked out the start/stop frames from our mp4, which is at 25 FPS. When the mp4 was converted to stills, it was exported at 30 FPS, meaning the sequence had way more frames than the mp4 and that's why things didnt line up! So all sorted now, thanks!!!

Ok but if my totalframes are 1000, I dont understand then how to get the 1st target to come up at frame 50 Even though I set its start to 50 and it's end to 100, it actually comes up around frame 38 or 39 Why is that, and how can I make it EXACT?

Thanks Rodrigo. It appears to work in this simple example, however if I stick a much longer sequence in here, and change the variable 'frameCount=147' to 'frameCount=1000', and then also adjust the target start and end values, then it does not appear to work. The start and end values DO NOT start on the correct frame in the sequence. For example if I enter for the 1st targets start value 50 and end value of 100, I expect that to correspond to the same frame numbers in the image sequence, but its corrently not like that. I saw a few weeks ago somebody on this forum mention something about a 'position' paramater that would perhaps work better for the titles to come up to the correct frames according to the frame sequence. I cant find that post now. Any idea what this 'position' value is and how that may be used instead?

...or would it be better to keep it as 2 different scrolltriggers?

Hi guys This 1st pen, which currently runs 1 scrolltrigger for the image sequence, and another scrolltrigger for 4 X equal titles as targets split over the duration of the image sequence: (see 1st pen) However, instead of having the 4 titles come up equally split over the duration of the image sequence, I want to have each title come up at a specific location during the image sequence, and also I want to have them as part of the image sequences' scrolltrigger, thus having 1 scrolltrigger in total, instead of 2, however, as you can see, I'm having no joy to do this. Now everything just animates by itself and scrolltrigger appears to have no affect as you can see here: (see 2nd pen) https://codepen.io/newguy123/pen/jOJKwQp https://codepen.io/newguy123/pen/LYarLmE

Hi I followed a bunch of threads, in the view of revisiting them later, but now I cant see where to find the threads I'm following Help please!

Sorry to resurrect an old thread, but is this example suppose to work on mobile? It's super smooth on pc, but on my Android the video is like 1 frame per week, I already scrub through all the text, before the video moves a few frames. On my iPad its also super smooth, just laggy as heckon my Android, which is on same wifi as pc and iPad... Weird. On my Android I tried Samsung Internet, Firefox and Chrome, but it makes no difference. It's extremely laggy on the video. I'm 100% sure its not a GSAP issue, so at the minute I'm just trying to confirm if other people with Android have similar issue with this pen, or its only me. Either way, would be nice if a community member could pinpoint what the issue may be... EDIT: Tried on my kid's Android also, same laggy result

Hi Guys Weird question I know, especially since the GSAP samples on this site are free and you can [learn] from that. But, I was wondering if anybody knows of something more structured like a course that covers various aspects of GSAP, when used in React? Free or Paid is fine...

I updated to version2 of useGSAP as per Jack and Rodrigo and I removed the scope as suggested. Things then work as expected so thanks both. However, taking it a step further then, In my actual app there's various other things that happen between the navpoints. To simulate this I added a 3 second sleep function between switching from the one navpoint to the next. So when the NEXT navpoint comes in, it fades in beautifully with opacity 0 to 1. However, how can I do the reverse for the outgoing navpoint? Currently I just abrubtly kill it by switching the state to false which hides the current navpoint divs, but before it gets to false, I want to reverse the animation so it fades out, then my other stuff happen, as simulated by the 3 second delay, and then the next navpoint comes in. So the coming in part works great. But I'm not sure how to get it to fade out without adding yet another state inside that set of divs and keep switching a state which is called for example setNowWeAreFadingOut to true and false. Any ideas? Stackblitz V2 with the fading in, and sleeping for 3 secs: https://stackblitz.com/edit/gsap-react-basic-f48716-qub4gn?file=src%2FApp.js

I saw it mentioned a few times here on the forum. Its pretty close to official launch from the sounds of it

Thanks Rodrigo, I'll open a new thread, so I dont flood this user's thread with something that may be irrelevant to them.... here's my new thread:

Hi Guys I'm following on from another user's thread, that had a similar issue. However my example has MULTIPLE states, and not just 1 like that user. Essentially what I'n trying to do: The page starts with a welcome, then you click. A new set of divs should come up, opacity 0% and fade to 100%. When you click again, these divs go away, and the next set should appear, fading also from 0 to 100 etc. I dont think I'm using the useGSAP correctly, as clearly it is not working currently. In my stackblitz editor I cant see the error, however in my local dev the error is: Here is the stackblitz demo, and I have the mainContainer set to 0% opacity in the css, but if set this to 100% and comment out the various useGSAP hooks, you can see that clicking successfully hides and unhides the various sets of divs. Anyway, herewith my simplified stackblitz demo: https://stackblitz.com/edit/gsap-react-basic-f48716-b4dnwv?file=src%2FApp.js

Can I have multiple useGSAP hooks? I'm asking as I have a similar situation to this user, where I want to animate things, but only if a state is active. However, I have it 1 step further, where I have a situation like this with multiple states. active1 active2 active3 active4 active5 Only 1 of them would be active at a time though So then, can I create seperate useGSAP hooks for each of those, or how would I then handle something like that?

Hi You can try make the site longer, ie, give it more height Try sticking this css into the body or your main div: height: 500vh; That will make the height 5 times the regular viewport height. So 100vh is same as 1 time the viewport height So if you want to make it 10 times more, you would give it a height of 1000vh Well, that's one way of doing it. There's probably other better ways also

If you're on a paid subscription, does it make any difference to the type of support you're entitled to, or it's the same as a free account, with the only difference being you get access to more plugins?

Well spotted, thanks Jack! Now I converted that to a react project. What do you think could be the cause of the image zooming perfectly fine on click, but then the zoomed version just sits there and doesnt go back down to thumbnail on click again? Looking forward to some more useGSAP() examples when that is announced. Hopefully there will be some examples in there that could give people like me some hints.