Jump to content
Search Community

flefloch

Members

  • Posts

    10

  • Joined

  • Last visited

 Content Type 

Posts posted by flefloch

    Tween Y an element and resize it's container

    in GSAP

    Posted

    Hey Shaun,

     

    thanks for your answer.

    Resizing the container seems a good solution (the size will be fixed since my elements are moving up to replace an element I am masking).

    I did a few tests but my container seems to be going up instead of resizing itself by cropping it's bottom. But I think this is probably related to some CSS values I'm having somewhere. i'll have to dig a bit further.

     

    Just one question : What is the 0 value you add at the end of your tween?

    Tween Y an element and resize it's container

    in GSAP

    Posted

    Hello,

     

    first I need to thank you once again for this amazing lib.

    I have several <div> elements I'm applying a tween on their Y value to make them go on top of my page.

    My problem is that the container of my elements doesn't resize after my tween are complete so I'm having a gap between my moved elements and the bottom of my page.

    I guess this isn't related to gsap but rather with some CSS styling but I can't figure out what I can do to fix that.

     

    Anyone have an idea?

    See the Pen WNOrRgP by fleflochn (@fleflochn) on CodePen

    React - Tween Y pos of items in a list and refresh position

    in GSAP

    Posted

    Thank for this demo.

    I'll have to change few things since my list is actually coming from the props (updated by Redux store) so I need to clean the itemsRef array when props are changed  but I think I get the point : use Timeline instead of multiple tweens created seperately and sending params onComplete.

    Just one question, you're using gsap instead of directly TweenLite, is this for performance issue or is it just a habit?

     

    Thanks for your help 👍

    • Like 1

    React - Tween Y pos of items in a list and refresh position

    in GSAP

    Posted

    Hello,

     

    I've been using a lot GSAP back in time when I was working on Flash animations and I'm more than happy to see that this great lib is still alive 👍

     

    I'm working on a React webApp and when needing to add some tweening on it my first thought was obviously for GSAP.

     

    Here is my problem I have a list of items. When the user click on one item it should disappear (simple tween on opacity) and then all the items above need to tween up to fill the space left by the disappeared item.

    After animation is done I'm removing the item from my state, but my problem is that all the divs keep the transformation applied before when what I want is to start a new "fresh" list so user can click once again and launch the same animations.

    I'm wondering if my probelm couldn't be that i'm doing it the wrong way and messing with the refs but I can't see how to do it other way.

    Any help is appreciated.

    Thanks

     

    See the Pen QWypRgZ by fleflochn (@fleflochn) on CodePen

    ThrowPropsPlugin end value and BlitMask Wrap

    in GSAP (Flash)

    Posted

    Hello,

     

    I'm actually trying to make a simple time picker for an AIR app (like the one you have when you select hours and minutes to create an alarm).

    First I want to thank you for all the good stuff you provide to us, it saves me a lot of time ! :)

     

    To make an infinite scroll I use the wrap param for BlitMask, and I created an Array with my 24 positions (for the hour scroller for example) and I pass it to the end variable when making my ThrowProps, like this : 

    ThrowPropsPlugin.to(this.mContainer, 
{throwProps: { y: { velocity:yVelocity, resistance:500, end : this.aItemsPos } }, onUpdate:this.mBMask.update, onComplete:onTweenComplete, ease:Strong.easeOut}, 10, 0.3, 1);

    But everytime I reach the first or the last element it comes back to its original position. For example I can go from 00 to 01, 02, 03, etc... but I can't go to 23.

    I guess it's normal since the values I am trying to reach aren't in my array, but do you know how I could handle it ?

     

    Thank you.

×
×
  • Create New...