TerraHQ

hey @Rodrigo I think you are right! thanks for the code improve, it could be all in one timeline, but the problem is that I dont want to animate background position unless is not visible on the page. If you see my image, the last element is not visible on the viewport but is animating. Finally, why are you adding that orange section above? Is it because my markup is not correctly? If something is wrong on that side pls let me know, suggestions are always welcome

Hi there! I have a question, I would like animate background position of the card-b from 75% to 25%, but I only want this to happen to cards that are visible in the viewport. So far I add a simple tween to to card-b. Thanks!

thank you so much for your help, but in that case is going over my pin section which is not what I want. what I want is that once the pinned section ends, you can keep scrolling normal. I've made another codepen, that it's better but not exactly since there is a white gap, pls take a look on a large screen. https://codepen.io/andresclua/pen/YzvgONz

Hey! I'm having this issue that everything works as expected, but last element is stays pin on the screen and on top of the magenta/following section. Is there any way to prevent this?

Hey There! I've got a few questions: 1 - Custom cursor should work with "top/left" or with transformX/TransformY ? ( performance) - Reference this article - would love some tips on how to proceed with it. 2 - How could I have some kind of animation using split text when I enter to the card on hover - Reference this Thanks!

Can you provide a codepen?

Hey! I would like when: mouseenter - > animation start with some kind of increment of speed, mouseleave -> animation stops slowly <- this is working using timeScale, but I dont know if that's the best solution. Thanks!

hey There! This is working! But I would like to have some "speed" so I can make it faster/slower. Is there something to make "endless" animations ? Any help on this? ?

Closed this issue.

I have a problem with the animation when I use filters. I have 4 filters which load different content without refreshing my page: All - Content - Design - Digital. In this case, the pills change depending on the filter I am in: All, Content and Digital - have 7 pills Design has 6 pills. Example of the error: I’m in All (7 pills are visible), I switch to Design (6 pills are visible), and when I go back to All, instead of seeing 7 pills again, 6 are visible, the seventh one does not appear – GSAP does not take into account the seventh pill so it does not animate it. Could someone help me to know why this happens? – Thank you!

Try it now @SteveS

I have an issue with the animation in some cases. Using filters (for example: All - Content - Design - Digital), I choose what content to see on my page without refreshing it. In -All- , -Content- and -Design- there are 7 pills as seen in the codepen. In -Design- there are only 6 pills. for example, in -All-, the animation runs correctly. The problem occurs when I switch to -Design- and back to -All-. GSAP does not take into account the last pill (the seventh in this case) so it does not animate it, removing the inline styles that GSAP adds according to the animation (opacity and visibility). This makes that the last pill does not appear on the screen but inspecting the code, there it is without being animated.

Hello! I have a doubt, I would like certain spaces not to be "affected" when pin some element. Ideally I would like to see it as the second image. Thanks in advance!

thanks - that worked @GreenSock

Hey Forum, I would like the circles on the center starts fading from the center before the outter ones disappear. How could this be solved?

solved usingg one animation! tsm

hey @OSUblake @mvaneijgen @elegantseagulls Still working on this. My main goal is to have 2 complete diff animations. I know that the user is not going to enter/leave super fast, but I want to accomplish the best experience if possible. https://codepen.io/elisabetperez/pen/gOoboZQ grabacion-de-pantalla-2022-03-14-a-las-174829_Uj0fRUTg.mp4

hi @mvaneijgen The exitTime concept from the video is an interesting one but ideally I’d like to use 2 different animations instead of playing and reversing the same animation. 2 animations and 2 different timelines.

hey! so I’m doing this little animation for this blue card where: 1) on mouseover I do a .5 duration initial animation ) on mouseleave I’ve got a different .25 duration animation. All animations are triggered after hovering the Explore button at the bottom. The mouseover and mouseleave event are naturally triggered so fast that I’m delaying all animations using debounce. However, even if each method is triggered correctly (you can check the console messages), if you move the mouse very fast over the Explore button, even when you leave the button and the message says ‘mouseleave’, the animation is still on and bugged. The only way to solve this is if I’ve got 1 animation played and played on reverse or 2 animations but with the same duration. Why is this bug? Thanks in advance

hello !, I'm trying to get the full width of the container, it doesn't return the value as expected. It is very likely that I'm doing something wrong. Attached 2 pens, one "without gsap" and another with gsap. Thanks a lot! Thanks in advance

thanks @OSUblake @Cassie I understand that is the default behaviour, and I will try explain to the client. That being said, what should be the approach if I don't have any other choice but doing it?

hello, merry christmas lol! ? ? I have a question that a client has asked me and I really don't how to approach, since I'm not an expert with this library. I attach a very simple pen. My client is asking for the following: "Once you stop scrolling, the sections still move, easing down, which should not be the case. Once the user stops scrolling (whether taking finger off spacebar or up/down arrow, or stop scrolling with the mouse), the sections should stop moving as well, instantly". I know that is not the default scroll behaviour, and already has the "ease: "none"". I'm 80% sure that is not possible, but I'm 100% sure there is a technical explanation that I can give to my client. Thanks in advance.

Hey @Born05, please install this. https://www.npmjs.com/package/nuxt-gsap-module

hey @OSUblake Thanks for the tip, I've updated the codepen but I can't get to work as I want. https://codepen.io/andresclua/pen/zYEZRxL I would like as soon as the magenta box is visible, move it to X axis until is not visible on my screen.

Hello! I would like to get some help on this The idea is that the div "box" in chapter 2 behaves like a parallax effect on X axis(different speed while scrolling). At the same time try to respect at the position sett up via CSS at the center of the screen