Jump to content

Search In
  • More options...
Find results that contain...
Find results in...


  • Posts

  • Joined

  • Last visited

Recent Profile Visitors

The recent visitors block is disabled and is not being shown to other users.

namisuki's Achievements



  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 and @Dipscom That helps me a lot, thank you ? Have a great day.
  3. 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. 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: Thank you.
  4. 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) Thank you! hope new year is going good for you.
  5. Apologies for late reply!! That wraps it up!! You rock!! Thank you so much.
  6. 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?
  7. 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
  8. 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.
  9. That looks awesome!! really appreciate your skills!! Great!! Thank you, you too have a great weekend :D
  10. I'm trying to achieve this example in codedrops: (same exact effect) https://tympanus.net/Development/PFold/index2.html Thank you
  11. 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. Thank you for your help
  12. 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
  13. Hi @Jonathan Thank you for your reply, it helped me a lot! I got the below pen working well giving the booklet effect, but the problem is the second page kind of goes below the first page when turned. may i know how to overcome on that, so that it feel as if a page is turned? Thank you for your help, Have a great day!
  14. 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/