
Ivan Mocs
-
Posts
34 -
Joined
-
Last visited
Content Type
Profiles
Forums
Store
Blog
Product
Showcase
FAQ
ScrollTrigger Demos
Downloads
Posts posted by Ivan Mocs
-
-
-
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-
1
-
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()?
-
-
-
ahh i see, thanks
-
-
-
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()?
-
can remove property 'scroller' in scrolltrigger when on mobile without mediamatch() ?
this my code :
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
-
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, }
Its possible to disable Transform while out off viewport on multiple element
in GSAP
Posted
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
When viewed from the inspector on the element with data-scroll="0.75", the transform value is still changing even though the position is out of the viewport area.
I've tried to set the "end" but when one element exits the viewport, the other element's transform also stops.
How to make each element have its own "start" and "end"