Jump to content

Ivan Mocs

  • Posts

  • Joined

  • Last visited

Posts posted by Ivan Mocs

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

    Screenshot 2023-02-01 052559.jpg

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

    • Like 1
  3. 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

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

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

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

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

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

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

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