Jump to content

Ivan Mocs

  • Posts

  • Joined

  • Last visited

Posts posted by Ivan Mocs

  1. 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

  2. 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
  3. 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: 


    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

  4. 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

  5. 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:

    Screenshot 2022-09-10 160220.png

  6. 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

  7. 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

    Frame 639.jpg

  8. 2 hours ago, Rodrigo said:



    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

  9. 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,




  10. 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


    • Like 1