Jump to content
Search Community

momo12

Members

  • Posts

    124

  • Joined

  • Last visited

 Content Type 

Posts posted by momo12

    Can't fade out the elements!

    in GSAP

    Posted

    2 hours ago, momo12 said:

    @mvaneijgen Sorry again. This is the code I updated to keep the last follower appear if the mouse is not moving for a while and disappear the rest. but somehow it does the opposite!

     

     

     

    Guys @Carl and @mvaneijgen, I found a solution to disappear the followers if the mouse doesn't move for 2 seconds and keep the last one only appeared. But some of them disappears sooner not in the order they appeared. Can you please help?

    See the Pen zYyegme by talewoy290 (@talewoy290) on CodePen

    Can't fade out the elements!

    in GSAP

    Posted · Edited by momo12

    13 hours ago, mvaneijgen said:

    It isn't my code, it is from @Carl, but linking the video where it is from for anyone coming to the post at a later date. 

     

     

    It is always a great idea to share what you've already tried, that way we can see your thought process and thus better help you understand the tools. 

    @mvaneijgen Sorry again. This is the code I updated to keep the last follower appear if the mouse is not moving for a while and disappear the rest. but somehow it does the opposite!

     

    See the Pen gOZqNMQ by talewoy290 (@talewoy290) on CodePen

    Can't fade out the elements!

    in GSAP

    Posted

    1 hour ago, mvaneijgen said:

    What have you tried your self. The best way to learn these kinds of things is to get your hands dirty and try several things. Personally I use codepen to try out new ideas, I usually then just keep forking my pen to try out different ideas, either because I think it could be better or my original idea was not working. Usually at version 10 I got something I'm happy with. Creating forks of your pen will allow you to fall back at earlier ideas if something new is not working.

     

    This pen is from the following tutorial btw 

     

     

    In this fork I've crated a timeline of the tweens, so that they frist animate out get set to there new destination and then animate in. I still strongly encourage you to try your hand before checking the demo, that is in my opinion the best way to learn. Good luck and happy tweening!

     

     

     

    I didn't know that was your code. Thanks a lot! Now I see what I was doing wrong ... I even tried to use GSAP.on complete but didn't work. Actually, I have tried around 20 ways to do so but didn't work. I

    Can't fade out the elements!

    in GSAP

    Posted

    Guys I have a question!

    The other day, someone suggest I use this code to create a mouse trail effect but the thing is I can animate the followers element to disappear before they move to the next position. I want to scale them down to 0 and set their opacity to 0 but they just disappear. Appearing animation works perfectly!

    See the Pen oNJmLjq by talewoy290 (@talewoy290) on CodePen

    Need help to understand something

    in GSAP

    Posted

    15 minutes ago, mvaneijgen said:

    Sure thing, not really a GSAP question, but have you seen css clip-path. I always use https://bennettfeely.com/clippy/ to create my shapes, note that to have GSAP tween this value, make sure you animate between shapes that have the same amount of points and that the strings have the same values suffix (my rule: give every number a % sign, even if the tool above doesn't put one). Hope it helps and happy tweening! 

     

     

    See the Pen

    See the Pen GRPvdPY?editors=0110 by mvaneijgen (@mvaneijgen) on CodePen

    by mvaneijgen (@mvaneijgen) on CodePen

     

    Thanks a lot for it! I knew about css clip-path but couldn't animate it with GSAP but now I see what you mentioned about your rule which solved my problem! 

    Flip question: Why Flip is behaving weirdly?

    in GSAP

    Posted

    Guys,

    I created this pen from my previous questions I've asked but there is an issue. Why Flip is not working very well to set the position and z-index of the boxes? What I'm trying to acheive is setting Z-index of each box and also, set its position to Absolute. Just not sure why it doesn't work!

    Also, the end of the animation is set to "bottom top" but it ends earlier! Another thing is why the gap of the grid is not working anymore after the Flip reverts back?

    See the Pen oNJvyWz by talewoy290 (@talewoy290) on CodePen

    GSAP Flip issue

    in GSAP

    Posted

    4 minutes ago, mvaneijgen said:

    @momo12 I'm not sure what you question is. 

     

     

    Making things responsive has more to to with CSS then with GSAP. We have gsap.matchMedia() https://greensock.com/docs/v3/GSAP/gsap.matchMedia() if you want to have other things happen on different screen sizes. But I don't get what should be responsive in this case. 

    I don't want the reparenting happens as an animation. Like what scroll trigger does, I want the grid cells moves and gets reparented slowly as we scroll down. 

    GSAP Flip issue

    in GSAP

    Posted

    11 minutes ago, Rodrigo said:

    Hi,

     

    As shown in this example you can't scrub the reparenting of the elements, that is going to happen when creating the Flip instance. What you can do is scrub the timeline that the Flip.from() method returns:

     

     

     

    Hopefully this helps.

    Happy Tweening!

    I couldn't understand this code. I could manage to create something else and was hopeful someone might be help me to learn to do what I'm after.

    GSAP Flip issue

    in GSAP

    Posted

    5 hours ago, mvaneijgen said:

    The best thing to do is to have the flip already happen on page load and then just .play(), .reverse(), ect at the point you want.

     

    I've forked your pen removed the function and given the tween a name, then I can just call .play() and .reverse() on it, based on onEnter of the ScrollTrigger or onLeave.

     

    I'm not sure what it is you want to do, so please change it for the logic you want, but I don't see why you need multiple ScrollTriggers for it. Also be sure to set markers: true, so that you can see what is going on. Because in your original pen start: "top top", end: "bottom bottom",  will result in it being completed when it starts, so nothing will happen.

     

    Hope it helps and happy tweening! 

     

     

     

    Is there a way to make it responsive to scroll position? As we scroll down, they get reparented.

    GSAP Flip issue

    in GSAP

    Posted 

    sap.registerPlugin(ScrollTrigger, Flip);

