Ivan Mocs

I have a problem when the window is resized to mobile size, the value of 'start' scrolltrigger jumps, I don't know where the error is, so from that I think changing the 'scroller' value can fix it

1 hour ago, GreenSock said:

Yep, @Rodrigo is correct - you can't change the "scroller" value dynamically like that. Everything internally is based on that, so it's just cleaner to kill it and recreate the instance. 

 

Is there a particular reason you don't want to use gsap.matchMedia()? 

See the Pen XWqRPrr by adeivan (@adeivan) on CodePen

my_element.forEach((my_element, i) => {
	let tl = gsap.timeline({
		scrollTrigger: {
			trigger: my_element,
			scroller: () => window.innerWidth < 1152 ? "" : "[data-scroll-container]",
			start: "top top",
			end: "bottom top-=10%",
			pinSpacing: false,
			pin: true,
			// markers: true,
			scrub: true
		}
	});

});

9 hours ago, GSAP Helper said:

It looks like your demo doesn't have any HTML or CSS in it, so it's rather useless. Can you please provide a proper minimal demo so we can see the issue in context? 

 

This definitely looks wrong: 

nav_hide.scroll(...)

That's a timeline which doesn't have a "scroll()" method. Perhaps you meant nav_hide.scrollTrigger.scroll(...)? 

See the Pen oNdWXqm by adeivan (@adeivan) on CodePen

this is the code, when windows is resized, the autoalpha value changes

i have problem with scrub position when window is resized, i found the code in this forum, by using scrolltrigger.create the problem is solved but when i move page the autoalpha position immediately becomes 0, without any transition.

i am using gsap.timeline and i am getting error in code

scrubNavHide.scroll

See the Pen MWGpMOZ by adeivan (@adeivan) on CodePen

33 minutes ago, GSAP Helper said:

Your demo relies on position: sticky. If you remove that, it behaves identically using ScrollSmoother (or not), right? I think that's what Cassie is saying. If you think this is unrelated to position: sticky, please provide a minimal demo that doesn't use position: sticky and illustrates the problem and we'd be happy to take a peek. 

okay i know, i've removed position:sticky then i added pin via new scrolltriger, but this is the result :

See the Pen eYrZgXM by ivan-nizters (@ivan-nizters) on CodePen

i want to make it like using position:sticky like this :

See the Pen qBYZGeP by ivan-nizters (@ivan-nizters) on CodePen

14 minutes ago, Cassie said:

Hi there, position sticky doesn't work with ScrollSmoother as the containing element has a transform applied (this is a browser limitation)

You can use ScrollTrigger to pin elements instead!

the above code is already using scrolltriger and it works fine for pins, but when i add scrollsmother, only the sections inside the container are pinned

Without ScrollSmoother / ScrollTrigger Only:

I have a problem when using smoothscroll, the yellow mask container should be pinned to the top.

Before using the yellow smoothscroll the container is pinned to the top

how to solve this?

See the Pen eYrZgXM by ivan-nizters (@ivan-nizters) on CodePen

40 minutes ago, mvaneijgen said:

If that is an issue, just set the rotation origin (transformOrigin) to the left top

 

 

 

 

Or scale down your box faster, so that it will never hit the top or bottom bar.

 

 

 

 

FYI your box is already at it's original position, so no need to use a .fromTo() tween, just use a .to() tween.

 

If you want even more control on when things happen you could add a second ScrollTrigger to which you hook the animations and just have the current one for pinning the elements to the center of the screen. Or add an empty tween for X amount of seconds in front of your timeline. I usually do this with tl.add(() => {}, "+=1"), this way your timeline does nothing for 1 second (eg convert 1 second to the amount of scroll distance), but both of these add a lot more complexion to your setup, so you'll need to way the options for how much time you want to invest in your animation.

 

 

 

 

ahh thanks, I changed the scale value to 0.85 and used transformOrigin: "bottom", it's solved

2 hours ago, mvaneijgen said:

Just place your triggers in the center of the element and viewport, then they will trigger when the element is in the center of the browser and if you place your elements correctly (and you have) all work as expected, 

 

 

 

how to fix it other than using "transform y:" ? and I want to start the rotation animation, 40% from the bottom, which one should i change is the duration or "end:"? and opacity:0 in the previous section will only occur when the next section is 100%

See the Pen rNveWyO by ivan-nizters (@ivan-nizters) on CodePen

How to make the section panel size (100vh - the height of the top and bottom navbars), and also make it centered

See the Pen YzLzGvd by ivan-nizters (@ivan-nizters) on CodePen

