Ivan Mocs

I'm confused about how to determine the start and height, I want each element that is selected by [data-scroll] to have its own end, I mean when one element exits the viewport first, the transform movement stops.

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

How to make each element have its own "start" and "end"

its possible to disable the transform that runs outside the viewport?

if seen from the inspector when element 1 has out of viewport "transform" is still running, I want it to be paused when out of viewport.

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

1 hour ago, GSAP Helper said:

Sorry, but it's very difficult for me to understand what you're asking. It looks like you're using a very old version of a basic ScrollSmoother that isn't full-featured. Is there a reason you're not using ScrollSmoother? We can't really support limited implementations like this one. 

If you're still having trouble, please make sure you make it extremely clear what the problem is what what you want to have happen, like: 
 

• A clear description of the expected result - "I am expecting the purple div to spin 360degrees"
• A clear description of the issue -  "the purple div only spins 90deg"
• A list of steps for someone else to recreate the issue - "Open the demo on mobile in IOS safari and scroll down to the grey container" 
• A minimal demo - if possible, using no frameworks, with minimal styling, only include the code that's absolutely necessary to show the issue. Please don't include your whole project. Just some colored <div> elements is great.

 

Sorry about that, I'm just trying to learn without using plugins, in the code I only want the scrolltrigger to run outside the  class OwnScroller or onLoad() code, therefore I am confused why the scrolltrigger cannot run perfectly like I put the scrolltriger code inside onLoad().

Update : Solution found, thanks in advance

I have added pinType : tranform but when scroll like jelly:

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

this is when I put the scrolltrigger code into thisScroll(), the scrolltrigger can run perfectly:

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

but how to make the scrolltrigger work properly like it does in thisScroll()?

I have a problem when using the scrolltriger outside of the OwnScroller class, when scrolling the ScrollTrigger has a glitch, but when I install it into the OwnScroller class, the scrolltriger is fine, how do I fix this?

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

I have a problem with the Scrolltrigger running upside down when scrolling.

I took the code from here and it runs up when scrolled : 

See the Pen RwVGNea by GreenSock (@GreenSock) on CodePen

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

ahh i see, thanks

position does not match the cursor position when the page is scrolled. the position of the image is even away from the cursor and not in the center of the cursor

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

is it possible to make a lerp effect with gsap, I want when scrolling the distance between elements expands and returns to its original value again.

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

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,
		}