AsKadir

Hey! I'm trying to recreate this menu https://www.steven-hanley.com/ So when you hover on the navigation and move mouse from right to left or opposite, menu starts to scroll. I saw in the forum a codepen with exactly the same vertical effect using gsap, but I've tried to find it all day and nothing. Can someone give me advice from where should I start, please?

Never mind guys about this. All should I do, just move variables: offset = self.offset(), offsetL = offset.left, offsetT = offset.top, inside cursorMove(). ? Can I delete my post?

Hey! I have an issue with my offset, if you mouseover text you will see image reveal and mouse follow. So everything is great, but for example I have block above whose height can be changed, so my offset after that will be not right. Can you give me advice, is there any methods in gsap that can update offset()? I thought about gsap.ticker(), but not sure is it right direction or not.

Thanks a lot!!!

@ZachSaucier I tried disable(), but the same result. With this new method everything is working great! How do you think when new gsap release will be? I'm finishing up my wordpress theme, but I would like to use this method very much.

Hi again! Now I have another issue with window resize, When I reduce window size, the ScrollTrigger doesn't kill() itself, what am I doing wrong? What's working: if I refresh page with small window size, ScrollTrigger is killed and when I increase window size it enables ScrollTrigger, but not in reverse direction with window size deacreasing. Can you help me, please?

No( But after our dialogue I've found out that I can make animation that I want like this: https://codepen.io/ChicagoJostik/pen/MWKoLEq ? sorry for disturbing you!

@ZachSaucierHey, Zach! No, I mean when element is pinned, you scroll down and element is moving with the same speed as scrollbar, right? But what if we can make when you scroll, pinned element will move with some delay relatively to scrollbar. For example, popular gsap cursor animation, if we use gsap.set() it will be deadly pinned to cursor, but if we use gsap.to() with some duration, the cursor will be moving with duration, right? So in my codepen pinned element is the cursor with gsap.set(), but I want to make gsap.to() with duration. Did you undestand my explanation?) I'm so sorry.

Hey! I have a question about pinning in ScrollTrigger. Is it possible to make pinning with scrub? I mean when I scroll, pinned element should catching up its fixed position with smooth ease. I understand that it uses position: fixed, so I can't imagine how it can be done. Can you give me advice, please?

@ZachSaucier Thanks, Zach!

? You're right, I tried in Google Chrome and Safari and everything is working, I'm using macOS Mojave 10.14.6, Mozilla Firefox 77.0.1 (64-byte).

Never mind about this, my brain doesn't want to think, let's imagine we have a lot of codes and inside box I have another box)) This demo link is right. Can you look again, please? So first state this with black border-color: Second state after mouseenter with white border-color: Third state after mouseleave this with blue border-color: And if you look at first and third states they aren't same, right? I can't understand why. So I had black border-color, but after mouseenter and mouseleave I have blue border-color. Does this make a sense?

and can you give me example of what you mean by one tween?)

Hi, Zach! No, I have a black border-color, on mouseenter I'm changing it to white, but on mouseleave I'm getting blue border-color, not my black that I had before. Can you look again, please?

Hi! I have a simple example, my circle has a black border-color, on mouseenter in my timeline I'm changing its color, but on mouseleave I can't get it back, I have a decision, but it's not well looking, maybe there is a feature that I don't know. Can you help me, please?

@Vishnu Manda Hey, Vishnu! It's better to use linear gradient. You can see it here https://codepen.io/ChicagoJostik/pen/Yzyajrr You can easily replace css hover animation into gsap!

@emilychews Hey, Emily! You should read the documentation about ScrollTrigger and check the video https://greensock.com/docs/v3/Plugins/ScrollTrigger ScrollTrigger should be inside timeline: var tl = gsap.timeline({ scrollTrigger: ".box-3", }); tl.to(".box-3", { duration: 3, opacity: 0.1 });

@Alexyn0o Oh, sorry! I didn't notice this, you can do it like this: $(".just-a-menu-icon").on("mouseenter", function() { tl.play(); }); $(el).on("mouseleave", function() { tl.reverse(); });

@Alexyn0o Hey! Not sure why in demos this line is used: this.animation = tl; But for your simple example you can remove it and in last code lines change this: $(el).hover(function() { //animation_init($(this).find('.menu-v'), $(this).find('.menu-v > li')); this.animation.play(); }, function() { this.animation.reverse(); }); to this and that's it: $(".just-a-menu-icon").hover(function() { //animation_init($(this).find('.menu-v'), $(this).find('.menu-v > li')); tl.play(); }, function() { tl.reverse(); });

@Ezra Siton Hey, Ezra! I think it's the best way, if you don't want to use height and position absolute: https://codepen.io/ChicagoJostik/pen/oNbgwbE

00. and when I enter first block 01. and etc.

The spans are set translate(0%, -100%) before animation has been animated. I can't understand why. And animation is not as expected, but this is not a problem I think. The main problem that the spans are set -100% before animation. Maybe there is possibility to use "-=100%" somehow?) https://codepen.io/ChicagoJostik/pen/rNxNxjo

I tried and it's not working like I expected.

@ZachSaucier Zach, sorry for disturbing you! But if you refresh your codepen and look, the spans are set -200% by default. I can't understand why it's happening. So it starts from 02., but if you enter everything working correct. Sorry for my explanation, just look again.

@ZachSaucier Thanks a lot!!!