See the Pen LYmNpvv by ivan-nizters (@ivan-nizters) on CodePen

is it possible to add a delay on the first hover, but when moving to another menu quickly there is no delay, but when the mouseleave has finished the animation, the delay will take effect again

See the Pen zYjrqqK by ivan-nizters (@ivan-nizters) on CodePen

hello i have a problem when the mouse leave animation is jumping,

animation starts fadein from bottom, but when animation is not fully finished and when mouse let fadeout to top animation plays

See the Pen zYjvKeB by ivan-nizters (@ivan-nizters) on CodePen

9 minutes ago, Anastasiya33 said:

Hey Ivan,

I have forked your demo and changed a little bit. Please, check it.

 

 

 

Thank you

2 hours ago, Rodrigo said:

Hi,

 

The problem is related to the fact that the mouse leave animation, animates the opacity of the container to 0. Then on the next mouse enter event, the animation takes the container from opacity 0 to it's current opacity value, which is also 0. The GSAP instance actually happens, the issue are the current and starting values for the from instance.

 

This seems to do what you want:

hover1.addEventListener("mouseenter", (e) => {
  tl.fromTo(container, 1.5, {
    yPercent: -100,
    autoAlpha: 0
  }, {
    yPercent: 0,
    ease: Power2.out,
    autoAlpha: 1
  });
  tl.from(image, 1.5, {
    yPercent: 100,
    scale: 1.3,
    delay: -1.5,
    ease: Power2.out
  });
});

Also I'd encourage you to find a way to use a single animation for hover effects and play/reverse it on each mouse event. It's far cleaner and easier to use, something like this:

const tl = gsap.timeline({ paused: true })
	//Add instances to the timeline

const button = document.findElementById("button");

button.addEventListener("mouseenter", () => tl.play());
button.addEventListener("mouseleave", () => tl.reverse());

Also you can toggle the reversed property of a GSAP instance:

tl.reversed( !tl.reversed() ); 

Happy Tweening!!!

thanks in advance, I fixed it and it worked

but why after animation both elements disappear

See the Pen WNJvOLy by ivan-nizters (@ivan-nizters) on CodePen

i have problem with mouseleave animation, animation only appears once

See the Pen WNJvOLy by ivan-nizters (@ivan-nizters) on CodePen

can i change the "end" property on the timeline when windows is resized?

I mean can when the highest viewport is 2560 : "end+=20%,"

and at the lowest resolution of 1200 : "end+=0%",

and when windows is resized then "end" will change fluidly

	var nav_hide = gsap.timeline({
		scrollTrigger: {
			trigger: ".hide-me2",
			start: "top top",
			end: "+=20%",
			// markers: true,
			scrub: true,
		}

can set fadeout pinning section 40% from bottom but still keep section 1 position in the middle or pin state, so when section 2 goes to 40% from bottom then section 1 starts the animation

See the Pen qBYByjZ by ivan-nizters (@ivan-nizters) on CodePen

how to make a sliding card with pinned and end with scale down and rotate

hello i have problem with transition animation and also text.

1.For page transitions I want it to appear from the bottom and disappear to the top, but when I press the button for a short time, the transition appears from top to bottom...

2.And for the fade in text animation I have the same problem, namely if I press the button quickly sometimes the last animation has not been completed, so the animation occurs twice.

I want when the button is clicked the transition always appears bottom->up, and the text always from 0 to 1 opacity.

This is my code

https://codesandbox.io/s/elegant-sara-5wz41g

10 minutes ago, GreenSock said:

I'm not sure what you mean by "slow scrolling" - do you mean smooth scrolling? Perhaps you're looking for ScrollSmoother:

 

 

I mean like parallax maybe? so the hero section scrolls a bit slower, and the content section scrolls and floats over the hero section, like  this https://custo.io/

hello how to make slow scrolling hero section like on this site https://custo.io/

and how disable smooth scroll on mobile viewport

See the Pen JjLyKdE by ivan-nizters (@ivan-nizters) on CodePen

Yup! Thanks for helping...

how to make random words animation on first page load like this site: https://dennissnellenberg.com/ 

hello, i am using gsap scroll trigger, and it is working, and i want to combine it with locomotive scroll but its not working.

and how to add back to top function?

See the Pen XWEXYRG by ivan-nizters (@ivan-nizters) on CodePen

Hello, how to make Back to top with progress indicator like this:

i use locomotive scroll in html

I use it, but it not work : Back to top with progress indicator 2 (codepen.io)

See the Pen LoWqqL by stijnlammerink (@stijnlammerink) on CodePen