Jump to content
Search Community

namisuki

Members
  • Posts

    18
  • Joined

  • Last visited

Posts posted by namisuki

  1. Hi,

    I would like to convert HTML5 animations to video.

    we have ccapture.js for converting canvas animations to video but it is a real headache to convert html5 animations to video. Yes, I did the research for the past two days on this single topic and I read all the threads in this forum but nothing helped much. 

    (Here are some of the posts I read here: )
     

    https://greensock.com/forums/topic/19081-is-it-possible-to-generate-mp4-from-gsap-animations/?ct=1595485518

    https://greensock.com/forums/topic/18038-timelinelite-to-mp4/?ct=1595485518

    https://greensock.com/forums/topic/22038-recordexport-html5-animation-as-mp4-video/?ct=1595485520

    https://greensock.com/forums/topic/14732-is-there-anyway-to-export-animations-as-video/?ct=1595485522

    https://greensock.com/forums/topic/14596-export-to-animated-gif-mp4-or-mov/?ct=1595485524

     

     

    I have found few online services like

    https://urlrec.com/

    https://html5animationtogif.com/
    and

    https://omnirender.com/

    all these are working great but when I contact for API solution. there is no reply from them. do you know any service like above and is active?


    or it would be even better if someone could help me get this working (I'm even willing to pay to someone who can help me set this up)...I saw @swampthang has been working on similar issue...hope maybe he (or anyone) can help.

     

    The end result should be a video not a gif. I saw solutions to extract frame by frame to PNG/JPEG and then converting to gif/video but it is not providing good results and takes too much time for videos more than 2 mins.

     

    Regards,

    Nami

  2. Hi @GreenSock,

     

    Thank you so much for your reply. I implemented the desired effect with your instructions. it came out pretty well in the below code pen. however when trying the effect diagonally, I kind of have hard time figuring out which 'd' value to animate( when i try to animate the 'M' value nothing happens). please refer the second code pen to see where i'm standing right now.

     

    See the Pen zeKBpm by namisukichin (@namisukichin) on CodePen

     

    is there a way to set the rotation the clippath of the above codepen so that the effect looks diagonal or animating the 'd' values are the only option?

     

    diagonal try:

     

    See the Pen aXmBqL by namisukichin (@namisukichin) on CodePen

     

    Thank you.

  3. Hi There!!

     

    I've been working with GSAP for a while and it is awesome in every way possible for web animations. As a newbie, I stumble when I go about implementing some complicated animations (atleast complicated for me). It would be of great help if any of the superheros (anyone who is of great help is a superhero, LOL) could help me figure out a way to implement a wipe image slider animation like the one in the below link but that looks like the image is wiped from a black board (diagonal wipe of the attached codepen).

     

    slider animation: https://codyhouse.co/demo/animated-svg-image-slider/index.html

     

    sliceimage codepen: (here the slices fade away, is there a way to make each slice wipe away one by one revealing the next image? like SVG masking or clip path)

    See the Pen qadqxE by sgorneau (@sgorneau) on CodePen

     

    Thank you! hope new year is going good for you.

     

  4. Hi @mikel

     

    That is exactly the effect!!! another year another success man! more success to be on your way.

     

    Thank you for your solution, you're pro.

     

    PS: if i need to add or remove images to the above? how do i go about that?

     

     

    • Like 3
  5. Thank you so much for your reply!! you're really helpful.

     

    LOL i'm here after last year!!!

     

    actually thats exactly not the effect i'm trying to achieve.

     

    The first image is not shown twice it's actually same image url used in first and 3rd image that is why it looks like first image shown twice. (thats not necessarily required)

     

    the effect is like images are stacked in z index. when the user clicks the first image it does the 'closing' fold animation then it moves to the last in the stack. then the second image is shown withoit any animation which makes it look like the first image is removed form the stack and obviously the second has to be seen.

     

    i'm doing this in my attached pen in the OP. but the long code, firefox issue and the effect is the problem.

     

    Thank you so much, Happy new year!!! :D

     

     

  6. Hi There!

     

    I'm looking to create a slider that has a paper fold effect. the concept is, when the user clicks on the image that is visible on screen, it folds like a paper and then goes back of all the images and the image that was behind the visible image would show up on the screen. Each time the user clicks an image the same animation happens, when the user reaches the end of all the images, the loop again starts. (please refer my codepen to understand the effect further)

     

    i was able to partially achieve that with my codepen. however i need three things done with it, if possible.

     

    1) could you please help me make the animation smoother? like the image first folds horizontally and then folds vertically then the z index happens.

     

    2) i'm  a newbie to gsap so i got whole bunch of code sitting there to make this effect happen...could you make the code simpler but still achieve the desired effect and functionality?

     

    3) my slider fails in the z-index part in firefox, is there a possible fix?

     

    Thank you so much.

    See the Pen RERNZr by namisukichin (@namisukichin) on CodePen

  7. Hi @mikel

     

    Thank you for your version. i fiddled around with it sometimes and i got to the below effect (haven't achieved the desired effect yet but this is something i got).

     

    Is there a way to set css properties at the middle of an animation? like an onComplete callback function on completion of the first fold? I almost got the desired effect but the front 3 and front 4 was overlapping to the front after the first fold. so what i wanted to do was to set teh background of the front 3 and 4 to white on completion of the first fold so that it looks smoother.

     

    See the Pen QzNXGj by anon (@anon) on CodePen

     

    Thank you for your help :)

  8. Hi there!

     

    I'm trying to achieve the paper folding effect with greensock. in which when the div is clicked it starts animation like a folded paper. I was able to get the animation happen but i'm having problems making the backside of the paper to be animating with the front which makes it look like as if the image is being folded front and the backside of the image is white. Please help me achieve that effect with the attached pen.

     

    Thank you,

    Nami

    See the Pen ebJXxK by namisukichin (@namisukichin) on CodePen

  9. Hi Gsapians!

     

    Could you please help me achieve the booklet flip image slideshow animation just like in the link below. I would like to implement that in my project but i thought it would be better if i get a code snippet for achieving just that with GSAP rather than including the whole plugin. I know it is simple in GSAP than downloading a plugin for that but i don't know the way to come around with a technique.

     

    https://tympanus.net/Development/BookBlock/

    See the Pen PXqrXj by anon (@anon) on CodePen

  10. Hi @OSUblake

     

    Thank you for your reply, it helped me a lot, great explanation!

     

    Here is what i did, I created a master timeline and wrote all the animation inside separate functions with timeline for each and finally added it to the master timeline using the master_timeline.add(function_name()) method.

     

    it is demonstrated in your demo here: 

     

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

     

    Mine edited:

     

    See the Pen BvaOwg by anon (@anon) on CodePen

     

     

    Thank you so much for you help!!

    • Like 2
  11. Hi @OSUblake

     

    Thank you for your reply, 

     

    5 hours ago, OSUblake said:

    Are the animation/timeline changes supposed to happen only once, or every time the scroll position passes a certain break point?

     

    Yes, it's a repeatig animation based on the scroll position. Something like the whole animation plays in reverse when scrolled up.

     

    5 hours ago, OSUblake said:

    If so, rotating the building will cause the building's left positional value to change, which might mess stuff up.

     

    May i know how? I thought the animation would play in reverse? Kind of like the second timline would play in reverse and then it switches back to the first timeline's endpoint and plays in backword in relation to the scrollbar position...if thats not the case could you please help me acheive that?

     

    5 hours ago, OSUblake said:

    what progress value are you going to feed to the second timeline?

     

    Planning to have seperate duration box for each timeline. (The duration box for the first timeline is the #scene-1-duration-container)

     

    Thank you so much for your effort.

    Have a great day.

  12. Hi,

     

    I'm working on a parallax scrolling project without any third party libraries like scrollmagic.

     

    I'm kinda stuck with switching between timelines during the animation.

     

    I would like to play the second timeline right after the black div collides with the main character box.

    note: the rotation and timeline switching needs to be in sync with the scroll.

     

    please refer the codepen for more details about the code or reply if you need more details.

    See the Pen bOGEPe by anon (@anon) on CodePen

×
×
  • Create New...