const main = document.querySelector(".small-grid");
const blue = document.querySelector(".title-sticky-wr");
const boxes = gsap.utils.toArray(".grid-item-wr");

function flipBoxes(target, container) {
    let state = Flip.getState(boxes);
    boxes.forEach((box) => container.appendChild(box));
    return Flip.from(state, {
        scale: true,
        ease: "power3.out",
        duration: 1,
        stagger: 0.2
    });
}

ScrollTrigger.create({
    trigger: "#one",
    start: "top top",
    end: "bottom bottom", // ScrollTrigger end parameter changed
    onToggle: self => {
        if (self.isActive) {
            flipBoxes(blue, main);
        }
    }
});

ScrollTrigger.create({
    trigger: "#one",
    start: "bottom top", // ScrollTrigger start parameter changed
    end: "top bottom", // ScrollTrigger end parameter changed
    onToggle: self => {
        if (self.isActive) {
            flipBoxes(main, blue);
        }
    }
});

    Hello guys, I havethis code which reparents the grid-item-wr on scroll with Flip library from main to blue on scroll and when we scroll up again, it reparents the grid-item-wr once again from blue to main. But not working!

    GSAP Flip not working!

    in GSAP

    Posted

    1 hour ago, Rodrigo said:

    Hi,

     

    I already mentioned the example in this particular post by Jack:

     

    See the Pen

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

    by GreenSock (@GreenSock) on CodePen

     

     

    Please do your best to follow the links we provide. We do so not to clutter threads but to help and guide users to the examples we believe better fit the issue at hand.

     

    Hopefully this helps.

    Happy Tweening!

     

    Thank you

    Flip & Resize

    in GSAP

    Posted

    On 3/24/2023 at 9:39 PM, GreenSock said:

    The problem is that you're just creating that Flip tween once and baking all the values into that, but if your screen resizes you need those values to get updated. Here's one way you could do it: 

     

     

     

    Is that what you were looking for? 

    Great

    GSAP Flip not working!

    in GSAP

    Posted

    9 minutes ago, Rodrigo said:

    Hi,

     

    You could take a look at this example:

     

     

     

    And the one created by Jack in this thread:

     

    Hopefully this helps.

    Happy Tweening!

    Thanks again! But as you can see, the animation runs as we scroll but I want it be responsive... Somehow, the more we scroll the more div block moves 

    GSAP Flip not working!

    in GSAP

    Posted

    24 minutes ago, Rodrigo said:

    Hi,

     

    It seems to me that you have a glaring issue regarding the way the Flip Plugin works. Right now you're passing a DOM node to Flip's from() and to() methods. Those methods take a Flip state object not a DOM node like regular GSAP from and to methods do.

     

    Also you are passing elements that reside in a Grid display to another element that uses a Flex display, that spells trouble all around IMHO.

     

    Since I'm far more experienced and confident with Flex I made this example where both elements :

     

     

     

    The main idea is to move the elements to the blue parent and then animate that particular transition using Flip.from().

     

    Hopefully this helps.

    Happy Tweening!

    Thanks for mentioning this! But is there a way to make it responsive to Scroll position?

    My loop is not working properly

    in GSAP

    Posted

    11 minutes ago, akapowl said:

     

    Neither the horizontal-, nor the vertical-loop examples linked on the documentation page I referred you to above, do use a grid;

    So I suppose the answer for your question is: No, you don't have to use a grid at all.

     

     

     

     

     

     

     

    You're a life saver! Thanks a lot :)

    • Like 2

    My loop is not working properly

    in GSAP

    Posted

    9 minutes ago, akapowl said:

    Hello there, Momo.

     

    Getting loops like that right will involve quite some consideration.

     

    Luckily for you, @GreenSock has created a helper function for looping like that.

     

    It is is mentioned in the thread linked below among others, and also in the docs' Helper Function section.

    https://greensock.com/docs/v3/HelperFunctions#loop
     

     

     

     


     

     

     

    Thanks a lot for this! Is there a way to let users scroll? Or it affects the movement of the slider?

     

1
2
3
...
5
Page 1 of 5  
×
×
  • Create New...